shea256 · Jun 20, 2017 · Jun 20, 2017 · Jun 20, 2017 · Jun 20, 2017 · Jun 20, 2017
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 Ryan Shea - http://shea.io
+Copyright (c) 2017 Stanley Luck - http://vectoranalytix.com
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
+THE SOFTWARE.
diff --git a/README.md b/README.md
@@ -1,3 +1,31 @@
+### Updating the shea256/angular-flask application
+This fork was created because the original code for the angular-flask application, https://github.com/shea256/angular-flask, is not compatible with the more recent versions of angular and the new JSON API media type, as of June, 2017.
+
+This fork includes more recent versions of the following packages:
++  angular-1.6.4
++  angular-resource-1.6.4
++  angular-route-1.6.4
++  bootstrap-3.3.7
++  jquery-3.2.1
+
+Summary of code changes:
+1. manage.py:
+   revised to conform to the newer JSON API media type, 'application/vnd.api+json', for exchanging data.
+2. data/db_items.json:
+   revised
+3. templates/index.html:
+   revised to include angular-route.js
+4. static/js/app.js:
+   revised to include the ngRoute package, which is needed for $routeProvider
+5. static/js/services.js:
+   revised the Post factory object to conform to the JSON API media type.
+6. static/js/controllers.js:
+   revised to format the result of the Post query properly for display.
+7. HTML5 mode for AngularJS routing:
+   see https://stackoverflow.com/questions/16677528/location-switching-between-html5-and-hashbang-mode-link-rewriting
+
+The following is from the README for the original application.
+
 # AngularJS + Flask Boilerplate App
 
 A template for building apps with an Angular frontend and a Flask / python backend.
@@ -13,9 +41,7 @@ A template for building apps with an Angular frontend and a Flask / python backe
 > python runserver.py
 
 4. create and seed the db (the server must still be running, so open a new terminal window first)
-> python manage.py create_db && python manage.py seed_db --seedfile 'data/db_items.json'
+> python manage.py create_db && python manage.py seed_db --seedfile ./data/db_items.json
 
 5. check out your blog
 > http://localhost:5000/blog
-
-6. if you like this project, give it a star :)
diff --git a/angular_flask/core.py b/angular_flask/core.py
@@ -1,7 +1,7 @@
 from angular_flask import app
 
-from flask.ext.sqlalchemy import SQLAlchemy
-from flask.ext.restless import APIManager
+from flask_sqlalchemy import SQLAlchemy
+from flask_restless import APIManager
 
 db = SQLAlchemy(app)
 

diff --git a/angular_flask/settings.py b/angular_flask/settings.py
@@ -1,5 +1,10 @@
+import os
+# Grabs the folder where the script runs.
+basedir = os.path.abspath(os.path.dirname(__file__))
+
 
 DEBUG = True
 SECRET_KEY = 'temporary_secret_key'  # make sure to change this
 
-SQLALCHEMY_DATABASE_URI = 'sqlite:////tmp/angular_flask.db'
+# Connect to sqlite database
+SQLALCHEMY_DATABASE_URI = 'sqlite:///' + os.path.join(basedir, 'angular_flask.db')
diff --git a/angular_flask/static/js/app.js b/angular_flask/static/js/app.js
@@ -1,6 +1,6 @@
 'use strict';
 
-angular.module('AngularFlask', ['angularFlaskServices'])
+angular.module('AngularFlask', ['ngRoute', 'angularFlaskServices'])
 	.config(['$routeProvider', '$locationProvider',
 		function($routeProvider, $locationProvider) {
 		$routeProvider
@@ -31,5 +31,6 @@ angular.module('AngularFlask', ['angularFlaskServices'])
 		;
 
 		$locationProvider.html5Mode(true);
+		$locationProvider.hashPrefix('');
 	}])
-;
+;
diff --git a/angular_flask/static/js/controllers.js b/angular_flask/static/js/controllers.js
@@ -11,13 +11,23 @@ function AboutController($scope) {
 }
 
 function PostListController($scope, Post) {
-	var postsQuery = Post.get({}, function(posts) {
-		$scope.posts = posts.objects;
-	});
+    var self = this;
+    self.posts = [];
+    var postsQuery = Post.get({postId: ''});
+    postsQuery.$promise.then(function (result) {
+		angular.forEach(result['data'], function(post, akey) {
+			this.push({id: post['id'], title: post['attributes']['title']});
+		}, self.posts);
+		$scope.posts = self.posts;
+    });
 }
 
+
 function PostDetailController($scope, $routeParams, Post) {
-	var postQuery = Post.get({ postId: $routeParams.postId }, function(post) {
+    var postsQuery = Post.get({ postId: $routeParams.postId });
+    postsQuery.$promise.then(function (result) {
+		var data = result['data'];
+		var post = {id: data['id'], title: data['attributes']['title'], body : data['attributes']['body']};
 		$scope.post = post;
-	});
+    });	
 }
diff --git a/angular_flask/static/js/services.js b/angular_flask/static/js/services.js
@@ -1,16 +1,17 @@
 'use strict';
 
 angular.module('angularFlaskServices', ['ngResource'])
-	.factory('Post', function($resource) {
-		return $resource('/api/post/:postId', {}, {
-			query: {
-				method: 'GET',
-				params: { postId: '' },
-				isArray: true
+	.factory('Post', ['$resource', function($resource) {
+		return $resource('/api/post/:postId',
+			{},
+			{
+				get: {
+					method: 'GET',
+					params: { postId: '@_id' },
+					isArray: false,
+					headers: {'Content-Type': 'application/vnd.api+json',
+								'Accept': 'application/vnd.api+json'}
+				}
 			}
-		});
-	})
-;
-
-
-
+		);	
+	}]);
diff --git a/angular_flask/static/lib/angular/angular-resource.js b/angular_flask/static/lib/angular/angular-resource.js
diff --git a/angular_flask/static/lib/angular/angular-resource.min.js b/angular_flask/static/lib/angular/angular-resource.min.js
diff --git a/angular_flask/static/lib/angular/angular-route.js b/angular_flask/static/lib/angular/angular-route.js
diff --git a/angular_flask/static/lib/angular/angular-route.min.js b/angular_flask/static/lib/angular/angular-route.min.js
diff --git a/angular_flask/static/lib/angular/angular.js b/angular_flask/static/lib/angular/angular.js
diff --git a/angular_flask/static/lib/angular/angular.min.js b/angular_flask/static/lib/angular/angular.min.js
diff --git a/angular_flask/static/lib/bootstrap/bootstrap.js b/angular_flask/static/lib/bootstrap/bootstrap.js
diff --git a/angular_flask/static/lib/bootstrap/bootstrap.min.js b/angular_flask/static/lib/bootstrap/bootstrap.min.js
diff --git a/angular_flask/static/lib/jquery/jquery.js b/angular_flask/static/lib/jquery/jquery.js
diff --git a/angular_flask/static/lib/jquery/jquery.min.js b/angular_flask/static/lib/jquery/jquery.min.js
diff --git a/angular_flask/templates/index.html b/angular_flask/templates/index.html
@@ -2,20 +2,14 @@
 <html lang="en" ng-app="AngularFlask">
 <head>
 	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<base href="/"/>
 	<title>AngularFlask</title>
 
 	<link rel="stylesheet" href="/static/css/bootstrap.css">
 	<link rel="stylesheet" href="/static/css/main.css">
 
-	<script src="/static/lib/angular/angular.js"></script>
-	<script src="/static/lib/angular/angular-resource.js"></script>
-
-	<script src="/static/js/app.js"></script>
-	<script src="/static/js/controllers.js"></script>
- 	<script src="/static/js/services.js"></script>
-
-	<script src="/static/lib/jquery/jquery.min.js"></script>
-	<script src="/static/lib/bootstrap/bootstrap.min.js"></script>
 </head>
 <body>
 	<div id="header" class="header navbar navbar-static-top">
@@ -49,5 +43,17 @@
 			</div>
 		</footer>
 	</div>
+
+	<script src="/static/lib/angular/angular.js"></script>
+	<script src="/static/lib/angular/angular-resource.js"></script>
+	<script src="/static/lib/angular/angular-route.js"></script>
+
+	<script src="/static/js/app.js"></script>
+	<script src="/static/js/controllers.js"></script>
+ 	<script src="/static/js/services.js"></script>
+
+	<script src="/static/lib/jquery/jquery.min.js"></script>
+	<script src="/static/lib/bootstrap/bootstrap.min.js"></script>
+
 </body>
-</html>
+</html>
diff --git a/cenv.bat b/cenv.bat
@@ -0,0 +1,4 @@
+@rem wsgiref - python2.7
+@rem conda install -c phumke gunicorn=19.3.0
+conda create --name angtest python=2.7 Flask Flask-Restless Flask-SQLAlchemy python-dateutil requests python-mimeparse wsgiref
+
diff --git a/data/db_items.json b/data/db_items.json
@@ -1 +1 @@
-{ "post": [{"body": "Welcome to my blog. I will be putting up posts about various topics, so make sure to check back soon.", "title": "My First Blog Post"}, {"body": "It is day two of my blogging efforts, and a lot has changed since I last wrote. Well, not really...", "title": "My Second Blog Post"}] }
+{ "post": [{"data": {"type": "post", "attributes" : {"body": "Welcome to my blog. I will be putting up posts about various topics, so make sure to check back soon.", "title": "My First Blog Post"}}}, {"data": {"type":"post", "attributes": {"body": "It is day two of my blogging efforts, and a lot has changed since I last wrote. Well, not really...", "title": "My Second Blog Post"}}}]}
diff --git a/manage.py b/manage.py
@@ -2,19 +2,17 @@
 import json
 import argparse
 import requests
-
 from angular_flask.core import db
 from angular_flask.models import Post
 
-
 def create_sample_db_entry(api_endpoint, payload):
     url = 'http://localhost:5000/' + api_endpoint
     r = requests.post(
         url, data=json.dumps(payload),
-        headers={'Content-Type': 'application/json'})
+        headers={'Content-Type': 'application/vnd.api+json',
+                 'Accept' : 'application/vnd.api+json'})
     print r.text
 
-
 def create_db():
     db.create_all()
 
@@ -23,6 +21,15 @@ def drop_db():
     db.drop_all()
 
 
+def test_db():
+    url = 'http://localhost:5000/api/post'
+    r = requests.get(url,
+        headers={'Content-Type': 'application/vnd.api+json',
+                 'Accept' : 'application/vnd.api+json'})
+    print r.text
+    return
+
+
 def main():
     parser = argparse.ArgumentParser(
         description='Manage this Flask application.')
@@ -46,12 +53,12 @@ def main():
 
         for item_class in seed_data:
             items = seed_data[item_class]
-            print items
             for item in items:
-                print item
                 create_sample_db_entry('api/' + item_class, item)
 
         print "\nSample data added to database!"
+    elif args.command == 'test':
+        test_db()
     else:
         raise Exception('Invalid command')
 

diff --git a/requirements.txt b/requirements.txt
@@ -1,15 +1,14 @@
-Flask==0.10.1
-Flask-Restless==0.13.1
-Flask-SQLAlchemy==0.16
-Jinja2==2.7
-MarkupSafe==0.18
-SQLAlchemy==0.8.2
-Werkzeug==0.9.2
-gunicorn==17.5
-itsdangerous==0.22
-mimerender==0.5.4
-python-dateutil==2.1
-python-mimeparse==0.1.4
-requests==1.2.3
-six==1.3.0
+Flask==0.12
+Flask-Restless==1.0.0b1
+Flask-SQLAlchemy==2.2
+Jinja2==2.9.5
+MarkupSafe==1.0
+SQLAlchemy==1.1.5
+Werkzeug==0.11.10
+itsdangerous==0.24
+mimerender==0.6.0
+python-dateutil==2.6.0
+python-mimeparse==1.6.0
+requests==2.18.1
+six==1.10.0
 wsgiref==0.1.2
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		{ "post": [{"body": "Welcome to my blog. I will be putting up posts about various topics, so make sure to check back soon.", "title": "My First Blog Post"}, {"body": "It is day two of my blogging efforts, and a lot has changed since I last wrote. Well, not really...", "title": "My Second Blog Post"}] }
		{ "post": [{"data": {"type": "post", "attributes" : {"body": "Welcome to my blog. I will be putting up posts about various topics, so make sure to check back soon.", "title": "My First Blog Post"}}}, {"data": {"type":"post", "attributes": {"body": "It is day two of my blogging efforts, and a lot has changed since I last wrote. Well, not really...", "title": "My Second Blog Post"}}}]}