Latest web development tutorials

AngularJS Routing

This chapter we will introduce AngularJS route.

AngularJS routed through different URL allows us to access different content.

By AngularJS can view more than a single page Web applications (single page web application, SPA).

Our URL is typically in the form ofhttp://w3big.com/first/page, but in a single-page Web applications AngularJS by # + markachieved, for example: 

http://w3big.com/#/first
http://w3big.com/#/second
http://w3big.com/#/third

When clicking on any of the above when we have a link to the server please address are the same (http://w3big.com/). Because the content after the # sign at the end of the service request will be ignored by the browser. So we need to implement the client function of the # later in implementation. AngularJS routes to help us through a# + mark to distinguish different logical page and separate pages bound to the corresponding controller.

In the above graph, we can see that created two URL: / ShowOrders and / AddNewOrder. Each URL has a corresponding view and controller.

Next we look at a simple example: 

<html>
    <head>
    	<meta charset="utf-8">
        <title>AngularJS 路由实例 - 本教程</title>
    </head>
    <body ng-app='routingDemoApp'>
     
        <h2>AngularJS 路由应用</h2>
        <ul>
            <li><a href="#/">首页</a></li>
            <li><a href="#/computers">电脑</a></li>
            <li><a href="#/printers">打印机</a></li>
            <li><a href="#/blabla">其他</a></li>
        </ul>
         
        <div ng-view></div>
        <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
        <script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
        <script>
            angular.module('routingDemoApp',['ngRoute'])
            .config(['$routeProvider', function($routeProvider){
                $routeProvider
                .when('/',{template:'这是首页页面'})
                .when('/computers',{template:'这是电脑分类页面'})
                .when('/printers',{template:'这是打印机页面'})
                .otherwise({redirectTo:'/'});
            }]);
        </script>
     
     
    </body>
</html>

try it"

Analysis examples:

  • 1, loaded implement routing js file: angular-route.js.

  • 2, contains ngRoute module as the main application module dependent module. 

    angular.module('routingDemoApp',['ngRoute'])

  • 3, using ngView instruction. 

    <div ng-view></div>

    HTML content within the div based on route changes.

  • 4, configure $ routeProvider, AngularJS $ routeProvider used to define routing rules. 

    module.config(['$routeProvider', function($routeProvider){
    $routeProvider
        .when('/',{template:'这是首页页面'})
        .when('/computers',{template:'这是电脑分类页面'})
        .when('/printers',{template:'这是打印机页面'})
        .otherwise({redirectTo:'/'});
}]);

config function AngularJS module is used to configure routing rules. By using configAPI, we request that $ routeProvider injected into our configuration function and use $ routeProvider.whenAPI to define our routing rules.

$ RouteProvider provide us when (path, object) & otherwise (object) function defines all routes in the order that takes two arguments:

  • The first parameter is the rules of regular URL or URL.
  • The second parameter is the routing configuration object.

Route Settings object

AngularJS route can be achieved through different templates.

The first argument $ routeProvider.when function is a regular rule URL or URL, the second parameter configuration of a route.

Routing Configuration object syntax rules are as follows: 

$routeProvider.when(url, {
    template: string,
    templateUrl: string,
    controller: string, function 或 array,
    controllerAs: string,
    redirectTo: string, function,
    resolve: object<key, function>
});

Parameter Description:

  • template:

    If we only need to insert a simple HTML content in ng-view, then use this parameter: 

    .when('/computers',{template:'这是电脑分类页面'})

  • templateUrl:

    If we only need to insert the HTML template files in the ng-view, then use this parameter: 

    $routeProvider.when('/computers', {
    templateUrl: 'views/computers.html',
});

    The above code will get views from the server / computers.html file content into the ng-view.

  • controller:

    function, string or array type, controller function is executed on the current template, create a new scope.

  • controllerAs:

    string type, specify an alias for the controller.

  • redirectTo:

    Address redirection.

  • resolve:

    Specifies the current controller relies on other modules.

Examples 

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>

<script type="text/javascript">
angular.module('ngRouteExample', ['ngRoute'])
.controller('HomeController', function ($scope, $route) { $scope.$route = $route;})
.controller('AboutController', function ($scope, $route) { $scope.$route = $route;})
.config(function ($routeProvider) {
    $routeProvider.
    when('/home', {
        templateUrl: 'embedded.home.html',
        controller: 'HomeController'
    }).
    when('/about', {
        templateUrl: 'embedded.about.html',
        controller: 'AboutController'
    }).
    otherwise({
        redirectTo: '/home'
    });
});
</script>

  
</head>

<body ng-app="ngRouteExample" class="ng-scope">
  <script type="text/ng-template" id="embedded.home.html">
      <h1> Home </h1>
  </script>

  <script type="text/ng-template" id="embedded.about.html">
      <h1> About </h1>
  </script>

  <div> 
    <div id="navigation">  
      <a href="#/home">Home</a>
      <a href="#/about">About</a>
    </div>
      
    <div ng-view="">
    </div>
  </div>
</body>
</html>

try it"