Route学习simple one

最新推荐文章于 2025-09-04 06:45:59 发布

原创最新推荐文章于 2025-09-04 06:45:59 发布 · 442 阅读

0 ·

CC 4.0 BY-SA版权

AngularJs 专栏收录该内容

2 篇文章

订阅专栏

ng的路由机制是靠ngRoute提供的，通过hash和history两种方式实现了路由，可以检测浏览器是否支持history来灵活调用相应的方式。ng的路由(ngRoute)是一个单独的模块，包含以下内容：

服务$routeProvider用来定义一个路由表，即地址栏与视图模板的映射.

服务$routeParams保存了地址栏中的参数，例如{id : 1, name : 'tom'}.

服务$route完成路由匹配，并且提供路由相关的属性访问及事件，如访问当前路由对应的controller.

指令ngView用来在主视图中指定加载子视图的区域

以上内容再加上$location服务，我们就可以实现一个单页面应用了。

第一步：引入文件和依赖

　　 ngRoute模块包含在一个单独的文件中，所以第一步需要在页面上引入这个文件，如下：

我们还需在模块声明中注入对ngRoute的依赖，如下：

var app = angular.module('MyApp', ['ngRoute']);　　

第二步：定义路由表

　　$routeProvider提供了定义路由表的服务，它有两个核心方法，when(path,route)和otherwise(params)，先看一下核心中的核心when(path,route)方法。

　　when(path,route)方法接收两个参数，path是一个string类型，表示该条路由规则所匹配的路径，它将与地址栏的内容($location.path)值进行匹配。如果需要匹配参数，可以在path中使用冒号加名称的方式，如：path为/show/:name，如果地址栏是/show/tom，那么参数name和所对应的值tom便会被保存在$routeParams中，像这样：{name : tom}。我们也可以用*进行模糊匹配，如：/show*/:name将匹配/showInfo/tom。

　　route参数是一个object，用来指定当path匹配后所需的一系列配置项，包括以下内容：

controller //function或string类型。在当前模板上执行的controller函数，生成新的scope；

controllerAs //string类型，为controller指定别名；

template //string或function类型，视图z所用的模板，这部分内容将被ngView引用；

templateUrl //string或function类型，当视图模板为单独的html文件或是使用了<script type="text/ng-template">定义模板时使用；

resolve //指定当前controller所依赖的其他模块；

redirectTo //重定向的地址。

最简单情况，我们定义一个html文件为模板，并初始化一个指定的controller：

function emailRouteConfig($routeProvider){

$routeProvider.

when('/show', {

controller: ShowController,

templateUrl: 'show.html'

}).

when('/put/:name',{

controller: PutController,

templateUrl: 'put.html'

});

};　　

otherwise(params)方法对应路径匹配不到时的情况，这时候我们可以配置一个redirectTo参数，让它重定向到404页面或者是首页。

第三步：在主视图模板中指定加载子视图的位置

　　我们的单页面程序都是局部刷新的，那这个“局部”是哪里呢，这就轮到ngView出马了，只需在模板中简单的使用此指令，在哪里用，哪里就是“局部”。例如：

代码简单如下：

var app = angular.module("personApp", ['ngRoute']);
app.config(['$routeProvider',function ($routeProvider) {
        $routeProvider
        .when('/:tid', {
            templateUrl: 'person-route.html',
            controllerAS: 'personInfoCon'
        })
        .otherwise({
            templateUrl: 'person-route.html',
            controllerAs: 'personInfoCon'
        });
}]);

app.controller("personInfoCon", function($scope, $routeParams, PersonService, AboutTopicService, CommentService){
    $scope.tid = "127";
    $scope.page = "1";
    $scope.pagesArray = [];

    if($routeParams.tid) {
        $scope.tid = $routeParams.tid;
    }

    ......

<div class="aboutperson-block" ng-repeat="person in persons">
    <a href="#/{{person.teacherId}}">
        <img class="aboutperson-block-img"ng-src="{{person.url}}">
        <label class="aboutperson-block-name">{{person.name}}</label>
        <label class="aboutperson-block-topic">{{person.topic}}</label>
        <label class="aboutperson-block-simpleinfo">{{person.simpleInfo}} CEO</label>
        <label class="aboutperson-block-likeno"><img src="http://image.1yingli.cn/img/kelly.png"><span>{{person.likenumber}}人想见</span></label>
    </a>
</div>
或者：
demoApp.config(['$routeProvider',function($routeProvider) {  
$routeProvider.when('/list', {  
	templateUrl: 'route/list.html',  
  	controller: 'routeListController'
}).when('/list/:id', {  
 	 templateUrl: 'route/detail.html',
   	controller: 'routeDetailController'
  }).otherwise({  
        redirectTo: '/list'  
     });  
}]);

controller注意事项： 
	controller 和controllerAs的区别，页面加载获取数据会加载两次。
         ng-controller的初始化位置，页面初始化开始加载ng-controller,所有要避免无用的http请求。

https://github.com/johnpapa/angular-styleguide/blob/master/i18n/zh-CN.md#
http://www.lovelucy.info/angularjs-best-practices.html
https://code.angularjs.org/1.4.7/docs/api