Replacing ngRoute with UI-Router

app/views/index.html

@@ -1,5 +1,5 @@
 {% extends 'layout.html' %}
 
 {% block content %}
-	<section data-ng-view></section>
+	<section data-ui-view></section>
 {% endblock %}

app/views/layout.html

@@ -58,14 +58,14 @@
 
 	<!--AngularJS-->
 	<script type="text/javascript" src="/lib/angular/angular.js"></script>
-	<script type="text/javascript" src="/lib/angular-route/angular-route.js"></script>
 	<script type="text/javascript" src="/lib/angular-resource/angular-resource.js"></script>
 	<script type="text/javascript" src="/lib/angular-cookies/angular-cookies.js"></script>
 	<script type="text/javascript" src="/lib/angular-animate/angular-animate.js"></script>
 
 	<!--Angular UI-->
 	<script type="text/javascript" src="/lib/angular-bootstrap/ui-bootstrap.js"></script>
 	<script type="text/javascript" src="/lib/angular-ui-utils/ui-utils.js"></script>
+	<script type="text/javascript" src="/lib/angular-ui-router/release/angular-ui-router.js"></script>
 
 	<!--AngularJS Application Init-->
 	<script type="text/javascript" src="/js/config.js"></script>

bower.json

@@ -5,12 +5,12 @@
 	"dependencies": {
 		"bootstrap": "latest",
 		"angular": "latest",
-		"angular-route": "latest",
 		"angular-cookies": "latest",
 		"angular-resource": "latest",
 		"angular-animate": "latest",
 		"angular-mocks": "latest",
 		"angular-bootstrap": "latest",
-		"angular-ui-utils": "latest"
+		"angular-ui-utils": "latest",
+		"angular-ui-router": "#master" 
 	}
 }

karma.conf.js

@@ -21,9 +21,9 @@ module.exports = function(config) {
 			'public/lib/angular-mocks/angular-mocks.js',
 			'public/lib/angular-cookies/angular-cookies.js',
 			'public/lib/angular-resource/angular-resource.js',
-			'public/lib/angular-route/angular-route.js',
 			'public/lib/angular-bootstrap/ui-bootstrap.js',
 			'public/lib/angular-ui-utils/ui-utils.js',
+			'public/lib/angular-ui-router/release/angular-ui-router.js',
 			'public/js/config.js',
 			'public/js/application.js',
 		].concat(modulesJSFiles),

public/js/config.js

@@ -4,7 +4,7 @@
 var ApplicationConfiguration = (function() {
 	// Init module configuration options
 	var applicationModuleName = 'mean';
-	var applicationModuleVendorDependencies = ['ngRoute', 'ngResource', 'ngCookies', 'ngAnimate', 'ui.bootstrap', 'ui.utils'];
+	var applicationModuleVendorDependencies = ['ngResource', 'ngCookies', 'ngAnimate', 'ui.router', 'ui.bootstrap', 'ui.utils'];
 
 	// Add a new vertical module
 	var registerModule = function(moduleName) {

public/modules/articles/config/routes.js

@@ -1,20 +1,25 @@
 'use strict';
 
 //Setting up route
-angular.module('mean.articles').config(['$routeProvider',
-    function($routeProvider) {
-        $routeProvider.
-        when('/articles', {
-            templateUrl: 'modules/articles/views/list.html'
-        }).
-        when('/articles/create', {
-            templateUrl: 'modules/articles/views/create.html'
-        }).
-        when('/articles/:articleId', {
-            templateUrl: 'modules/articles/views/view.html'
-        }).
-        when('/articles/:articleId/edit', {
-            templateUrl: 'modules/articles/views/edit.html'
-        });
-    }
+angular.module('mean.articles').config(['$stateProvider',
+	function($stateProvider) {
+		// Articles state routing
+		$stateProvider.
+		state('listArticles', {
+			url: '/articles',
+			templateUrl: 'modules/articles/views/list.html'
+		}).
+		state('createArticle', {
+			url: '/articles/create',
+			templateUrl: 'modules/articles/views/create.html'
+		}).
+		state('viewArticle', {
+			url: '/articles/:articleId',
+			templateUrl: 'modules/articles/views/view.html'
+		}).
+		state('editArticle', {
+			url: '/articles/:articleId/edit',
+			templateUrl: 'modules/articles/views/edit.html'
+		});
+	}
 ]);

public/modules/articles/controllers/articles.js

@@ -1,7 +1,7 @@
 'use strict';
 
-angular.module('mean.articles').controller('ArticlesController', ['$scope', '$routeParams', '$location', 'Authentication', 'Articles',
-    function($scope, $routeParams, $location, Authentication, Articles) {
+angular.module('mean.articles').controller('ArticlesController', ['$scope', '$stateParams', '$location', 'Authentication', 'Articles',
+    function($scope, $stateParams, $location, Authentication, Articles) {
         $scope.authentication = Authentication;
 
         $scope.create = function() {
@@ -53,7 +53,7 @@ angular.module('mean.articles').controller('ArticlesController', ['$scope', '$ro
 
         $scope.findOne = function() {
             Articles.get({
-                articleId: $routeParams.articleId
+                articleId: $stateParams.articleId
             }, function(article) {
                 $scope.article = article;
             });

public/modules/articles/tests/articles.spec.js

@@ -8,7 +8,7 @@
 			var ArticlesController,
 				scope,
 				$httpBackend,
-				$routeParams,
+				$stateParams,
 				$location;
 
 			// The $resource service augments the response object with methods for updating and deleting the resource.
@@ -36,12 +36,12 @@
 			// The injector ignores leading and trailing underscores here (i.e. _$httpBackend_).
 			// This allows us to inject a service but then attach it to a variable
 			// with the same name as the service.
-			beforeEach(inject(function($controller, $rootScope, _$location_, _$routeParams_, _$httpBackend_) {
+			beforeEach(inject(function($controller, $rootScope, _$location_, _$stateParams_, _$httpBackend_) {
 				// Set a new global scope
 				scope = $rootScope.$new();
 
 				// Point global variables to injected services
-				$routeParams = _$routeParams_;
+				$stateParams = _$stateParams_;
 				$httpBackend = _$httpBackend_;
 				$location = _$location_;
 
@@ -80,7 +80,7 @@
 				});
 
 				// Set the URL parameter
-				$routeParams.articleId = '525a8422f6d0f87f0e407a33';
+				$stateParams.articleId = '525a8422f6d0f87f0e407a33';
 
 				// Set GET response
 				$httpBackend.expectGET(/articles\/([0-9a-fA-F]{24})$/).respond(sampleArticle);

public/modules/core/config/routes.js

@@ -1,11 +1,16 @@
 'use strict';
 
 // Setting up route
-angular.module('mean.core').config(['$routeProvider',
-    function($routeProvider) {
-        $routeProvider.
-        when('/', {
-            templateUrl: 'modules/core/views/home.html'
-        });
-    }
+angular.module('mean.core').config(['$stateProvider', '$urlRouterProvider',
+	function($stateProvider, $urlRouterProvider) {
+		// Redirect to home view when route not found
+		$urlRouterProvider.otherwise('/');
+
+		// Home state routing
+		$stateProvider.
+		state('home', {
+			url: '/',
+			templateUrl: 'modules/core/views/home.html'
+		});
+	}
 ]);

public/modules/users/config/routes.js

@@ -1,14 +1,17 @@
 'use strict';
 
 // Setting up route
-angular.module('mean.users').config(['$routeProvider',
-    function($routeProvider) {
-        $routeProvider.
-        when('/signup', {
-            templateUrl: 'modules/users/views/signup.html'
-        }).
-        when('/signin', {
-            templateUrl: 'modules/users/views/signin.html'
-        });
-    }
+angular.module('mean.users').config(['$stateProvider',
+	function($stateProvider) {
+		// Users state routing
+		$stateProvider.
+		state('signup', {
+			url: '/signup',
+			templateUrl: 'modules/users/views/signup.html'
+		}).
+		state('signin', {
+			url: '/signin',
+			templateUrl: 'modules/users/views/signin.html'
+		});
+	}
 ]);