步骤3——把模板添加到组件
步骤3——把模板添加到组件
工作区切换到步骤3
git checkout -f step-3
app/index.html
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="app.css" />
<script src="bower_components/angular/angular.js"></script>
<script src="app.js"></script>
<script src="phone-list.component.js"></script>
</head>
<body>
<!-- Use a custom component to render a list of phones -->
<phone-list></phone-list>
</body>
</html>
我们继续分析一下上面的代码
1、引入组件文件
<script src="phone-list.component.js"></script>
2、在body里添加组件
<phone-list></phone-list>
让我们看一下phone-list.component.js里面到底是怎么编写的
'use strict';
// Register `phoneList` component, along with its associated controller and template
angular.
module('phonecatApp').
component('phoneList', {
template:
'<ul>' +
'<li ng-repeat="phone in $ctrl.phones">' +
'<span>{{phone.name}}</span>' +
'<p>{{phone.snippet}}</p>' +
'</li>' +
'</ul>',
controller: function PhoneListController() {
this.phones = [
{
name: 'Nexus S',
snippet: 'Fast just got faster with Nexus S.'
}, {
name: 'Motorola XOOM™ with Wi-Fi',
snippet: 'The Next, Next Generation tablet.'
}, {
name: 'MOTOROLA XOOM™',
snippet: 'The Next, Next Generation tablet.'
}
];
}
});
工作区切换到步骤4
index.html
<!doctype html>
<html lang="en" ng-app="phonecatApp">
<head>
<meta charset="utf-8">
<title>Google Phone Gallery</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="app.css" />
<script src="bower_components/angular/angular.js"></script>
<script src="app.module.js"></script>
<script src="phone-list/phone-list.module.js"></script>
<script src="phone-list/phone-list.component.js"></script>
</head>
<body>
<!-- Use a custom component to render a list of phones -->
<phone-list></phone-list>
</body>
</html>
app.module.js
'use strict';
// Define the `phonecatApp` module
angular.module('phonecatApp', [
// ...which depends on the `phoneList` module
'phoneList'
]);
工作区切换到步骤5——过滤转换器
我们在上一步我们做了大量的工作，为后面打下了良好基础。所以现在我们可以简单的扩展就添加一个全文搜索的功能（是的，这很简单！）。我们也会写一个端到端（end-to-end,E2E）测试,因为良好的端到端测试是应用的好朋友，就像有一双眼睛时刻看着应用，快速定位故障。
程序会有一个搜索框。你需要注意在搜索框输入时电话列表的变化。
模板
这里我们将引入phone-list.template.html模板
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Sidebar content-->
Search: <input ng-model="$ctrl.query" />
</div>
<div class="col-md-10">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>
我们添加了一个标准的HTML<input>标签，并对ngRepeat指令应用了Angular的filter功能来处理<code><input></code>输入。
就是这些改变让用户输入搜索条件后马上可以在手机列表中看到对应的变化。这些新代码展示了：
数据绑定：这一Angular核心特性。当页面加载后，Angular把input标签定义的输入框的值绑定到一个命名变量中（页面中命名为query的变量），这个变量还以相同的名字存在于数据模型中，二者是完全同步的。在这个代码中输入框键入的内容（绑定到query）会立即作为列表输出时的过滤条件 (通过phone in phones | filter:query 这一句)。数据模型的变化导致转换器的输入改变,转换器通过更新DOM来反映模型的当前状态。
tutorial_03.png
使用filter过滤器：filter功能使用query来创建一个新的数组（只有那些记录中匹配了query对应值），ngRepeat自动根据附加了filter变动的手机列表数据。这在开发过程中是完全透明的。
网友评论