AngularJS学习篇(二十三)

AngularJS 路由

AngularJS 路由允许我们透过不同之 URL 访问不同之始末。

通过 AngularJS 可以兑现多视图的单页Web应用(single page web
application,SPA)。

一般性我们的URL形式也 http://runoob.com/first/page,但以单页Web应用中
AngularJS 通过 # + 标记 实现,例如:

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

当我们点击以上之即兴一个链接时,向劳动端请的地方都是同等的
(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。

  • 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('/computers',{template:'这是电脑分类页面'})
            .when('/printers',{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 内容,则采用该参数:

    .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所依赖之另外模块。

相关文章