AngularJS 路由

AngularJS路由允许通过不同的URL访问不同的内容。

通过AngularJS可以实现多视图的单页Web应用。

通常的URL形式为http://www.imooc.com/first/page,但在单页Web应用中AngularJS通过#+标记实例:

例如:

http://www.imooc.com/#/first

http://www.imooc.com/#/second

http://www.imooc.com/#/third

当点击以上任意链接时,向服务端请求的地址都是一样的(http://www.imooc.com/)。因为 # 号之后的内容在向服务端请求时会被浏览器忽略掉。 所以就需要在客户端实现 # 号后面内容的功能实现。

AngularJS路由就通过 # + 标记来区分不同的逻辑页面并将不同的页面绑定到对应的控制器上。

http://img.mukewang.com/wiki/5b87cc7a013201b605380308.jpg

如上图,可以看到创建了两个URL:/ShowOrders 和 /AddNewOrder。

每个URL都有对应的视图和控制器。

实例:

<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="#/course">免费课程</a></li>
            <li><a href="#/class">职业路径</a></li>
            <li><a href="#/coding">实战</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('/course',{template:'这是免费课程'})
                .when('/class',{template:'这是职业路径'})
                .otherwise({redirectTo:'/'});
            }]);
        </script>     
    </body>
</html>

运行案例

说明:

1、载入了实现路由的js文件:angular-route.js。

2、包含了ngRoute模块作为主应用模块的依赖块。

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

3、使用ngView指令。

<div ng-view></div>

这个div里的HTML内容会根据路由的变化而变化。

4、配置 $routeProvider,AngularJS $routeProvider 用来定义路由规则。

module.config(['$routeProvider', function($routeProvider){
    $routeProvider
       .when('/',{template:'这是首页'})
       .when('/course',{template:'这是免费课程'})
       .when('/class',{template:'这是职业路径'})
       .otherwise({redirectTo:'/'});
}]);

AngularJS 模块的 config 函数用于配置路由规则。通过使用 configAPI,请求把$routeProvider注入到配置函数并且使用$routeProvider.whenAPI来定义路由规则。

$routeProvider 为我们提供了 when(path,object) & otherwise(object) 函数按顺序定义所有路由,函数包含两个参数:URL 或者 URL 正则规则、路由配置对象。

路由设置对象

AngularJS 路由也可以通过不同的模板来实现。

$routeProvider.when 函数的第一个参数是  URL 或者 URL 正则规则,第二个参数为路由配置对象。

路由配置对象语法规则如下:

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

参数说明:

template:如果只需要在ng-view中插入简单的HTML内容,则使用该参数:

templateUrl:如果只需要在ng-view中插入HTML模板文件,则使用该参数。

controller:function、string或数组类型,在当前模板上执行的controller函数,生成新的scope。

controllerAs:string类型,为controller指定别名。

redirectTo:重定向的地址。

resolve:指定当前controller所依赖的其他模块。

实例:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src=" 
<script src=" </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>

运行案例

本内容均来自互联网,仅供参考,如有侵权请及时通知本站予以删除。邮箱:wiki#imooc.com (#改成@)

意见反馈 帮助中心 APP下载
官方微信