菜单

路由与多视图

2020年3月14日 - 首页

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

步骤8——模板链接与图形

在这一步,会为手机列表添加缩略图以及对应的购买信息链接。后续步骤中,你将通过链接显示目录中手机的更多附加(详细)信息。

现在就为手机列表添加缩略图

工作区切换到步骤8

数据

注意到在phones.json中包含了每个手机独一无二的id和图片链接地址。这些链接地址都指向app/img/phones/目录。
app/phones/phones.json(一段手机数据的快照)

[
  {
    ...
    "id": "motorola-defy-with-motoblur",
    "imageUrl": "img/phones/motorola-defy-with-motoblur.0.jpg",
    "name": "Motorola DEFYu2122 with MOTOBLURu2122",
    ...
  },
  ...
]

模板

澳门太阳集团,phone-list.template.html

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2">
      <!--Sidebar content-->

      <p>
        Search:
        <input ng-model="$ctrl.query" />
      </p>

      <p>
        Sort by:
        <select ng-model="$ctrl.orderProp">
          <option value="name">Alphabetical</option>
          <option value="age">Newest</option>
        </select>
      </p>

    </div>
    <div class="col-md-10">
      <!--Body content-->

      <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">
            ![]({{phone.imageUrl}})
          </a>
          <a href="#/phones/{{phone.id}}">{{phone.name}}</a>
          <p>{{phone.snippet}}</p>
        </li>
      </ul>

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

为了动态处理链接(这在后面将导向手机的详细介绍页面),我们给href属性的赋值中用到了由双大括号括起来的数据绑定。在步骤2中,我们把{{phone.name}}绑定到一个html元素的内容中,这一步{{phone.id}}将用来绑定到元素属性中。

我们还为每款手机添加了图片,这里用到了ngSrc命令,它会阻止浏览器在Angular还没有初始化并能够正常展开绑定时发出诸如下面一样的无效URL请求:
<code>http://localhost:8000/app/{{phone.imageUrl}}</code>,而是仅仅描述当前元素需要一个src属性,这个属性<code>(

澳门太阳集团 1

</code>,会在Angular初始化好后进行绑定),使用ngSrc指令能始终阻止浏览器发出明显是无效的http请求。

git checkout -f step-6

步骤9——路由与多视图

工作区切换到步骤9

依赖

这一步添加的路由功能是由Angular的ngRoute模块提供,这是一个独立于Angular核心框架的模块。

我们使用Bower来安装客户端依赖。这一步骤中我们会更新bower.json配置文件来包含新的依赖关系

{
  "name": "angular-route",
  "version": "1.5.11",
  "license": "MIT",
  "main": "./angular-route.js",
  "ignore": [],
  "dependencies": {
    "angular": "1.5.11"
  }
}

新的依赖关系”angular-route”:
“~1.2.x”告诉bower安装版本1.2.x的angular-route组件。我们必须明确告诉bower下载安装这个依赖。

多视图、路由与布局模板

我们的程序逐渐强大,也变得更加复杂。本步骤之前,我们只有唯一的视图来(用来显示手机列表),并且所有的模板代码都放置在index.html中。新的步骤中会添加一个视图来显示列表中每个设备详细的信息(详细说明视图)。

为了添加详细说明视图,我们扩展index.html模板文件来包含两个视图,但这将很快引起混乱,为了替代,我们尝试把index.html转换到我们称为布局模板(layout
template)其中有模板(布局模板)在所有视图中通用,其他则是局部模板(partial
templates),局部模板只包括当前路由route——视图当前显示需要的部分。

在Angular中,程序的路由通过$routeProvider声明,它是$route服务的提供者。这个服务能容易的把控制器、视图模板和浏览器当前的地址栏信息连接起来。使用这个特性,我们可以实现深层链接(deep
linking),它可以让你可以利用浏览器历史(后退和前进)以及收藏标签。

好了。我蒙圈了。。。

详情请看

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

步骤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 DEFYu2122 with MOTOBLURu2122", ... },...]

模板

app/index.html

... 

这些链接将来会指向每一部电话的详细信息页。不过现在为了产生这些链接,我们在href属性里面使用我们早已熟悉的双括号数据绑定。在步骤2,我们添加了{{phone.name}}绑定作为元素内容。在这一步,我们在元素属性中使用{{phone.id}}绑定。

我们同样为每条记录添加手机图片,只需要使用ngSrc指令代替的src属性标签就可以了。如果我们仅仅用一个正常src属性来进行绑定(澳门太阳集团 3),浏览器会把AngularJS的{{
表达式
}}标记直接进行字面解释,并且发起一个向非法url

测试

test/e2e/scenarios.js

... it('should render phone specific links', function.enter; element.click.location.toBe; });...

我们添加了一个新的端到端测试来验证应用为手机视图产生了正确的链接,上面就是我们的实现。

你现在可以刷新你的浏览器,并且用端到端测试器来观察测试的运行,或者你可以在AngularJS服务器上运行它们。

练习

将ng-src指令换成普通的src属性。用像Firebug,Chrome Web
Inspector这样的工具,或者直接去看服务器的访问日志,你会发现你的应用向/app/%7B%7Bphone.imageUrl%7D%7D(或者/app/

这个问题是由于浏览器会在遇到img标签的时候立刻向还未得到编译的URL地址发送一个请求,AngularJS只有在页面载入完毕后才开始编译表达式从而得到正确的图片URL地址。

总结

如今你已经添加了手机图片和链接,转到步骤7,我们将学习AngularJS的布局模板以及AngularJS是如何轻易地为应用提供多重视图。

以上就是对AngularJS
链接与图片模版的资料整理,后续继续补充相关知识,谢谢大家对本站的支持!

相关文章

发表评论

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

网站地图xml地图