AngularJS 路由:ng-route 与 ui-router

前端之家收集整理的这篇文章主要介绍了AngularJS 路由:ng-route 与 ui-router前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

AngularJSng-route模块为控制器和视图提供了[Deep-Linking]URL。 通俗来讲,ng-route模块中的$routeService监测$location.url()的变化,并将它映射到预先定义的控制器。也就是在客户端进行URL的路由。 下面首先给出$route的使用示例,然后引入一个更加强大的客户端路由框架ui-router

Angular 路由

在APP中定义多个页面的控制器,并给出对应的模板。然后$routeProvider进行配置,即可将URL映射到这些控制器和视图。 首先定义一个基本的Angular APP,并引入ngRoute

Angular$routeService在ngRoute模块里。需要引入它对应的javascript文件,并在我们的APP里ngRoute添加为模块依赖(如何添加模块依赖?)。

var app = angular.module('ngRouteExample', ['ngRoute'])
    controller'MainController'function($scope) {
    })
    config($routeProvider$locationProvider{
      $routeProvider
          when'/users'{
              templateUrl: 'user-list.html''UserListCtrl'
          })
          '/users/:username''user.html''UserCtrl'
          });

        // configure html5
        html5Mode(true);
    });

上述代码中,$routeProvider定义了两个URL的映射:/users使用user-list.html作为模板,UserListCtrl作为控制器;/users/:username则会匹配类似/users/alice之类的URL,稍后你会看到如何获得:username匹配到的值。先看首页的模板:

HTML5Mode: 服务器端路由和客户端路由的URL以#分隔。例如/foo/bar#/users/alice,Angular通过操作锚点来进行路由。 然而html5Mode(true)将会去除#,URL变成/foo/bar/users/alice(这需要浏览器支持HTML5的,因为此时Angular通过pushState来进行路由)。 此时服务器对所有的客户端路由的URL都需要返回首页/foo/bar)视图,再交给Angular路由到/foo/bar/users/alice对应的视图。

<div ng-controller="MainController"> Choose: <a href="users">user list</a> | "users/alice">user: alice</a> ng-view></div> </div>

注意到模板文件中有一个div[ng-view],子页面将会载入到这里。

路由参数

接着我们定义上述路由配置的子页面控制器和视图模板。用户列表页面:

app'UserListCtrl'{});
<!--user-list.html--> <h1>User List Page</h1>

用户页面

'UserCtrl'$routeParams{ params ; });
<!--user.html--> <h1>User Page</h1> <span ng-bind="params.userName"></span>

我们点击首页/users/alice时,将会载入user.htmlspan的值为alice$routeParams提供了当前的路由参数,例如:

// Given: // URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby // Route: /Chapter/:chapterId/Section/:sectionId // // Then $routeParams ==> {chapterId:'1'sectionId'2'search'moby'}

除了$routeParams,Angular还提供了$location获取和设置URL。

UI-Router

UI-RouterAngular-UI提供的客户端路由框架,它解决了原生的ng-route的很多不足:

  1. 视图不能嵌套。这意味着$scope会发生不必要的重新载入。这也是我们在Onboard中引入ui-route的原因。
  2. 同一URL下不支持多个视图。这一需求也是常见的:我们希望导航栏用一个视图(和相应的控制器)、内容部分用另一个视图(和相应的控制器)。

UI-Router提出了$state的概念。一个$state是一个当前导航和UI的状态,每个$state需要绑定一个URL Pattern。 在控制器和模板中,通过改变$state来进行URL的跳转和路由。这是一个简单的例子:

<!-- in index.html --> <body "MainCtrl"> <section ui-view></section> </body>
// in app-states.js $stateProvider state'contacts'{ url'/contacts'template'contacts.html''ContactCtrl' 'contacts.detail': "/contacts/:contactId"'contacts.detail.html': function $stateParams{ // If we got here from a url of /contacts/42 contactId === "42"; } 当访问/contacts时,contacts$state被激活,载入对应的控制器和视图。在ui-router时,通常使用$state来完成页面跳转, 而不是直接操作URL。例如,在脚本使用$state.go

$statego); // 指定state名,相当于跳转到 /contacts contactId: 42}); // 相当于跳转到 /contacts/42

在模板中使用ui-sref(这是一个Directive):

ui-sref="contacts">Contacts</a> "contacts.detail({contactId: 42})">Contact 42</a>

嵌套视图

不同于Angular原生的ng-routeui-router的视图可以嵌套,视图嵌套通常对应着$state的嵌套。contacts.detailcontacts的子$statecontacts.detail.html也将作为contacts.html的子页面

<!-- contacts.html --> <h1>My Contacts></div>
<!-- contacts.detail.html --> 'contactId'></span>

上述ui-view用法ng-view看起来很相似,但不同的是ui-view可以配合$state进行任意层级的嵌套, 即contacts.detail.html中仍然可以包含一个ui-view,它的$state可能是contacts.detail.hobbies

命名视图

ui-router中,一个$state下可以有多个视图,它们有各自的模板和控制器。这一点也是ng-route所没有的, 给了前端路由极大的灵活性。来看例子:

<!-- index.html --> <body> ui-view="filters"></div> "tabledata""graph"</body>

这一个模板包含了三个命名的ui-view,可以给它们分别设置模板和控制器:

$stateProvider 'report'views: { 'filters''report-filters.html'){ ... controller stuff just for filters view ... } }, 'tabledata''report-table.html'tabledata 'graph''report-graph.html'graph } })

转载:http://harttle.land/2015/06/10/angular-route.html

原文链接:https://www.f2er.com/angularjs/144845.html

猜你在找的Angularjs相关文章