1. Home
  2. AngularJS Routing

The best AngularJS Routing Tutorial In 2024, In this tutorial you can learn Route Settings object,

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://w3write.com/first/page, but in a single-page Web applications AngularJS by # + markachieved, for example: 

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

When clicking on any of the above when we have a link to the server please address are the same (http://w3write.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>

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',
});

    The above code will get views from the server / computers 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',
        controller: 'HomeController'
    }).
    when('/about', {
        templateUrl: 'embedded.about',
        controller: 'AboutController'
    }).
    otherwise({
        redirectTo: '/home'
    });
});
</script>

  
</head>

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

  <script type="text/ng-template" id="embedded.about">
      <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>

Hot Tools

Other Tools

Online Tutorial

Website Navigation

AngularJS Routing
10/30