updated to newest version angularJs

Author: Thomas Vo

app/index.html

@@ -37,7 +37,8 @@
 
 	<meta name="viewport" content="width=device-width,initial-scale=1" />
 	<link rel="stylesheet" href="css/app.css" />
-
+    <link rel="stylesheet" href="js/libs/bootstrap/css/bootstrap.css"/>
+    <link rel="stylesheet" href="js/libs/bootstrap/css/bootstrap-responsive.css"/>
 	<script src="js/libs/modernizr-2.0.6.min.js"></script>
 </head>
 

app/js/app.js

@@ -7,30 +7,28 @@ define([
 
 	// Application Files
 	, 'services/services'
-	, 'widgets/widgets'
+	, 'directives/directives'
 	, 'filters/filters'
 	, 'controllers/controllers'	
-], function (Console, $, _, angular, services, widgets, filters, controllers) {
+], function (Console, $, _, angular, services, directives, filters, controllers) {
 	"use strict";
 
 	var initialize = function () {
 		Console.group("Starting application.");
 		Console.info("Services: ", services);
-		Console.info("Widgets: ", widgets);
+		Console.info("Widgets: ", directives);
 		Console.info("Filters: ", filters);
 		Console.info("Controllers: ", controllers);
 
 		Console.group("Setup Angular");
 
-		services.initialize();
-		widgets.initialize();
-		filters.initialize();
+        var mainModule = angular.module('myApp',['ngResource']);
+		services.initialize(mainModule);
+		directives.initialize(mainModule);
+		filters.initialize(mainModule);
+        controllers.initialize(mainModule);
 
-		var scope = angular.scope();
-		_.extend(scope, controllers);		
-		Console.debug("Controllers loaded.");
-
-		angular.compile(window.document)(scope);
+		angular.bootstrap(window.document,['myApp']);
 		Console.info("Angular compiled and executed.");
 
 		Console.groupEnd(); // [angular]

app/js/bootstrap.js

@@ -6,6 +6,7 @@ require.config({
 		, jQuery: 'libs/jquery/jquery'//'http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min'
 		, Underscore: 'libs/underscore/underscore'
 		, Angular: 'libs/angular/angular'
+        , templates: './../templates'
 	}
 	, priority: [ 
 		"Console"

app/js/controllers/AppController.js

@@ -1,69 +1,16 @@
 define([
 	// Standard Libs
 	'Console'		// lib/console/console
-	, 'Underscore'	// lib/underscore/underscore
-
-	// Custom controllers
-	, 'controllers/HomeController'
-	, 'controllers/DataController'
-], function (Console, _, home, data) {
+    , 'routes/routes'
+], function (Console,routes) {
 	"use strict";
-	Console.group("Entering AppController module.");
-	Console.info("HomeController", home);
-	Console.info("DataController", data);
 
-	var controller = function ($route) {
+	var appController = ['$scope',function ($scope) {
 		Console.group("AppController entered");
-		Console.info("Route: ", $route);
-
-		var scope = this;	
-
-		// default title if javascript is being slow
-		scope.title = 'loading...';
-
-		// application navigation
-		scope.navigation = {
-			home: { 
-				title: 'Home'
-				, route: '/home'
-				, controller: home
-				, template: 'templates/Home.xhtml'
-			}
-			, creation: { 
-				title: 'Data List'
-				, route: '/data'
-				, controller: data
-				, template: 'templates/Data.xhtml'
-			}
-		};
-
-		// hook up routing
-		Console.group( 'Initializing navigation and routing.' );
-		_.each(scope.navigation, function(value, key) {
-			Console.debug("Adding ", key, ":", value);
-			$route.when(
-				value.route
-				, {
-					template: value.template
-					, controller: value.controller
-					, title: value.title
-				}
-			);
-		});
-		$route.otherwise({ redirectTo: scope.navigation.home.route });
-		$route.onChange(function () {
-			Console.debug("Navigating to ", $route.current);
-			scope.params = $route.current.params;
-			scope.title = $route.current.title;
-		});
-		$route.parent(this);
-		
-		Console.groupEnd();// .routing
+        $scope.navigation = routes;
 		Console.groupEnd();// .controller
-	};
-	controller.$inject = ['$route'];
-	controller.$eager = true;
+	}];
 
 	Console.groupEnd();
-	return controller;
+	return appController;
 });

app/js/controllers/DataController.js

@@ -2,33 +2,31 @@ define(['Console'], function (Console) {
 	"use strict";
 	Console.group("Entering DataController module.");
 
-	var controller = function (DataService) {
+	var controller = ['$scope', 'DataService', function ($scope,DataService) {
 		Console.group("DataController entered.");
 
-		var scope = this;
 
-		scope.queue = DataService.query();
-		scope.queueHead = {
+		$scope.queue = DataService.query();
+		$scope.queueHead = {
 			id: 'ID'
 			, status: 'Status'
 			, name: 'Name'
 		};
 
-		scope.orderByCol = 'id';
-		scope.orderByReversed = false;
+		$scope.orderByCol = 'id';
+		$scope.orderByReversed = false;
 
-		this.flipOrderBy = function(col) {
+		$scope.flipOrderBy = function(col) {
 			Console.group("orderByCol", col);
-			scope.orderByReversed = (col == scope.orderByCol) ? !scope.orderByReversed : false;
-			scope.orderByCol = col;		
+			$scope.orderByReversed = (col == $scope.orderByCol) ? !$scope.orderByReversed : false;
+			$scope.orderByCol = col;
 
-			Console.debug("reversed?", scope.orderByReversed);
+			Console.debug("reversed?", $scope.orderByReversed);
 			Console.groupEnd();
 		}
 
 		Console.groupEnd();
-	};
-	controller.$inject = ['DataService'];
+	}];
 
 	Console.groupEnd();
 	return controller;

app/js/controllers/HomeController.js

@@ -2,11 +2,8 @@ define(['Console'], function (Console) {
 	"use strict";
 	Console.group("Entering HomeController module.");
 
-	var controller = function () {
+	var controller = function ($scope) {
 		Console.group("HomeController entered.");
-
-		var scope = this;
-
 		Console.groupEnd();
 	};
 	controller.$inject = [];

app/js/controllers/controllers.js

@@ -3,18 +3,65 @@ define([
 	'Console'		// lib/console/console
 	, 'Underscore'	// lib/underscore/underscore
 
-	// Application Controller
+    // routing
+    , 'routes/routes'
+
+    // Application Controller
 	, 'controllers/AppController' // Main Application Controller - contains routing logic
-], function (Console, _, app){
+    , 'controllers/HomeController'
+    , 'controllers/DataController'
+
+], function (Console, _, routes,
+             app,home,data){
 	"use strict";
 	Console.group("Entering controllers module.");
 	Console.info("AppController", app);
 
-	var registeredControllers = {
-		AppController: app
-	};
-	Console.info("Registered Controllers: ", registeredControllers);
+    var controllers = {
+        home: home,
+        data: data
+    };
+
+
+    var setUpRoutes = function(angModule) {
+
+
+        // hook up routing
+        Console.group( 'Initializing navigation and routing.' );
+        angModule.config(function($routeProvider){
+            _.each(routes, function(value, key) {
+                Console.debug("Adding ", key, ":", value);
+                $routeProvider.when(
+                    value.route
+                    , {
+                        template: value.template
+                        , controller: value.controller
+                        , title: value.title
+                    }
+                );
+            });
+            $routeProvider.otherwise({ redirectTo: routes.home.route });
+        });
+        angModule.run(function($rootScope){
+            $rootScope.$on('$routeChangeSuccess',function (next,last) {
+                Console.debug("Navigating from ", last);
+                Console.debug("Navigating to   ", next);
+            });
+        });
+    }
+
+    var initialize = function(angModule) {
+        angModule.controller('AppController',app);
+        _.each(controllers,function(controller,name){
+            angModule.controller(name,controller);
+        })
+        setUpRoutes(angModule);
+        Console.info("Registered Controllers: ", controllers);
+    };
+
 
 	Console.groupEnd();
-	return registeredControllers;
+	return {
+        initialize: initialize
+    };
 });

app/js/widgets/widgets.js renamed to app/js/directives/directives.js

@@ -11,11 +11,13 @@ define([
 	"use strict";
 	Console.group("Entering Widgets module.");
 
-	var registeredWidgets = {};
-	Console.info("Registered widgets: ", registeredWidgets);
+	var directives = {};
+	Console.info("Registered directives: ", directives);
 
-	var initialize = function () {
-		_.extend(angular.widget, registeredWidgets);
+	var initialize = function (angModule) {
+        _.each(directives,function(filter,name){
+            angModule.directive(name,filter);
+        })
 		Console.debug("Custom widgets initialized.");
 	}
 

app/js/filters/filters.js

@@ -1,21 +1,20 @@
 define([
 	// Standard Libs
 	'Console'		// lib/console/console
-	, 'jQuery'		// lib/jquery/jquery
-	, 'Underscore'	// lib/underscore/underscore
-	, 'Angular'		// lib/angular/angular
-
+    ,'Underscore'
 	// Application Filters
 
-], function (Console, $, _, angular){
+], function (Console,_){
 	"use strict";
 	Console.group("Entering Filters module.");
 
-	var registeredFilters = {};
-	Console.info("Registered filters: ", registeredFilters);
+	var filters = {};
+	Console.info("Registered filters: ", filters);
 
-	var initialize = function () {
-		_.extend(angular.widget, registeredFilters);
+	var initialize = function (angModule) {
+        _.each(filters,function(filter,name){
+            angModule.filter(name,filter);
+        })
 		Console.debug("Custom filters initialized.");
 	}