AngularJS入门教程之更多模板详解

在这一步,你将实现手机详细信息视图,这个视图会在用户点击手机列表中的一部手机时被显示出来。

请重置工作目录:

git checkout -f step-8

现在当你点击列表中的一部手机之后,这部手机的详细信息页面就会被显示出来。

为了实现手机详细信息视图我们将会使用$http来获取数据,同时我们也要增添一个phone-detail.html视图模板。

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

数据

除了phones.json,app/phones/目录也包含了每一部手机信息的json文件。

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

{
 "additionalFeatures": "Contour Display, Near Field Communications (NFC),...",
 "android": {
   "os": "Android 2.3",
   "ui": "Android"
 },
 ...
 "images": [
   "img/phones/nexus-s.0.jpg",
   "img/phones/nexus-s.1.jpg",
   "img/phones/nexus-s.2.jpg",
   "img/phones/nexus-s.3.jpg"
 ],
 "storage": {
   "flash": "16384MB",
   "ram": "512MB"
 }
}

这些文件中的每一个都用相同的数据结构描述了一部手机的不同属性。我们会在手机详细信息视图中显示这些数据。

控制器

我们使用$http服务获取数据,以此来拓展我们的PhoneListCtrl。这和之前的手机列表控制器的工作方式是一样的。

app/js/controllers.js

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

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

为了构造HTTP请求的URL,我们需要$route服务提供的当前路由中抽取$routeParams.phoneId。

模板

phone-detail.html文件中原有的TBD占位行已经被列表和构成手机详细信息的绑定替换掉了。注意到,这里我们使用AngularJS的{{表达式}}标记和ngRepeat来在视图中渲染数据模型。

app/partials/phone-detail.html

<img ng-src="{{phone.images[0]}}" class="phone">

<h1>{{phone.name}}</h1>

<p>{{phone.description}}</p>

<ul class="phone-thumbs">
 <li ng-repeat="img in phone.images">
  <img ng-src="{{img}}">
 </li>
</ul>

<ul class="specs">
 <li>
  <span>Availability and Networks</span>
  <dl>
   <dt>Availability</dt>
   <dd ng-repeat="availability in phone.availability">{{availability}}</dd>
  </dl>
 </li>
  ...
 </li>
  <span>Additional Features</span>
  <dd>{{phone.additionalFeatures}}</dd>
 </li>
</ul>

测试

我们来写一个新的单元测试,这个测试和我们在步骤5中为PhoneListCtrl写的那个很像。

test/unit/controllersSpec.js

...
 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'});
  });
 });
...

执行./scripts/test.sh脚本来执行测试,你应该会看到如下输出:

Chrome: Runner reset.
...
Total 3 tests (Passed: 3; Fails: 0; Errors: 0) (5.00 ms)
 Chrome 19.0.1084.36 Mac OS: Run 3 tests (Passed: 3; Fails: 0; Errors 0) (5.00 ms)

同时,我们也添加一个端到端测试,指向Nexus S手机详细信息页面并且验证页面的头部是“Nexus S”。

test/e2e/scenarios.js

...
 describe('Phone detail view', function() {

  beforeEach(function() {
   browser().navigateTo('../../app/index.html#/phones/nexus-s');
  });

  it('should display nexus-s page', function() {
   expect(binding('phone.name')).toBe('Nexus S');
  });
 });
...

你现在可以刷新你的浏览器,然后重新跑一遍端到端测试,或者你可以在AngularJS的服务器上运行一下。

练习

使用AngularJS端到端测试API写一个测试,用它来验证我们在Nexus S详细信息页面显示的四个缩略图。

总结

现在手机详细页面已经就绪了,在步骤9中我们将学习如何写一个显示过滤器。

以上就是整理AngularJS更多模版的资料,后续继续补充相关资料,谢谢大家对本站的支持!

时间: 2016-08-16

AngularJs Understanding Angular Templates

angular template是一个声明规范,与model.controller的信息一起,渲染成用户在浏览器中所看到的视图.它是静态的DOM,包括HTML.CSS.angular特别的元素和angular指定的元素属性.angular元素和属性指示angular去扩展行为以及将template DOM转换为动态视图的DOM. 下面是我们可以在template中使用的angular元素已经元素属性的类型: Directive(http://www.jb51.net/article/91739.

AngularJS入门教程(二):AngularJS模板

是时候给这些网页来点动态特性了--用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点.考虑到这一点,我们用AngularJS来为我们的应用添加一些模型.视图和控制器. 请重置工作目录: 复制代码 代码如下: git checkout -f step-2 我们的应用现在有了一个包含三部手机的列表. 步骤1和步骤2之间最重要的不同在下面列出.你可以到GitHub去

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

这一步,你会为手机列表的手机添加缩略图以及一些链接,不过这些链接还不会起作用.接下来你会使用这些链接来分类显示手机的额外信息. 请重置工作目录: git checkout -f step-6 现在你应该能够看到列表里面手机的图片和链接了. 步骤5和步骤6之间最重要的不同在下面列出.你可以在GitHub里看到完整的差别. 数据 注意到现在phones.json文件包含了唯一标识符和每一部手机的图像链接.这些url现在指向app/img/phones/目录. app/phones/phones.js

AngularJS ng-template寄宿方式用法分析

本文实例讲述了AngularJS ng-template寄宿方式用法.分享给大家供大家参考,具体如下: 如果你是一个angular的开发者的话,对于ng-html2js你应该 很熟悉.对于angular的指令,我们经常需要定义模板( directive template/templateUrl),你可以选择讲html page 放在真正的的web容器中寄宿,也可以选择angular的ng-template 放在view的page之上,抑或也可以讲html打成一个js文件和directive 的j

AngularJS延迟加载html template

当使用AngularJs中的routes/views模式建立大型网站或者应用的时候,把所有的自定义文件,如controllers和template等在初始化时全部加载进来,不是一个好的办法.最好的方式是,初始化时仅仅加载所需要的文件.这些文件可能会依赖一个连接或者多个文件,然而它们仅仅被特定的route所使用.当我们切换route时,未被加载的文件将会按需加载.这不但能提高初始化页面的速度,而且可以防止带宽浪费. 网上大部分文章都在讲通过$routeProvider以及第三方服务对control

AngularJS 路由和模板实例及路由地址简化方法(必看)

最近一同事在学习AngularJS,在路由与模板的学习过程中遇到了一些问题,于是今天给她写了个例子,顺便分享出来给那些正在学习AngularJS的小伙伴们. 话说这AngularJs 开发项目非常的爽,其中爽就爽在它的开发模式,使得代码更加的清晰.更加具有可读性.更简洁.更具有维护性.但是在使用AngularJS开发的过程中也有让我头疼的地方,那就是目前前端框架更多的还是以Jquery为主,很多插件都是依赖于Jquery的,AngulaJS的插件少之又少(除了AngularUI其他的Angula

AngularJS实现根据变量改变动态加载模板的方法

本文实例讲述了AngularJS实现根据变量改变动态加载模板的方法.分享给大家供大家参考,具体如下: directive: return { restrict: 'E', replace: true, templateUrl: 'app/view/order.html', link: function (scope, element, attrs) { scope.Type = attrs.Type; } }; 模板: <div ng-switch on="item.Type"&

AngularJS入门教程(一):静态模板

为了说明angularJS如何增强了标准HTML,我们先将创建一个静态HTML页面模板,然后把这个静态HTML页面模板转换成能动态显示的AngularJS模板. 在本步骤中,我们往HTML页面中添加两个手机的基本信息,用以下命令将工作目录重置到步骤1. 复制代码 代码如下: git checkout -f step-1 请编辑app/index.html文件,将下面的代码添加到index.html文件中,然后运行该应用查看效果. app/index.html 复制代码 代码如下: <ul>  

AngularJS模板加载用法详解

本文实例讲述了AngularJS模板加载用法.分享给大家供大家参考,具体如下: angular模板加载 ----ng-template AngularJS作为mvc(或者说mvvm)框架,同样具备模板这一基本概念. NG加载模板的顺序为 内存加载---AJAX加载. 内存加载 如果之前使用过Bootstrap 插件的ng版,即angular-ui,就会了解到这种方式的具体应用.模板本质上是字符串,把字符串直接写入内存,加载时直接从内存获取,速度会更快,有两种方式显式启用内存加载. 通过使用 $t

AngularJS初始化静态模板详解

AngularJS可以通过ng-app来自动初始化模块,也可以通过angular.bootstrap(document, [module])手动启动应用,不管用哪种方法,应用启动后,动态往dom树里面添加的dom元素,无法执行angular指令,即无法通过ng-model.ng-click给动态添加的dom元素绑定数据和事件,怎么办? 动态添加dom元素的场景非常常见,如点击某页面上修改用户资料的按钮,发送ajax请求去查询用户资料,然后通过模板引擎将事先写在页面里的静态模板编译成HTML字符串

AngularJS入门教程之AngularJS 模板

是时候给这些网页来点动态特性了--用AngularJS!我们这里为后面要加入的控制器添加了一个测试. 一个应用的代码架构有很多种.对于AngularJS应用,我们鼓励使用模型-视图-控制器(MVC)模式解耦代码和分离关注点.考虑到这一点,我们用AngularJS来为我们的应用添加一些模型.视图和控制器. 请重置工作目录: git checkout -f step-2 我们的应用现在有了一个包含三部手机的列表. 步骤1和步骤2之间最重要的不同在下面列出.,你可以到GitHub去看完整的差别. 视图

AngularJS入门教程之静态模板详解

为了说明angularJS如何增强了标准HTML,我们先将创建一个静态HTML页面模板,然后把这个静态HTML页面模板转换成能动态显示的AngularJS模板. 在本步骤中,我们往HTML页面中添加两个手机的基本信息,用以下命令将工作目录重置到步骤1. git checkout -f step-1 请编辑app/index.html文件,将下面的代码添加到index.html文件中,然后运行该应用查看效果. app/index.html <ul> <li> <span>

AngularJS ng-bind-template 指令详解

AngularJS ng-bind-template 指令 AngularJS 实例 <p> 元素上绑定两个表达式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

AngularJs表单验证实例详解

常用的表单验证指令 1. 必填项验证 某个表单输入是否已填写,只要在输入字段元素上添加HTML5标记required即可: 复制代码 代码如下: <input type="text" required /> 2. 最小长度 验证表单输入的文本长度是否大于某个最小值,在输入字段上使用指令ng-minleng= "{number}": 复制代码 代码如下: <input type="text" ng-minlength="

Angular17之Angular自定义指令详解

1 什么是HTML HTML文档就是一个纯文本文件,该文件包含了HTML元素.CSS样式以及JavaScript代码:HTML元素是由标签呈现,浏览器会为每个标签创建带有属性的DOM对象,浏览器通过渲染这些DOM节点来呈现内容,用户在浏览器中看到的内容就是浏览器渲染DOM对象后的结果. 2 指令的分类 组件.属性指令.结构性指令 3 指定义指令常用到的一些常量 3.1 Directive 用于装饰控制器类来指明该控制器类是一个自定义指令控制器类 3.2 ElementRef 作为DOM对象的引用

vue内置指令详解

指令 (Directives) 是带有 v- 前缀的特殊属性, 职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM. 内置指令 1.v-bind:响应并更新DOM特性:例如:v-bind:href  v-bind:class  v-bind:title  等等 主要用法是绑定属性,动态更新HTML元素上的属性: <a v-bind:href="url" rel="external nofollow" rel="external n

基于angular中的重要指令详解($eval,$parse和$compile)

在angular的服务中,有一些服务你不得不去了解,因为他可以说是ng的核心,而今天,我要介绍的就是ng的两个核心服务,$parse和$compile.其实这两个服务讲的人已经很多了,但是100个读者就有100个哈姆雷特,我在这里讲讲自己对于他们两个服务的理解. 大家可能会疑问,$eval呢,其实他并不是一个服务,他是scope里面的一个方法,并不能算服务,而且它也基于parse的,所以只能算是$parse的另一种写法而已,我们看一下ng源码中$eval的定义是怎样的就知道了 $eval: fu

vue快捷键与基础指令详解

v-bind可以简写成   : <img src="{{url}}">→<img :src="url" :width="50px"> v-on:click可以写成@click <button @click="up()"></button> v-if实例  可以通过对对象操作条件来实现想要展示的效果 <!DOCTYPE html> <html> <he

AngularJS的$location使用方法详解

AngularJS的$location使用方法详解 一.配置config app.config([ '$locationProvider', function($locationProvider) { $locationProvider.html5Mode({ //设置为html5Mode(模式),当为false时为Hashbang模式 enabled : true, //是否需要加入base标签,这里设置为false,设置为true时,需在html的head配置<base href="&

Angularjs中数据绑定的实例详解

Angularjs中数据绑定的实例详解 这是一个最简单的angularjs的例子,关于数据绑定的,大家可以执行一下,看看效果 <html ng-app> <head> <title>angularjs-include</title> <script type="text/javascript" src="js/angular/angular.min.js"></script> </head

AngularJS的Filter的示例详解

贴上几个有关Filter使用的几个示例. 1. 首先创建一个表格 <body ng-app="app"> <div class="divAll" ng-controller="tableFilter"> <input type="text" placeholder="输入你要搜索的内容" ng-model="key"> <br><br

AngularJS constant和value区别详解

angularJS可以通过constant(name,value)和value(name,value)对于创建服务也是很重要的. 相同点是:都可以接受两个参数,name和value. 区别: 1.constant(name,value)可以将一个已经存在的变量值注册为服务,并将其注入到应用的其他部分中.其中,name为注册的常量的名字,value为注册的常量的值或对象. 举例: (1)value为值时: angular.module('myApp') .constant('apiKey','12

Vue 2.0入门基础知识之内部指令详解

1.Vue.js介绍 当前前端三大主流框架:Angular.React.Vue.React前段时间由于许可证风波,使得Vue的热度蹭蹭地上升.另外,Vue友好的API文档更是一大特色.Vue.js是一个非常轻量级的工具,与其说是一个MVVM框架,不如说是一个js库.Vue.js具有响应式编程和组件化的特点.响应式编程,即保持状态和视图的同步,状态也可以说是数据吧:而其组件化的理念与React则一样,即"一切都是组件,组件化思想方便于模块化的开发,是前端领域的一大趋势. 2.内部指令 2-1.v-