码迷,mamicode.com
首页 > Windows程序 > 详细

野兽的Angular Api 学习、翻译及理解 - - ngRoute Angular自带的路由

时间:2015-12-03 23:11:16      阅读:208      评论:0      收藏:0      [点我收藏+]

标签:

野兽的ng api学习 -- ngRoute

ngRoute

$routeProvider

配置路由的时候使用。

方法:

when(path,route);

在$route服务里添加一个新的路由。

path:该路由的路径。

route:路由映射信息。

controller:字符串或函数,指定控制器。

controllerAs:一个用于控制器的标识符名称。。

template:字符串或函数,html模板。

templateUrl:字符串或函数,html模板的地址。

resolve:对象,一个可选的映射的依赖关系,应注入控制器。

redirecTo:字符串或者函数,URL重定向。

otherwise(params);

设置在没有其他路由定义被匹配时,将使用的默认路由。

ngView

路由配置的页面在HTML的view里的显示的视图区域。

$route

用于在js里对路由的操作。

依赖:$location   $routeProvider

方法

reload();

使路由服务重新加载当前路由,即使路由没有改变。

updateParams(newParams);

操作路由服务更新当前的URL,使用newParams里指定的路由参数指定当前路由参数。

newParams:将URL参数名称映射到value。

事件

$routeChangeStart

URL路由开始变化(未跳转成功)的时候触发的事件。

$routeChangeSuccess

URL路由变化成功的时候触发的事件。

$routeChangeError

URL路由变化失败的时候触发的事件。

$routeUpdate

当承诺被拒绝时广播。

$routeParams

$routeParams服务运行检索当前路由的参数集。

ngRoute使用代码:

    <div ng-app="Demo">

        <a href="#/index/page1">page1</a> - <a href="#/index/page2">page2</a>

        <div ng-view></div>

        <script type="text/ng-template" id="page1.tpl">

            this is page1.{{value}}

        </script>

        <script type="text/ng-template" id="page2.tpl">

            this is page2.{{value}}

        </script>

    </div>

    <script>

        angular.module(‘Demo‘, [‘ngRoute‘])

            .config(["$routeProvider",function($routeProvider){

                $routeProvider.otherwise("/index/page1");

                $routeProvider

                    .when("/index/page1",{

                    templateUrl:"page1.tpl",

                    controller:"demoCtrl1"

                })

                    .when("/index/page2",{

                    templateUrl:"page2.tpl",

                    controller:"demoCtrl2"

                });

            }])

            .controller("demoCtrl1",["$scope",function($scope){

                $scope.value = "hello world";

            }])

            .controller("demoCtrl2",["$scope",function($scope){

                $scope.value = "Hello World";

            }])

</script>

这里直接使用了ng-template把两个模板写在一个页面,在实际使用中,可以把两个模板分开分别放到两个不同的html文件中,并且放到一个规定的文件中,这样可方便于管理。

野兽的Angular Api 学习、翻译及理解 - - ngRoute Angular自带的路由

标签:

原文地址:http://www.cnblogs.com/ys-ys/p/5017610.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!