updating angularjs, upgrades for the JSON API media type

README.md

@@ -1,3 +1,36 @@
+### Updating the shea256/angular-flask application
+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.
+
+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.
+
+### How to Get Started
+
+
 # AngularJS + Flask Boilerplate App
 
 A template for building apps with an Angular frontend and a Flask / python backend.
@@ -17,5 +50,3 @@ A template for building apps with an Angular frontend and a Flask / python backe
 
 5. check out your blog
 > http://localhost:5000/blog
-
-6. if you like this project, give it a star :)

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)
 

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')

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

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;
-	});
+    });	
 }

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'}
+				}
 			}
-		});
-	})
-;
-
-
-
+		);	
+	}]);