Angular Routes

As we all of know that AngularJS is very popular and powerful front-end framework, which helps us to build rich UI/UX applications. AngularJS has many cool things/features, but today we will concentrate on routes only and will try to make a small single page application like Facebook/Gmail with the help of routes, where we will perform User CRUD operations only.

First of all define route mapping for all the different Pages:

[js]
/*
* Route Mapping: defining route for routeTest module, and as from angular 1.2 version
* ngRoute is now different module, which we have to include explicitly in depended module.
* */
// Defining a module with name routeTest and providing ngRoute as dependency.
angular.module(‘routeTest’, [‘ngRoute’])
.config([‘$routeProvider’, function ($routeProvider) {
// Defining different pages with different URLs
$routeProvider
// If Url is /user/list then list.html will render and UserListController will execute.
.when(‘/user/list’, {templateUrl: ‘partials/list.html’, controller: UserListController})
// If Url is /user/create then create.html will render and CreateUserController will execute.
.when(‘/user/create’, {templateUrl: ‘partials/create.html’, controller: CreateUserController})
// If Url is /user/edit/:id then edit.html will render and EditUserController will execute.
.when(‘/user/edit/:id’, {templateUrl: ‘partials/edit.html’, controller: EditUserController})
// If Url is /user/show/:id then show.html will render and ShowUserController will execute.
.when(‘/user/show/:id’, {templateUrl: ‘partials/show.html’, controller: ShowUserController})
// TODO Define other URL mapping here.
// If no URL matches then otherwise will execute and will redirect to /user/list
.otherwise({redirectTo: ‘/user/list’});
}]);
[/js]

We have declared controller and templateUrl with every URL, controller will execute and html (which is defined with templateUrl) will render with the corresponding URL. And that controller scope will apply to that corresponding render html. Define all HTMLs in partial directive/folder and defining Controllers with dummy as body given below (You can see full working source code from this link):

[js]
/*
* Master Controller, whose scope will be visible to whole body,
* because we will mark it on body tag.
* */
function MainController($scope) {
// Master Controller
}

/*
* UserListController, who is responsible for /user/list Url
* and its scope will be visible to list.html only.
* */
function UserListController($scope) {
// User List functionality
}

/*
* CreateUserController, who is responsible for /user/list Url
* and its scope will be visible to create.html only.
* */
function CreateUserController($scope, $location) {
// Create User functionality
}

/*
* ShowUserController, who is responsible for /user/list Url
* and its scope will be visible to show.html only.
* */
function ShowUserController($scope, $routeParams) {
// Show user functionality
}

/*
* EditUserController, who is responsible for /user/list Url
* and its scope will be visible to edit.html only.
* */
function EditUserController($scope, $routeParams, $location) {
// Edit User functionality
}
[/js]

Now define a HTML, which will use all these Code:

[html]

<!–
marking ng-app directive to html tag with routeTest value, which says that we are
going to use AngularJS on whole html and routeTest module will be apply to HTML.
–>

<!– Require AngularJS –>

<!– Require Angular-Route-JS –>

<!– Require Common Utility UnderscoreJS –>

<!– Require custom routeJS –>

<!–
Marking MainController to body tag, so whole body will get scope of Main Controller, All other
controller will be child Controller of MainController, so we also call it as Master Controller.
–>

<!–
MainController has a scope, which will be accessible to whole html body, because body tag is
marked with MainController, MainController have a property into its scope with mainPage,
which has a property named as “title”, which we are accessing with dot(.) operator on mainPage,
And mainPage property is being directly accessed from MainController scope.
–></pre>
<h2>{{mainPage.title}}</h2>

<hr />

<div><a href="#/user/list">List</a> |
<a href="#/user/create">Create</a></div>

<hr />

<pre><!–
Defining ng-view Directive, where all partial html will load based on Route/URL Mapping. And
Controller will execute before partial HTML render. That partial HTML will replace itself
with inner-HTML of ng-view Directive.
–>

Loading…</pre>

<hr />

<pre>
[/html]

NOTE: You can checkout full working source code from this link.

Read Further on AngularJS Series

• AngularJS : A “Write Less Do More” JavaScript Framework
• AngularJS : Updating a Label Dynamically with User Input
• AngularJS : Adding Items to a JavaScript List and updating corresponding DOM Dynamically
• AngularJS : Text Suggestions
• AngularJS : Sorting objects on various attributes
• AngularJS : Fetching data from the server
• AngularJS : Multiple Views, Layout Template and Routing
• AngularJS : Implementing Routes And Multiple Views
• Building Intuitive Frontend Interfaces with AngularJS