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

站长资源 2024/11/28 佚名

75 1538 75

DDR爱好者之家 Design By 杰米

这一步，你会为手机列表的手机添加缩略图以及一些链接，不过这些链接还不会起作用。接下来你会使用这些链接来分类显示手机的额外信息。

请重置工作目录：

git checkout -f step-6

现在你应该能够看到列表里面手机的图片和链接了。

步骤5和步骤6之间最重要的不同在下面列出。你可以在GitHub里看到完整的差别。

数据

注意到现在phones.json文件包含了唯一标识符和每一部手机的图像链接。这些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",
 ...
 },
...
]

模板

app/index.html

...
    <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="/UploadFiles/2021-04-02/{{phone.imageUrl}}">

这些链接将来会指向每一部电话的详细信息页。不过现在为了产生这些链接，我们在href属性里面使用我们早已熟悉的双括号数据绑定。在步骤2，我们添加了{{phone.name}}绑定作为元素内容。在这一步，我们在元素属性中使用{{phone.id}}绑定。
我们同样为每条记录添加手机图片，只需要使用ngSrc指令代替<img>的src属性标签就可以了。如果我们仅仅用一个正常src属性来进行绑定（<img class="diagram" src="/UploadFiles/2021-04-02/{{phone.imageUrl}}">
测试
test/e2e/scenarios.js




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


我们添加了一个新的端到端测试来验证应用为手机视图产生了正确的链接，上面就是我们的实现。
你现在可以刷新你的浏览器，并且用端到端测试器来观察测试的运行，或者你可以在AngularJS服务器上运行它们。
练习
将ng-src指令换成普通的src属性。用像Firebug，Chrome Web Inspector这样的工具，或者直接去看服务器的访问日志，你会发现你的应用向/app/%7B%7Bphone.imageUrl%7D%7D（或者/app/{{phone.imageUrl}}）发送了一个非法请求。
这个问题是由于浏览器会在遇到img标签的时候立刻向还未得到编译的URL地址发送一个请求，AngularJS只有在页面载入完毕后才开始编译表达式从而得到正确的图片URL地址。
总结
如今你已经添加了手机图片和链接，转到步骤7，我们将学习AngularJS的布局模板以及AngularJS是如何轻易地为应用提供多重视图。
 以上就是对AngularJS 链接与图片模版的资料整理，后续继续补充相关知识，谢谢大家对本站的支持！

AngularJS,链接与图片模板,AngularJS,链接,链接与图片模版

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“AngularJS入门教程之链接与图片模板详解”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

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

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

AngularJS之依赖注入模拟实现

评论“AngularJS入门教程之链接与图片模板详解”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接