菜单

多个视图【澳门太阳集团】

2020年3月14日 - 首页

在这里一步,你将学习怎么样成立二个搭架子模板并且通过路由成效来创设二个富有八个视图的运用。

1.切换分支到step7,并运营项目

git checkout -f step-7

git checkout  step-7

精心到今后当你转到app/index.html时,你会被重定向到app/index.html#/phones而且相符的无绳电话机列表在浏览器中展现了出来。当你点击三个部手提式有线电电话机链接时,一个有线电话详细消息列表也被出示了出去。

npm start

手续6和步骤7之内最重要的比不上在下边列出。你能够在GitHub里见到完好的歧异。

2.需求:

多视图,路由和布局模板

在步骤7在此以前,应用只给我们的顾客提供了二个简短的分界面(一张保有手提式有线电电话机的列表),况且有着的沙盘模拟经营代码坐落于index.html文件中。下一步是充实三个可以看到体现大家列表中每一部无绳电话机详细信息的页面。能够先看一下step6和7的代码分化.

大家的运用正逐年演变兴起并且变得逐步复杂。在步骤7在此之前,应用只给大家的顾客提供了三个归纳的分界面,而且具有的沙盘模拟经营代码坐落于index.html文件中。下一步是充实二个能够呈现大家列表中每一部无绳电话机详细消息的页面。

 

为了充实详细音信视图,大家能够展开index.html来还要含有三个视图的模板代码,不过这么会快捷给大家带给庞大的难为。相反,大家要把index.html模板转换成“布局模板”。那是大家使用具备视图的通用模板。别的的“局地构造模板”随后依据当下的“路由”被塞入入,进而造成贰个全体视图彰显给顾客。

为了充实详细音信视图,大家得以开展index.html来还要含有多个视图的模板代码,不过这么会急忙给大家带给庞大的难为。相反,我们要把index.html模板转换成“结构模板”。这是大家采纳具备视图的通用模板。其余的“局地构造模板”随后依据当下的“路由”被塞入入,进而形成叁个完完全全视图呈现给顾客。

AngularJS中动用的路由通过$routeProvider来声称,它是$route服务的提供者。那项劳动使得调节器、视图模板与方今浏览器的U瑞鹰L能够专擅集成。应用那一个特性我们就能够完结深链接,它同意大家选择浏览器的野史和书签。

 

至于信任注入和劳动提供者

AngularJS中采取的路由通过$routeProvider来声称,它是$route服务的提供者。那项劳动使得调节器、视图模板与这段日子浏览器的UOdysseyL能够大肆集成。应用这一个特点大家就可以实现深链接,它同意大家接受浏览器的野史(回降或然提升导航卡塔尔国和书签。

正如从眼下你学到的,依赖注入是AngularJS的主题个性,所以你必定要明了一点这个人是怎么专门的学业的。

 

当使用指导时,AngularJS会创制三个注入器,大家选拔后边全数重视注入的劳动都会供给它。这些注入器自个儿并不知道$http和$route是怎么的,实际上独有它在模块定义的时候被陈设过,否则它根本都不亮堂那么些服务的留存。注入器独一的天职是载入钦定的劳务模块,在这里些模块中注册全体定义的劳动提供者,况且当需求时给一个点名的函数注入信任。那一个信赖通过它们的提供者“懒惰式”实例化。

 

提供者是提供劳务实例並且对外提供API接口的对象,它能够被用来决定八个服务的始建和平运动转时作为。对于$route服务来讲,$routeProvider对外提供了API接口,通过API接口允许你为你的利用定义路由法则。

 

AngularJS模块消释了从使用中去除全局状态和提供格局来布局注入器那八个难点。和英特尔或许require.js那七个模块分化的是,AngularJS模块并不曾计划去消除脚本加载顺序以至懒惰式脚本加载那样的难点。这个指标和AngularJS要消除的主题素材毫不关系,所以那么些模块完全可以共存来促成各自的靶子。

 

App 模块

 

app/js/app.js

 

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

 

为了给我们的运用配置路由,大家需求给选用创设叁个模块。大家管那一个模块叫做phonecat,并且经过选拔configAPI,大家恳请把$routeProvider注入到大家的安排函数而且利用$routeProvider.whenAPI来定义大家的路由法则。

 

瞩目到在注入器配置阶段,提供者也足以而且被注入,不过借使注入器被创设并且初始创造服务实例的时候,他们就不再会被外边所取获得。

能够很显眼的瞩目到当采访
.

笔者们的路由法则定义如下

 

当UHighlanderL
映射段为/phones时,手提式无线话机列表视图会被呈现出来。为了组织这么些视图,AngularJS会采纳phone-list.html模板和PhoneListCtrl调整器。

4.落到实处代码

当UKoleosL
映射段为/phone/:phoneId时,手提式有线电话机详细新闻视图被出示出来。这里:phoneId是UMercedes-迈巴赫L的变量部分。为了组织手提式有线电电话机详细视图,AngularJS会选取phone-detail.html模板和PhoneDetailCtrl调整器。大家选用在此以前创建过的PhoneListCtrl调控器,同不时候大家为手提式有线电话机详细视图增加一个新的PhoneDetailCtrl调整器,把它寄放在app/js/controllers.js文件里。

app/index.html

$route.otherwise({redirectTo:
‘/phones’}State of Qatar语句使稳当浏览器地址不能够合作大家任何三个路由法规时,触发重定向到/phones。

 

留意到在第二条路由注脚中:phoneId参数的运用。$route服务应用路由评释/phones/:phoneId作为一个十分当前URubiconL的沙盘模拟经营。全数以:符号表明的变量都会被提取,然后存放在$routeParams对象中。

复制代码

为了让我们的行使辅导我们新创造的模块,我们还要要求在ngApp指令的值上指明模块的名字:

<!doctype html>

app/index.html

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

...

<head>

澳门太阳集团,控制器

  <meta charset=”utf-8″>

app/js/controllers.js

  <title>Google Phone Gallery</title>

...function PhoneDetailCtrl { $scope.phoneId = $routeParams.phoneId;}//PhoneDetailCtrl.$inject = ['$scope', '$routeParams'];

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

模板

  <link rel=”stylesheet” href=”css/app.css”>

$route服务普通和ngView指令一同行使。ngView指令的角色是为近期路由把相应的视图模板载入到结构模板中。

  <script
src=”../bower_components/angular/angular.js”></script>

app/index.html

  <script
src=”../bower_components/angular-route/angular-route.js”></script>

...    

  <script src=”js/app.js”></script>

注意,我们把index.html模板里面超越75%代码移除,我们只放置了三个

  <script src=”js/controllers.js”></script>

容器,这个

</head>

不无ng-view属性。大家删除掉的代码今后被放置在phone-list.html模板中:

<body>

app/partials/phone-list.html

 

    Search:  Sort by:  Alphabetical Newest        {{phone.name}} {{phone.snippet}}    

  <div ng-view></div>

並且我们为手提式有线电话机详细信息视图增多三个占位模板。

 

app/partials/phone-detail.html

</body>

TBD: detail view for {{phoneId}}

</html>

小心到大家的结构模板中没再增加PhoneListCtrl或PhoneDetailCtrl调控器属性!

复制代码

测试

能够开掘其实现代码极其轻便,唯有四个div标签,
然后三个ng-view指令.同时要当心的是引进了angular.js、angular-route.js、app.js和controllers.js,这里将安份守己顺序贴出其js代码.并加以表明.

为了活动验证不论什么事物都地利人和地如鱼似水起来,大家必要写一些端到端测量试验,导航到区别的UCRUISERL上然后证实正确地视图被渲染出来。

 

... it('should redirect index.html to index.html#/phones', function.navigateTo('../../app/index.html'); expect.url; });... describe('Phone detail view', function() { beforeEach { browser().navigateTo('../../app/index.html#/phones/nexus-s'); }); it('should display placeholder page with phoneId', function() { expect.toBe;

app/app.js

您现在能够刷新你的浏览器,然后再度跑一回端到端测量试验,或然您可以在AngularJS的服务器上运转一下。

 

练习

复制代码

试着在index.html上扩展叁个{{orderProp}}绑定,当您在四弟大列表视图上时怎样也没变。那是因为orderProp模型仅仅在PhoneListCtrl管理的作用域下才是可以预知的,那与

‘use strict’;

要素相关。假设你在phone-list.html模板中步入相似的绑定,那么那几个绑定会按您思考的那样被渲染出来。

 

总结

/* App Module */

设置路由并促成手提式有线电话机列表视图之后,大家已经足以进入步骤8来促成手提式无线话机详细新闻视图了。

 

如上就对AngularJS
路由和多视图的质感收拾,后续继续补充相关知识,多谢大家对本站的支撑!

var phonecatApp = angular.module(‘phonecatApp’, [

  ‘ngRoute’,

  ‘phonecatControllers’

]);

 

phonecatApp.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’

      });

  }]);

复制代码

app/controllers.js

 

复制代码

‘use strict’;

 

/* Controllers */

 

var phonecatControllers = angular.module(‘phonecatControllers’, []);

 

phonecatControllers.controller(‘PhoneListCtrl’, [‘$scope’, ‘$http’,

  function($scope, $http) {

    $http.get(‘phones/phones.json’).success(function(data) {

      $scope.phones = data;

    });

 

    $scope.orderProp = ‘age’;

  }]);

 

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

  function($scope, $routeParams) {

    $scope.phoneId = $routeParams.phoneId;

  }]);

复制代码

 

 

 app/partials/phone-detail.html:

 

TBD: detail view for {{phoneId}}

 

 

代码表明:

 

1State of Qatar.index.html中<html lang=”en”
ng-app=”phonecatApp”>定义了要接纳的ng-app是”phoneApp”,然后定义了:<div
ng-view></div>,这里可以ngView:查看一下ng-view的api表达,ngView
,ngView是一个指令,首要用于通过已经渲染的模板将近期的$route服务与主页面(index.html卡塔尔(قطر‎联结起来.

 

ngView is a directive that complements the $route service by including
the rendered template of the current route into the main layou
(index.html) file. Every time the current route changes, the included
view changes with it according to the configuration of the$route
service.

 

用法:

 

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

<ng-view

  [onload=””]

  [autoscroll=””]>

</ng-view>

as attribute:

<ANY

  [onload=””]

  [autoscroll=””]>

</ANY>

as CSS class:

<ANYclass=”[onload: ;] [autoscroll: ;]”> … </ANY>

在本例中用到的是as CSS class,这里ngview是要和$route成队接纳的.

 

 

 

2).关于app.js

 

为了给大家的施用配置路由,大家必要给选用创立三个模块。大家管那几个模块叫做phonecat,并且通过动用configAPI,大家呼吁把$routeProvider注入到我们的布署函数并且使用$routeProvider.when
API来定义我们的路由法规。

 

瞩目到在注入器配置阶段,提供者也足以並且被注入,可是只要注入器被成立并且开端创建服务实例的时候,他们就不再会被外部所获得到。

 

咱俩的路由法则定义如下

 

当U安德拉L
映射段为/phones时,手提式有线电话机列表视图会被出示出来。为了组织那几个视图,AngularJS会采纳phone-list.html模板和PhoneListCtrl调控器。

当UMuranoL
映射段为/phone/:phoneId时,手提式有线电话机详细音讯视图被出示出来。这里:phoneId是U奥迪Q5L的变量部分。为了组织手提式无线电话机详细视图,AngularJS会动用phone-detail.html模板和PhoneDetailCtrl调节器。大家接纳从前成立过的PhoneListCtrl调控器,同期大家为手提式有线电话机详细视图增添三个新的PhoneDetailCtrl调控器,把它存放在app/js/controllers.js文件里。

$route.otherwise({redirectTo:
‘/phones’}卡塔尔国语句使伏贴浏览器地址不能够相称大家任何三个路由准则时,触发重定向到/phones。

 
 注意到在其次条路由注明中:phoneId参数的利用。$route服务使用路由注脚/phones/:phoneId作为四个精益求精当前UEscortL的沙盘模拟经营。全数以:符号证明的变量(此处变量为phones)都会被提取,然后寄存在$routeParams对象中。

 

3).app/js/controllers.js

 

 

 

此地用的是$http get方法将phones/phones.json的值读抽取来;

概念phonecatControllers,并配置phonecatControllers,将$routeParams作为变量,将值再赋给$scope.phoneId
,然后展现的routeParams.phoneId;

 

4) phone-detail.html

 

phone-detail.html上校调控器里phoneId的值突显出来.

 

 

5.测试

施行如下命令开端测量试验:

 

[email protected]:~/develop/angular-phonecat$
npm run protractor

angular-phonecat/test/e2e/scenarios.js

 

 View Code

 

 

测量试验结果:

 

Using ChromeDriver directly…

…..

 

Finished in 7.368 seconds

5 tests, 8 assertions, 0 failures

 

git checkout step-7
npm start 2.急需:
在步骤7早前,应用只给大家的顾客提供了三个归纳的分界面(一张保有手提式有线话机的列表…

相关文章

发表评论

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

网站地图xml地图