AngularJS route: ng-route and ui-router

AngularJS route: ng-route and ui-router

The ng-route module of AngularJS provides [Deep-Linking] URLs for controllers and views. In general, in the ng-route Module$routeService monitoring$location.url()And map it to a pre-defined controller. That is, URL routing on the client. First$routeAnd then introduce a more powerful client routing framework ui-router.

Angular Routing

Define controllers for multiple pages in the APP and provide the corresponding template. Then$routeProviderTo map URLs to these controllers and views. First define a basic Angular APP and introducengRoute:

Angular$routeService inngRouteModule. You need to introduce the corresponding javascript file, and in our APPngRouteAdd as a module dependency (how to add a module dependency ?).

var app = angular.module('ngRouteExample', ['ngRoute'])    .controller('MainController', function($scope) {    })    .config(function($routeProvider, $locationProvider) {      $routeProvider          .when('/http://blog.csdn.net/yangjvn/article/details/users', {              templateUrl: 'user-list.html',              controller: 'UserListCtrl'          })          .when('/http://blog.csdn.net/yangjvn/article/details/users/:username', {              templateUrl: 'user.html',              controller: 'UserCtrl'          });        // configure html5        $locationProvider.html5Mode(true);    });

In the above Code,$routeProviderDefines the ing between two URLs:/http://blog.csdn.net/yangjvn/article/details/usersUseuser-list.htmlAs a template,UserListCtrlAs a controller;/http://blog.csdn.net/yangjvn/article/details/users/:usernameWill match similar/http://blog.csdn.net/yangjvn/article/details/users/aliceURL, you will see how to get:usernameThe matched value. First look at the homepage template:

HTML5Mode: the URL of the server-side route and client route is#Separated. For example/foo/bar#/http://blog.csdn.net/yangjvn/article/details/users/aliceAngular routes through the operation anchor. Howeverhtml5Mode(true)Will be removed#, URL/foo/bar/http://blog.csdn.net/yangjvn/article/details/users/alice(This requires the browser to support HTML5, because Angular usespushState). In this case, the server needs to return the home page (/foo/bar) View, and then route it to Angular/foo/bar/http://blog.csdn.net/yangjvn/article/details/users/aliceView.

Choose: user list | user: alice  

Note that there isdiv[ng-view], The Child page will be loaded here.

Route Parameters

Then we define the subpage controller and view template of the preceding route configuration. User List page:

app.controller('UserListCtrl', function($scope) {});

User List Page

User page:

app.controller('UserCtrl', function($scope, $routeParams) {    $scope.params = $routeParams;});

User Page

Click/http://blog.csdn.net/yangjvn/article/details/users/aliceWill Loaduser.html,spanIsalice. $ RouteParams provides the current route parameters, for example:

// Given:// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby// Route: /Chapter/:chapterId/Section/:sectionId//// Then$routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'}

In addition to $ routeParams, Angular also provides $ location to get and set URLs.

UI-Router

UI-Router is a client routing framework provided by Angular-UI. It solves many native ng-route shortcomings:

1. View cannot be nested. This means$scopeUnnecessary re-loading will occur. This is also introduced in Onboard.ui-route.
2. Multiple views are not supported under the same URL. This requirement is also common: we want the navigation bar to use one view (and the corresponding Controller), and the content part to use another view (and the corresponding Controller ).

   UI-Router proposed$state. One$stateIs the status of the current navigation and UI, each$stateYou need to bind a URL Pattern. In the controller and template$stateFor URL redirection and routing. This is a simple example:

   // in app-states.js$stateProvider    .state('contacts', {        url: '/contacts',        template: 'contacts.html',        controller: 'ContactCtrl'    })    .state('contacts.detail', {        url: /contacts/:contactId,        templateUrl: 'contacts.detail.html',        controller: function ($stateParams) {            // If we got here from a url of /contacts/42            $stateParams.contactId === 42;        }    });

   When accessing/contacts,contacts $stateActivated to load the corresponding controller and view. Generally$stateInstead of directly performing URL operations. For example, use $ state. go in the script:

   $ State. go ('contacts'); // specify the state name, which is equivalent to redirecting to/contacts $ state. go ('contacts. detail ', {contactId: 42}); // jump to/contacts/42

   Use ui-sref in the template (this is a direve VE ):

   ContactsContact 42

   Nested View

   Unlike native ng-route of Angular, the ui-router view can be nested, And the view nesting usually corresponds to the nesting of $ state.contacts.detailYescontactsChild$state,contacts.detail.htmlWill also actcontacts.htmlSub-page:

   My Contacts 

   Aboveui-viewUsage andng-viewIt looks very similar, but the difference isui-viewCan be used together$stateNesting at any level, that iscontacts.detail.htmlCan still containui-view, Its$stateIt may becontacts.detail.hobbies.

   Naming View

   In ui-router$stateThere can be multiple views under, they have their own templates and controllers. This is not what ng-route does. It gives the front-end routing great flexibility. Here is an example:

   This template contains three namedui-viewYou can set templates and controllers for them:

   $stateProvider  .state('report',{    views: {      'filters': {        templateUrl: 'report-filters.html',        controller: function($scope){ ... controller stuff just for filters view ... }      },      'tabledata': {        templateUrl: 'report-table.html',        controller: function($scope){ ... controller stuff just for tabledata view ... }      },      'graph': {        templateUrl: 'report-graph.html',        controller: function($scope){ ... controller stuff just for graph view ... }      }    }  })