{"id":13285,"date":"2014-05-01T10:09:12","date_gmt":"2014-05-01T04:39:12","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=13285"},"modified":"2017-08-03T16:00:50","modified_gmt":"2017-08-03T10:30:50","slug":"angular-routes","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/angular-routes\/","title":{"rendered":"Angular Routes"},"content":{"rendered":"

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

First of all define route<\/strong> mapping<\/strong> for all the different Pages:<\/p>\n

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

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

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

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

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

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

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

Now define a HTML, which will use all these Code:<\/p>\n

[html]<\/p>\n

<!–
\nmarking ng-app directive to html tag with routeTest value, which says that we are
\ngoing to use AngularJS on whole html and routeTest module will be apply to HTML.
\n–><\/p>\n

<!– Require AngularJS –><\/p>\n

<!– Require Angular-Route-JS –><\/p>\n

<!– Require Common Utility UnderscoreJS –><\/p>\n

<!– Require custom routeJS –><\/p>\n

<!–
\nMarking MainController to body tag, so whole body will get scope of Main Controller, All other
\ncontroller will be child Controller of MainController, so we also call it as Master Controller.
\n –><\/p>\n

<!–
\nMainController has a scope, which will be accessible to whole html body, because body tag is
\nmarked with MainController, MainController have a property into its scope with mainPage,
\nwhich has a property named as \u201ctitle\u201d, which we are accessing with dot(.) operator on mainPage,
\nAnd mainPage property is being directly accessed from MainController scope.
\n–><\/pre>
\n<h2>{{mainPage.title}}<\/h2><\/p>\n

<hr \/><\/p>\n

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

<hr \/><\/p>\n

<pre><!–
\nDefining ng-view Directive, where all partial html will load based on Route\/URL Mapping. And
\nController will execute before partial HTML render. That partial HTML will replace itself
\nwith inner-HTML of ng-view Directive.
\n–><\/p>\n

Loading…<\/pre><\/p>\n

<hr \/><\/p>\n

<pre>
\n[\/html]<\/p>\n

NOTE:<\/strong> You can checkout full working source code from this link<\/a>.<\/p>\n

Read Further on AngularJS Series<\/span><\/p>\n