在这一步中,您将学到如何创建一个布局模板,并且学习怎样使用一个叫做ngRoute的Angular模块来构建一个具有多重视图的应用. ·当您现在访问/index.html,您将被重定向到/index.html#!/phones,电话列表会显示在浏览器中: ·当您点击一部电话的超链接,URL会改变至该指定电话,浏览器将展示一个简短的电话细节页面. 最大的不同列举如下,您可以点击这里在GitHub上查看全部的不同. 依赖 这一步中添加的路由功能是由Angular中的ngRoute模块提供的,该模块由核…

Routing(路由) & Multiple Views(多个视图) step 7 1.切换分支到step7,并启动项目 git checkout step-7 npm start 2.需求: 在步骤7之前,应用只给我们的用户提供了一个简单的界面(一张所有手机的列表),并且所有的模板代码位于index.html文件中.下一步是增加一个能够显示我们列表中每一部手机详细信息的页面.可以先看一下step6和7的代码区别 . 为了增加详细信息视图,我们可以拓展index.html来同时包含两个视图的模板…

(注:曾经在<不敢止步>一书中看到学到一个观点,作者认为学习一门技术最好的方法就是翻译某部领域书籍.这里我决定做一次尝试,接下来花1个月左右时间,将Angular Tutorial Phonecat范例全部翻译一遍,这当然更多是希望自己能得到一个提高.翻译力求尽善尽美,当然质量实在难以保证.所有专有名词尽量不译,所有章节与https://docs.angularjs.org/tutorial/对应,如果可以,希望您能对照两边学习,给我提些意见.那么,开始吧!) 本节翻译自:https://do…

1.切换分支到step7,并启动项目 git checkout step- npm start 2.需求: 在步骤7之前,应用只给我们的用户提供了一个简单的界面(一张所有手机的列表),并且所有的模板代码位于index.html文件中.下一步是增加一个能够显示我们列表中每一部手机详细信息的页面.可以先看一下step6和7的代码区别 . 为了增加详细信息视图,我们可以拓展index.html来同时包含两个视图的模板代码,但是这样会很快给我们带来巨大的麻烦.相反,我们要把index.html模板转变成…

在先前的步骤中,我们看到了一个控制器和一个模板如何一起工作来将一个静态的HTML文件转化为动态页面(view).一般说来,这在单页应用中一种非常常见的模式(在Angular应用中尤其是这样): ·客户端代码“掌管”并和视图层实现了动态交互,通过在数据模型和状态中即刻更新视图来反应改变,这经常是用户交互的结果(我们不久将在第5步中看到一个例子),这种做法取代了在服务端创建一个静态HTML页面的做法. 模板(视图层包含绑定和展示逻辑的部分)作为一个蓝图,以此来决定我们数据怎么组织和展示给用户.而控制…

我们受够了在应用中用硬编码的方法嵌入三部电话!现在让我们用Angular内建的叫做$http的服务来从我们的服务器获取更大的数据集吧.我们将会使用Angular的依赖注入来为PhoneListCtrl控制器提供服务. ·现在我们有一个20部电话的列表,它们都是从服务器加载而来. 最重要的变化列举如下,当然您也可以点击这里在GitHub上查看所有的不同. 数据 你项目中的app/phones/phones.json文件是一个使用了JSON格式的一个更大的电话数据集合. 下面是一个文件的样本: […

在这一节的tutorial中,您将会逐渐熟悉AngularJS phonecat app的最重要的源代码文件.您也将学到如何将开发服务器与angular-seed绑定到一起,并且在浏览器中运行应用. 在您继续之前,请确保您已经搭建好您的开发环境并且安装了所有必要的依赖,像这里描述的那样. 在angular-phonecat目录下,运行这条指令: git checkout -f step-0 这将使您工作空间的tutorial应用重置到step 0. 您必须在将来的每一步中重复这条指令并将步骤指向…

https://angular.io/tutorial/toh-pt5 定义一个模块用来定义路由 src/app/app-routing.module.ts import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { DashboardComponent } from './dashboard/dashboard.component'; imp…

Showing how to set up a Pipe that takes multiple updating inputs for multiple Component sources. import {Component, View, NgFor, FORM_DIRECTIVES} from 'angular2/angular2'; import {TodoService} from './todoService'; import {TodoItemRender} from './tod…

在这一步中,我们将会通过在我们先前创建的模板代码中添加CSS和JavaScript动画效果来扩展我们的web应用. ·我们现在使用ngAnimate模块来允许动画效果贯穿整个应用. ·我们也依赖于自带的指令来自动触发动画来进行开发. ·当一个动画效果被发现时,在给定的时间内,它将会和置于元素中的实际DOM操作一同运行(比如:在ngRepeat中插入/删除节点或在ngClass中添加/删除类). 最大的不同列举如下,您可以点击这里在GitHub上查看全部的不同. CSS过渡动画:使ngRepeat…