AngularJS学习篇(二103)

AngularJS 路由

AngularJS 路由允许咱们经过不一致的 UBMWX3L 访问不一致的情节。

经过 AngularJS 能够兑现多视图的单页Web应用(single page web
application,SPA)。

1般大家的UKugaL方式为 http://runoob.com/first/page,但在单页Web应用中
AngularJS 通过 # + 标记 实现,例如:

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

当大家点击以上的妄动1个链接时,向劳动端请的地址都以如出一辙的
(http://runoob.com/)。 因为 #
号之后的故事情节在向服务端请求时会被浏览器忽略掉。
所以大家就须求在客户端实现 # 号前边内容的意义实现。 AngularJS 路由
就透过 # +
标记
 协助大家分别不相同的逻辑页面并将差别的页面绑定到相应的控制器上。

图片 1

 

接下去大家来看多个差不多的实例:

<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>

实例分析:

  • 1、载入了落到实处路由的 js 文件:angular-route.js。

  • 贰、包蕴了 ngRoute 模块作为主应用模块的重视性模块。

    angular.module(‘routingDemoApp’,[‘ngRoute’])

  • 3、使用 ngView 指令。

    <div ng-view></div>
    

    该 div 内的 HTML 内容会基于路由的变通而生成。

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

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

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

$routeProvider 为大家提供了 when(path,object) & otherwise(object)
函数按顺序定义全数路由,函数包含多少个参数:

  • 先是个参数是 UBMWX叁L 也许 UEvoqueL 正则规则。
  • 第贰个参数是路由配置对象。

路由设置对象

AngularJS 路由也得以透过不一样的沙盘来完结。

$routeProvider.when 函数的率先个参数是 U牧马人L 可能 U宝马X3L
正则规则,第二个参数为路由安插对象。

 

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

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

参数表明:

  • template:

    设若大家只须要在 ng-view 中插入不难的 HTML 内容,则应用该参数:

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

    假定我们只要求在 ng-view 中插入 HTML 模板文件,则动用该参数:

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

    如上代码会从服务端获取 views/computers.html 文件内容插入到 ng-view
    中。

  • controller:

    function、string或数组类型,在脚下模板上推行的controller函数,生成新的scope。

  • controllerAs:

    string类型,为controller内定别称。

  • redirectTo:

    重定向的地址。

  • resolve:

    点名当前controller所依赖的别样模块。

相关文章