AngularJS入门教程之链接与图片模板详解

function PhoneDetailCtrl($scope, $routeParams, $http) {
 $http.get('phones/' + $routeParams.phoneId + '.json').success(function(data) {
  $scope.phone = data;
 });
}

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

这几天您应当能够看到列表里面手提式有线电话机的图样和链接了。

试着在index.html上加码多少个{{orderProp}}绑定,当你在手提式无线电电话机列表视图上时怎么着也没变。那是因为orderProp模型仅仅在PhoneListCtrl管理的成效域下才是可知的,那与<div
ng-view>成分相关。假诺您在phone-list.html模板中进入同样的绑定,那么这一个绑定会按您思量的那样被渲染出来。

运维./scripts/test.sh实行测量检验 。

步骤7和步骤8时期最主要的比不上在底下列出。你能够在GitHub里看到完整的差距。

 以上正是对AngularJS
链接与图片模版的质感整理,后续继续补充有关文化,多谢大家对本站的帮忙!

留神到现行反革命当您转到app/index.html时,你会被重定向到app/index.html#/phones何况一样的手提式无线电话机列表在浏览器中突显了出去。当你点击四个手提式有线电话机链接时,叁个部手提式无线电话机详细音讯列表也被显示了出来。

上述就是对AngularJS
模板的资料整理,后续继续补充相关资料,多谢大家对本站的支撑!

施行./scripts/test.sh脚本来推行测验,你应有会看到如下输出:

您未来能够刷新你的浏览器,並且用端到端测验器来察看测量试验的运行,也许你可以在AngularJS服务器上运维它们。

App 模块

用三个迭代器创造二个简约的表:

咱俩来写叁个新的单元测量检验,这几个测量试验和我们在步骤5中为PhoneListCtrl写的十分很像。

模板

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

练习

app/partials/phone-detail.html

留神到现行反革命phones.json文件包蕴了独一标志符和每一部无绳话机的图像链接。那么些url以往指向app/img/phones/目录。

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

git checkout -f step-2**
**

测试

将ng-src指令换来普通的src属性。用像Firebug,Chrome Web
Inspector那样的工具,大概直接去看服务器的拜候日志,你会发掘你的应用向/app/%7B%7Bphone.imageUrl%7D%7D(只怕/app/{{phone.imageUrl}})发送了多少个不法诉求。

为了给大家的行使配置路由,大家要求给选拔创设三个模块。大家管那些模块叫做phonecat,况兼经过应用configAPI,我们呼吁把$routeProvider注入到大家的安排函数何况应用$routeProvider.whenAPI来定义大家的路由法则。

在PhoneListCtrl调整器里面早先化了数据模型(这里只可是是一个暗含了数组的函数,数组中贮存的靶子是手提式有线电话机数码列表):

...
 describe('PhoneDetailCtrl', function(){
  var scope, $httpBackend, ctrl;

  beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) {
   $httpBackend = _$httpBackend_;
   $httpBackend.expectGET('phones/xyz.json').respond({name:'phone xyz'});

   $routeParams.phoneId = 'xyz';
   scope = $rootScope.$new();
   ctrl = $controller(PhoneDetailCtrl, {$scope: scope});
  }));


  it('should fetch phone detail', function() {
   expect(scope.phone).toBeUndefined();
   $httpBackend.flush();

   expect(scope.phone).toEqual({name:'phone xyz'});
  });
 });
...

大家同样为每条记下加多手提式有线电话机图片,只须要使用ngSrc指令取代<img>的src属性标签就足以了。如若大家独有用八个正规src属性来进展绑定(<img
class=”diagram” src=”{{phone.imageUrl}}”>),浏览器会把AngularJS的{{
表达式
}}标志直接开展字面解释,何况发起四个向违法url

模板

开采三个新的浏览器窗口,而且转到 ;

phone-detail.html文件中本来的TBD占位行已经被列表和重组手提式有线电话机详细消息的绑定替换掉了。注意到,这里大家应用AngularJS的{{表达式}}标识和ngRepeat来在视图中渲染数据模型。

你可能感兴趣的作品:

  • AngularJs Understanding Angular
    Templates
  • AngularJS ng-bind-template
    指令详解
  • AngularJS延迟加载html
    template
  • AngularJS实现基于变量变改换态加载模板的点子
  • AngularJS模板加载用法详解
  • AngularJS入门教程之越多模板详解
  • AngularJS入门教程之AngularJS
    模板
  • AngularJS入门教程之静态模板详解
  • AngularJS
    路由和模板实例及路由地址简化方法(必须要看)
  • AngularJS开头化静态模板详解
  • AngularJS入门教程(二):AngularJS模板
  • AngularJS入门教程(一):静态模板
  • AngularJS
    ng-template寄宿方式用法剖析

控制器

app/js/controller.js:

你未来得以刷新你的浏览器,然后再一次跑二回端到端测量试验,只怕您能够在AngularJS的服务器上运行一下。

app/phones/phones.json(样例片段)

请重新载入参数专门的工作目录:

PhoneListCtrl——调整器方法的名字(在JS文件controllers.js中)和<body>标签里面包车型大巴ngController指令的值相相配。
手提式有线电电话机的数目此时与注入到我们调节器函数的作用域($scope)相关联。当使用运转之后,会有叁个根功用域被创立出来,而调整器的功能域是根效用域的一个卓越后继。这几个调整器的功能域对全部<body
ng-controller=”PhoneListCtrl”>标识内部的数码绑定有效。

咱俩利用$http服务获取数据,以此来进展我们的PhoneListCtrl。那和事先的手提式有线电话机列表调节器的干活措施是一样的。

...
  it('should render phone specific links', function() {
   input('query').enter('nexus');
   element('.phones li a').click();
   expect(browser().location().url()).toBe('/phones/nexus-s');
  });
...

app/partials/phone-detail.html

你大概感兴趣的稿子:

  • AngularJs Understanding Angular
    Templates
  • AngularJS ng-bind-template
    指令详解
  • AngularJS延迟加载html
    template
  • AngularJS达成基于变量更动动态加载模板的点子
  • AngularJS模板加载用法详解
  • AngularJS入门教程之更加多模板详解
  • AngularJS入门教程之链接与图片模板详解
  • AngularJS入门教程之静态模板详解
  • AngularJS
    路由和模板实例及路由地址简化方法(必须要看)
  • AngularJS发轫化静态模板详解
  • AngularJS入门教程(二):AngularJS模板
  • AngularJS入门教程(一):静态模板
  • AngularJS
    ng-template寄宿格局用法解析

app/js/controllers.js

当今您早就增加了手机图片和链接,转到步骤7,大家将学习AngularJS的布局模板以及AngularJS是怎么着轻巧地为使用提供多重视图。

注意,大家把index.html模板里面超越二分一代码移除,咱们只放置了一个<div>容器,这么些<div>具备ng-view属性。咱们删除掉的代码今后被放置在phone-list.html模板中:

您应该看到类似于如下的结果:

app/phones/nexus-s.json(样例片段)

请重新载入参数专门的事业目录:

为了活动验证全数的东西都可以地融为一炉起来,我们必要写一些端到端测量检验,导航到不一致的UXC90L上然后证实正确地视图被渲染出来。

请重新恢复设置工作目录:

如上便是整治AngularJS越多模版的资料,后续继续补充相关资料,多谢大家对本站的支撑!

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

app/js/app.js

视图和模板

发表评论

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

网站地图xml地图