AngularJS入门教程之路由与多视图详解

AngularJS入门教程之路由与多视图详解

控制器


<ul >
  <li ng-repeat=”phone in phones | filter:query |
orderBy:orderProp” >
    <a >

 

phoenDetail组件

phoenDetail组件用于拍卖手提式有线电话机详细的情况视图。服从和phoneList同样的平整,大家利用三个独立文件夹,创建二个phoneDetail模块,并将该模块作为依据加到主模块phoneact中。

app/phone-detail/phone-detail.module.js 详细的情况模块:

angular.module('phoneDetail', [
  'ngRoute'
]);

app/phone-detail/phone-detail.component.js 详细情况组件:

angular.
  module('phoneDetail').
  component('phoneDetail', {
    template: 'TBD: Detail view for {{$ctrl.phoneId}}',
    controller: ['$routeParams',
      function PhoneDetailController($routeParams) {
        this.phoneId = $routeParams.phoneId;
      }
    ]
  });

app/app.module.js 主模块:

angular.module('phonecatApp', [
  ...
  'phoneDetail',
  ...
]);

细心到大家的布局模板中没再增多PhoneListCtrl或PhoneDetailCtrl调整器属性!

<!doctype html>
  <html lang=”en” ng-app=”phonecat”>
    …

 

测试

咱俩的局地模块正视与ngRoute,所以我们要求在Karma配置文件加多angular-route。

karma.conf.js:

files: [
  'bower_components/angular/angular.js',
  'bower_components/angular-route/angular-route.js',
  ...
],

利用端到端测量试验导航到种种UGL450L,验证程序是还是不是能准确渲染视图:

e2e-tests/scenarios.js

...

it('should redirect `index.html` to `index.html#!/phones', function() {
  browser.get('index.html');
  expect(browser.getLocationAbsUrl()).toBe('/phones');
});

...
//导航到/phones
describe('View: Phone list', function() {

  beforeEach(function() {
    browser.get('index.html#!/phones');
  });

  ...

});

...
//导航到/phones/nexus-s
describe('View: Phone details', function() {

  beforeEach(function() {
    browser.get('index.html#!/phones/nexus-s');
  });

  it('should display placeholder page with `phoneId`', function() {
    expect(element(by.binding('$ctrl.phoneId')).getText()).toBe('nexus-s');
  });

});

...

在命令行中输入<code>npm run
protractor</code>就能够运维测量检验了。

下一篇:AngularJS Phonecat
(步骤10-步骤12)

注意,我们把index.html模板里面大多数代码移除,大家只放置了贰个<div>容器,那个<div>具有ng-view属性。大家删除掉的代码以后被放置在phone-list.html模板中:

同不常候大家为手提式有线电话机详细新闻视图增多贰个占位模板。

 

9 路由与多视图


这一步,我们会学习怎么着成立布局模板,如何使用Angular路由模块(ngRoute)达成多视图。
当你在浏览器中输入/index.html。会重定向到/index.html#!/phones并体现手提式有线电话机列表。当点击掌提式有线电话机链接时,会转到手提式有线电话机详细情况页面。

当ULacrosseL
映射段为/phone/:phoneId时,手机详细音信视图被出示出来。这里:phoneId是U奔驰G级L的变量部分。为了协会手提式有线电话机详细视图,AngularJS会选取phone-detail.html模板和PhoneDetailCtrl调整器。
作者们选用此前成立过的PhoneListCtrl调整器,同一时候大家为手提式有线电话机详细视图增添贰个新的PhoneDetailCtrl调控器,把它存放在app/js/controllers.js文件里。

世家只顾到我们地点的五个模板中从未加多PhoneListCtrl或PhoneDetailCtrl调控器属性!

 

多视图、路由与布局模板

咱们的顺序日趋增大,也变得更复杂。在上一节,大家唯有二个的视图(用来呈现手提式有线电话机列表),全部的沙盘代码都停放在phone-list.template.html中。这一节,大家会增多三个视图来展现手提式有线电话机详细情形。

为了加多实际情况页,我们会将index.html变换来布局模板(layout
template),在有着页面中通用。其余部分模板(partial
templates)会经过当前路由引进到布局模板中(当前路由决定引入哪个局地模板)。

Angular通过$routeProvider注解路由,它是$route服务的提供者。该服务会将调节器、视图模板、当前url连接起来。它还是能兑现深层链接:浏览器历史(后退/前进)、收藏标签。

ngRoute让调节器和一定url的模版关联起来。具体方法是:将零件关联到路由上,组件作为提供者担任提供视图模板和调控器。

总结

加油!

 

安插模板

模板的.config() 方法能够获取配置所需的提供者。
为了获得ngRoute中的的提供者、服务和指令,我们需求为phonecatApp扩大ngRoute模块。

app/app.module.js:

angular.module('phonecatApp', [
  'ngRoute',  //增加ngRoute模块
  ...
]);

除去主题服务和下令,我们还亟需布署$route服务(使用它的提供者)。

app/app.config.js:

angular.
  module('phonecatApp').
  config(['$locationProvider', '$routeProvider', 
    function config($locationProvider, $routeProvider) {
      $locationProvider.hashPrefix('!');
    //配置$route服务
      $routeProvider.
        when('/phones', {
          template: '<phone-list></phone-list>'
        }).
        when('/phones/:phoneId', {
          template: '<phone-detail></phone-detail>'
        }).
        otherwise('/phones');
    }
  ]);

通过.config()
方法,大家恳请提供者(如$routeProvider)注入到安插函数中,并运用提供者的秘诀钦命服务作为。在此间,大家利用$routeProvider.when()和$routeProvider.otherwise()
制订程序路由的抉择法则。

大家还动用$locationProvider.hashPrefix()将哈希前缀设置为!,该前缀会加到我们客户端路由链接中,位于文件路线与字符(#)之间(例如
index.html#!/some/path)。即便设置前缀不是必须的,但那是种好的做法(具体原因高出本学科范围,不做商讨)。!是最常用的前缀。

大家的定义了如下路由:

  • when(‘/phones’):当url以/phones结尾时,呈现手提式有线话机列表。为了组织那一个视图,Angular会成立二个phoneList组件的实例来管理视图。注意,大家在index.html中也利用了一样的标记(/phones)。
  • when(‘/phones/:phoneId’):
    当url以/phones/:phoneId结尾时,显示手提式有线电话机详细情况。:phoneId是三个U奇骏L变量片段。该视图由phoneDetail组件管理。
  • otherwise(‘/phones’):
    当前url未有找到相称的路由时,重定向到/phones页面。

我们再一次利用了phoneList组件,又增添了三个新的组件phoneDetail。以往phoneDetail组件只是显示选用的手提式有线电话机ID(不太吸引人,大家下一节会加强该器件)。

瞩目首个路由申明中的:phoneId参数。$route服务使用路由评释(/phones/:phoneId)作为三个模板来同盟当前的URL。全体:phoneId变量都会被提取到$routeParams对象中。

app/partials/phone-detail.html

angular.module(‘phonecat’, []).
  config([‘$routeProvider’, function($routeProvider) {
    $routeProvider.
      when(‘/phones’, {templateUrl: ‘partials/phone-list.html’,
controller: PhoneListCtrl}).
      when(‘/phones/:phoneId’, {templateUrl:
‘partials/phone-detail.html’, controller: PhoneDetailCtrl}).
      otherwise({redirectTo: ‘/phones’});
  }]);

<html lang=”en” ng-app=”phonecatApp”>

导言


这段日子在学AngularJS的实例教程PhoneCat Tutorial
App,开掘网络的汉语教程都比较深远,与保加利亚共和国(The Republic of Bulgaria)语版对应不上,况兼紧缺组件和文书重构两节。所以决定自个儿收拾叁个中文简明教程。

此篇为8-9节。

上一篇:AngularJS Phonecat
(步骤6-步骤7)

测试

咱俩把这么些模块定义为phonecat,并且经过应用config方法,大家把$routeProvider注入到我们的布署函数中,而且应用$routeProvider.when方法来定义我们的路由准则。

 

8 模板链接和图纸


在这一步,大家要为手提式有线电话机列表增添缩略图和链接。

上述就对AngularJS
路由和多视图的资料整理,后续继续补充有关文化,谢谢大家对本站的帮助!

大家选取在此之前创建过的PhoneListCtrl调节器,同期大家为手提式有线电话机详细视图增加叁个新的PhoneDetailCtrl调控器。

 

端到端测量检验

e2e-tests/scenarios.js:

...

it('should render phone specific links', function() {
  var query = element(by.model('$ctrl.query'));
  query.sendKeys('nexus');
//点击链接
  element.all(by.css('.phones li a')).first().click();
//检查链接的url是否正确
  expect(browser.getLocationAbsUrl()).toBe('/phones/nexus-s');
});

...

该测验评释程序是或不是能准确生成图片链接。在命令行输入<code>npm run
protractor</code>运营测量试验。

app/index.html

(1)当UEnclaveL
映射段为/phones时,手提式有线电话机列表视图会被呈现出来。为了组织这几个视图,AngularJS会选拔phone-list.html模板和PhoneListCtrl调控器。
(2)当URL
映射段为/phone/:phoneId时,手提式有线电电话机详细新闻视图被显示出来。这里:phoneId是U福特ExplorerL的变量部分。为了协会手提式有线电话机详细视图,AngularJS会动用phone-detail.html模板和PhoneDetailCtrl调节器。

当U智跑L
映射段为/phone/:phoneId时,手提式有线电话机详细新闻视图被显示出来。这里:phoneId是U宝马X5L的变量部分。为了组织手提式有线电话机详细视图,AngularJS会接纳phone-detail.html模板和PhoneDetailCtrl调节器。大家选取从前创制过的PhoneListCtrl调控器,相同的时候大家为手提式有线电话机详细视图加多多个新的PhoneDetailCtrl调节器,把它存放在app/js/controllers.js文件里。

依赖

路由功用由<code>ngRoute</code>模块提供,那是八个独立于Angular焦点框架的模块。

小编们利用Bower来安装客户端信赖。更新bower.json配置文件来含有新的借助关系:

bower.json:

{
  "name": "angular-phonecat",
  "description": "A starter project for AngularJS",
  "version": "0.0.0",
  "homepage": "https://github.com/angular/angular-phonecat",
  "license": "MIT",
  "private": true,
  "dependencies": {
    "angular": "1.5.x",
    "angular-mocks": "1.5.x",
    "angular-route": "1.5.x",
    "bootstrap": "3.3.x"
  }
}

指明”angular-route”:
“1.5.x”,会让bower安装1.5.x版本的angular-route模块。

假若您是在大局境况中设置bower,你能够使用<code>bower
install</code>实行安装。而那些项目大家早已预配使用npm来运转bower
install,所以只需求输入命令行:

npm install

<html lang="en" ng-app="phonecat">
<head>
...
 <script src="lib/angular/angular.js"></script>
 <script src="js/app.js"></script>
 <script src="js/controllers.js"></script>
</head>
<body>

 <div ng-view></div>

</body>
</html>

  </html>

        controller: ‘PhoneDetailCtrl’

有关正视注入(DI):注入器(Injector)和提供者(Providers)

诚如的话,八个对象只可以经过三种办法来获得它的正视性项目:

  • 在指标内部创造重视项目
  • 将借助作为一个全局变量来开始展览查找或援用
  • 将依据传递到须求它的地点
    先是种格局不可能隔开分离对象和注重项目,第三种办法规轻巧传染全局功用域。所以大家使用第两种格局,即借助注入。重视注入是一种设计情势,它移除了硬编码重视,因而使得大家能够在运营中时时随处移除并改造正视项目。那对于测验也很有实益,大家得以用测验意况中的一个模拟指标来替换生产条件中的三个实际对象。

借助于注入(DI)也是AngularJS的主旨,所以大家要询问其基本原理。

1)Angular为啥供给依据注入?
AngularJS的机件之间无法相互直接调用,二个组件必须透过注入器调用另三个零件。那样的补益是组件之间相互解耦,对象整个生命周期的军管都丢给了注入器。

2)Angular怎么着达成依靠注入?
先后运转时,Angular会创设一个注入器(injector),用于查找和注入程序所需的服务。注入器本身并不打听服务($http、$route)能做什么,乃至服务是不是存在(除非服务配置在适当的模块定义中),它只是寄存服务的容器。

注入器:

  • 加载注重:加载程序注重的模块定义
  • 注册注重:注册模块定义的提供者
  • 流入注重:当有实在的伸手时,注入器通过提供者(注:提供者作为参数注入函数)实例化具体的服务及相应的正视。

提供者(一般指组件):
提供者是提供(成立)服务实例的对象,它的布局API可用来决定服务的创导和平运动转的行事。例如$route服务,$routeProvider揭破的API允许你为顺序定义路由。

只顾:提供者只可以注入到config函数,因而你无法把$routeProvider注入PhoneListController

Angular模板化解了全局变量的主题素材。与英特尔大概require.js模块差别,Angular模板不需管理脚本加载顺序和延期收获等主题材料,那一个目的是单身的模块系统,他们能够并列存在和达成和睦的靶子。

要深刻掌握Angular的依赖注入,请参阅Understanding Dependency
Injection

TBD: detail view for {{phoneId}}

提起底,大家增添八个力所能致显示我们列表中每一部无绳电话机详细消息的页面。

/* Controllers */

数据

phones.json文件保留了手提式有线电话机id和手提式有线电电话机图片的url,url指向app/img/phones/文件夹。

app/phones/phones.json (在那之中一组数据):

[
  {
    ...
    "id": "motorola-defy-with-motoblur",
    "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg",
    "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
    ...
  },
  ...
]

$route.otherwise({redirectTo:
‘/phones’})语句使妥帖浏览器地址不可能相配我们别的一个路由法规时,触发重定向到/phones。


 
 注意到在其次条路由证明中:phoneId参数的行使。$route服务应用路由注明/phones/:phoneId作为贰个相配当前UXC60L的沙盘。全数以:符号注解的变量(此处变量为phones)都会被提取,然后存放在$routeParams对象中。

模板

app/phone-list/phone-list.template.html:

...
<ul class="phones">
  <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp" class="thumbnail">
    <a href="#/phones/{{phone.id}}" class="thumb">
      <img ng-src="{{phone.imageUrl}}" alt="{{phone.name}}" />
    </a>
    <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
    <p>{{phone.snippet}}</p>
  </li>
</ul>
...
  • {{phone.id}}绑定到<code>a</code>标签的<code>href</code>属性,{{phone.name}}绑定到<code>a</code>标签。
  • 引动手提式无线电话机图片,需求安装<code>img</code>标签。假如平素行使<code>src</code>绑定{{phone.imageUrl}},Angular未起初化前就能够开始展览绑定,也就能够发出无效的url供给。为此,大家利用<code>ngSrc</code>命令,它会在Angular初阶化后再张开绑定。

为了给大家的使用配置路由,大家供给给选取创造贰个模块。大家管这些模块叫做phonecat,而且经过选用configAPI,咱们诉求把$routeProvider注入到大家的布局函数並且应用$routeProvider.whenAPI来定义大家的路由法规。

html改成这么:

子模块正视的注意事项

phoneDetail模块重视于ngRoute模块:ngRoute提供$ routeParams对象,并将$
routeParams对象注入到phoneDetail组件的调控器。由于ngRoute也是phonecatApp主模块的重视性,所以服务和指令在先后中各处可用(包罗phoneDetail组件)。

那意味着,尽管大家从没将ngRoute放入phoneDetail组件的依赖列表中,大家的程序依旧可以健康运维。尽管省略子模块正视(那些依赖已经导入主模块)听上去相当好的,但它打破程序的模块化,所以并不可取。

想像一下,我们后天要在新类型中利用phoneDetail功用,但新品类并从未注脚ngRoute重视。那样,注入器就无法提供$routeParams,新程序也就不能运营了。

为此,大家要一向明显两个子模块的依赖。不要借助从父模块承继的依赖(因为父模块某天恐怕就不设有了)。

在四个模块注脚一样的重视不会爆发额外的“开支”,因为种种正视照旧会加载一次。有关模块及其正视的详细消息请参阅module。

app/index.html

为了扩大详细音信视图,大家得以开始展览index.html来还要包罗八个视图的沙盘代码,可是如此会火速给大家带来巨大的难为。相反,我们要把index.html模板调换成“布局模板”。那是我们选取具备视图的通用模板。别的的“局地布局模板”,根据当下的“路由”被填入,进而形成一个安然无事视图展现给用户。

 

模板

$route服务普通与ngView指令联合使用。ngView指令会将近期路由的视图模板加到布局模板中,那让index.html模板看起来更简明。

app/index.html:

<head>
  ...
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="app.module.js"></script>
  <script src="app.config.js"></script>
  ...
  <script src="phone-detail/phone-detail.module.js"></script>
  <script src="phone-detail/phone-detail.component.js"></script>
</head>
<body>

  <div ng-view></div>

</body>

大家在index.html中追加了4个新的<code><script></code>标签,用于加载额外的JS脚本。

  • angular-route.js: 定义ngRoute模块,用于提供路由
  • app.config.js: 配置主模块所需的提供者。
  • phone-detail.module.js: 定义两个涵盖手提式有线电话机详细情形组件的新模块。
  • phone-detail.component.js: 定义二个部手提式有线话机详细的情况的零部件。
    留心,大家移除了<code><phone-list></phone-list></code>,扩充了含ng-view属性的<code>div</code>成分。

图片 1

tutorial_09.png

关于注重注入(DI),注入器(Injector)和服务提供者(Providers)

 

 

AngularJS中运用的路由通过$routeProvider来声称,它是$route服务的提供者。那项劳动使得调节器、视图模板与当下浏览器的U奥迪Q5L可以自由集成。应用这么些特点大家就足以兑现深链接,它同意我们利用浏览器的野史(回降恐怕发展导航)和书签。

为了利用AngularJS的服务,你只须要在调整器的构造函数里面传播所需服务的名字。

<ANY

...
function PhoneDetailCtrl($scope, $routeParams) {
 $scope.phoneId = $routeParams.phoneId;
}

//PhoneDetailCtrl.$inject = ['$scope', '$routeParams'];

新的PhoneDetailCtrl控制器:

 

app/partials/phone-list.html

    <div ng-view>

phonecatControllers.controller(‘PhoneDetailCtrl’, [‘$scope’,
‘$routeParams’,

您以后能够刷新你的浏览器,然后再一次跑二遍端到端测量试验,大概你能够在AngularJS的服务器上运维一下。

我们的路由法则定义如下:

      otherwise({

专注到今后当您转到app/index.html时,你会被重定向到app/index.html#/phones并且同样的无绳电话机列表在浏览器中展现了出来。当你点击二个手提式有线电话机链接时,一个部手提式有线电话机详细音讯列表也被呈现了出去。

为了让我们新成立的模块运营起来,大家供给在ngApp指令的值上指明模块的名字:

大家的路由准绳定义如下

在意到在注入器配置阶段,提供者也足以同期被注入,不过如若注入器被创设况且开端创制服务实例的时候,他们就不再会被外面所获取到。

(3)otherwise({redirectTo:
‘/phones’})语句使妥当浏览器地址不可能协作大家任何二个路由法则时,触发重定向到/phones。

 

我们的应用正稳步发展兴起况且变得逐步复杂。在步骤7以前,应用只给大家的用户提供了二个粗略的分界面(一张有起先提式有线电话机的列表),而且有所的模板代码位于index.html文件中。下一步是充实贰个可见展现我们列表中每一部无绳电话机详细音讯的页面。

PhoneListCtrl.$inject = [‘$scope’, ‘$http’];
另一种方法也得以用来内定依赖列表何况幸免压缩难题——使用Javascript数组形式组织调整器:把要注入的服务放到贰个字符串数组(代表注重的名字)里,数组最后四个因素是调节器的章程函数:

app/index.html

App 模块

地方的应用只给我们的用户提供了多个简便的分界面(一张具有手提式有线电话机的列表),並且具备的模版代码位于index.html文件中。

能够开掘其落到实处代码特别简单,独有三个div标签,
然后八个ng-view指令.同时要留心的是引进了angular.js、angular-route.js、app.js和controllers.js,这里将安份守己顺序贴出其js代码.并加以表明.

设置路由并实现手机列表视图之后,我们曾经足以进去步骤8来落到实处手机详细消息视图了。

  $scope.orderProp = ‘age’;
}

<head>

提供者是提供(成立)服务实例何况对外提供API接口的目的,它能够被用来调整二个劳务的创导和平运动作时作为。对于$route服务以来,$routeProvider对外提供了API接口,通过API接口允许你为您的应用定义路由准绳。

如此那般就落实了贰个基于angular的多视图的应用程序。

<ng-view

angular.module('phonecat', []).
 config(['$routeProvider', function($routeProvider) {
 $routeProvider.
   when('/phones', {templateUrl: 'partials/phone-list.html',  controller: PhoneListCtrl}).
   when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}).
   otherwise({redirectTo: '/phones'});
}]);

为了击败压缩引起的标题,只要在调节器函数里面给$inject属性赋值八个依赖服务标记符的数组,就好像:

 

git checkout -f step-7

 

  <link rel=”stylesheet”
href=”../bower_components/bootstrap/dist/css/bootstrap.css”>

试着在index.html上加码一个{{orderProp}}绑定,当您在哥哥大列表视图上时如何也没变。那是因为orderProp模型仅仅在PhoneListCtrl管理的效能域下才是可知的,那与<div
ng-view>元素相关。若是你在phone-list.html模板中参预同样的绑定,那么那么些绑定会按你着想的那样被渲染出来。

AngularJS中的路由是通过$routeProvider来声称的,它是$route服务的提供者。那项劳动使得调整器、视图模板与当下浏览器的URAV4L能够轻松集成。它同意大家选用浏览器的历史(回落也许提升导航)和书签。

 

AngularJS模块化解了从利用中删去全局状态和提供格局来布置注入器那多个难点。和英特尔或然require.js那四个模块(非AngularJS的三个库)不相同的是,AngularJS模块并从未计较去消除脚本加载顺序以及懒惰式脚本加载那样的标题。这个指标和AngularJS要减轻的难题而不是关系,所以那么些模块完全能够存活来落到实处各自的靶子。

那边,大家先讲明,怎样从服务器获取数据:

复制代码

在意到在第二条路由声明中:phoneId参数的选择。$route服务使用路由评释/phones/:phoneId作为多个协作当前U索罗德L的模板。所有以:符号注脚的变量(此处变量为phones)都会被提取,然后寄放在$routeParams对象中。

提供者提供服务实例何况对外提供API接口的靶子,它能够被用来支配一个劳动的创建和周转。对于$route劳务以来,$routeProvider对外提供了API接口,通过API接口允许你为您的应用程序定义路由法则。

as element: (This directive can be used as custom element, but be aware
of IE restrictions).

模板

$http向Web服务器发起叁个HTTP
GET央浼,获取phone/phones.json。AngularJS会自动物检疫测那一个回答是怎么格式的,并且帮大家解析出来!

        templateUrl: ‘partials/phone-detail.html’,

<div class="container-fluid">
 <div class="row-fluid">
  <div class="span2">
   <!--Sidebar content-->

   Search: <input ng-model="query">
   Sort by:
   <select ng-model="orderProp">
    <option value="name">Alphabetical</option>
    <option value="age">Newest</option>
   </select>

  </div>
  <div class="span10">
   <!--Body content-->

   <ul class="phones">
    <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" class="thumbnail">
     <a href="#/phones/{{phone.id}}" class="thumb"><img ng-src="{{phone.imageUrl}}"></a>
     <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
     <p>{{phone.snippet}}</p>
    </li>
   </ul>

  </div>
 </div>
</div>

上一课的例子,大家只需求改写那些调节器构造函数就行了。

      $scope.phones = data;

咱俩的路由法规定义如下

      <img ng-src=”{{phone.imageUrl}}”>

 

正如在此在此以前方你学到的,注重注入是AngularJS的宗旨天性,所以你不可能不要理解一点这个人是怎么职业的。

[
  {
    …
    ”id”: “motorola-defy-with-motoblur”,
    ”imageUrl”: “img/phones/motorola-defy-with-motoblur.0.jpg”,
    ”name”: “Motorola DEFY\u2122 with MOTOBLUR\u2122”,
    …
  },
  …
]

        controller: ‘PhoneListCtrl’

多视图,路由和布局模板

TBD: detail view for {{phoneId}}

</ng-view>

app/js/controllers.js

$route服务普通和ngView指令一齐使用。ngView指令的剧中人物是为当下路由把相应的视图模板载入到布局模板中。

</body>

$route服务普通和ngView指令一齐行使。ngView指令的剧中人物是为当下路由把相应的视图模板载入到布局模板中。

    </div>

能够很领悟的注目到当访谈
.

与此同时咱们为手提式有线电话机详细音信视图增添一个占位模板。

<div >    <div >      <div >          Search: <input ng-model="query">        Sort by:        <select ng-model="orderProp">          <option value="name">Alphabetical</option>          <option value="age">Newest</option>        </select>        </div>      <div >          <ul >          <li ng-repeat="phone in phones | filter:query | orderBy:orderProp" >                <a   ><img ng-src="{{phone.imageUrl}}"></a>            <a  >{{phone.name}}</a>            <p>{{phone.snippet}}</p>          </li>        </ul>        </div>    </div>  </div>

as CSS class:

为了让大家的采纳教导大家新创立的模块,我们同一时间要求在ngApp指令的值上指明模块的名字:

为了给大家的采取配置路由,大家须要给使用创立三个模块。

      when(‘/phones’, {

app/js/app.js

为每条记下增加图片,只需求利用ngSrc指令替代<img>的src属性标签就足以了。因为只要我们用三个正常src属性来开始展览绑定(<img
src=”{{phone.imageUrl}}”>),浏览器会把AngularJS的{{ 表明式
}}标志直接举办字面解释,那时会倡导二个向违法url:

npm start

...
 it('should redirect index.html to index.html#/phones', function() {
  browser().navigateTo('../../app/index.html');
  expect(browser().location().url()).toBe('/phones');
 });
...

 describe('Phone detail view', function() {

  beforeEach(function() {
   browser().navigateTo('../../app/index.html#/phones/nexus-s');
  });


  it('should display placeholder page with phoneId', function() {
   expect(binding('phoneId')).toBe('nexus-s');
  });
 });

当调节器构造的时候,AngularJS的依赖性注入器会将那一个服务注入到您的调控器中。

app/controllers.js

当UWranglerL
映射段为/phones时,手机列表视图会被展现出来。为了协会那么些视图,AngularJS会动用phone-list.html模板和PhoneListCtrl调控器。

上一课的例证中,我们的模子数据是硬编码的,相当于说,我们的数码不是从服务器乞求回来的。

  [autoscroll=””]>

为了扩展详细音信视图,大家能够开始展览index.html来还要含有多少个视图的沙盘代码,不过如此会急速给我们带来巨大的麻烦。相反,我们要把index.html模板转换成“布局模板”。那是大家利用具备视图的通用模板。其余的“局地布局模板”随后根据当下的“路由”被堵塞入,进而造成一个全体视图呈现给用户。

  </body>
</html>

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图