首先感谢网络上翻译angular 入门教程的先辈。
不过那个教程已经有点过时了。和GITHUB上的代码都匹配不上， 后来的学习者造会有很大障碍，这里通过学习顺便翻译一下上买你的东西，光是重点，套话就不翻译了
PhoneCat Tutorial App 翻译（一）环境搭建
当你完成这个入门教程你应当可以
在所有的现代浏览器中创建一个动态应用
应用数据绑定从model写入view中
用Karma创建和运行UT
另外几项没翻译，今后不上，今天主要记录环境搭建的步骤和注意事项
2 安装nodejs
3 克隆示例代码
注意，因为后面的一些npm操作需要很深的目录，建议这个clone操作在某个分区的根目录进行我用的是D盘根目录
进入git bash
git clone --depth=14 https:///angular/angular-phonecat.git
克隆完毕之后，会在D 盘看到angular-phonecat文件夹
以下下操作都在git bash 中进行，不然会报错，因为windows 的文件路径长度支持优先，在安装npm 工具的时候会出现目录太深，文件名太长出错，PS 我开始在CMD 中运行NPM 导致了很多问题。
4 在GIT BASH 中进入angular-phonecat
cd&angular-phonecat
5 运行命令 npm install 安装相关的依赖
安装完成之后，会在node_modules&文件夹找到这些模块
&- client-side code package manager&- simple local static web server&- unit test runner&- end to end (E2E) test runner
install 这个命令会用bower 自动下载angularjs框架到app/bower_components
到这里，安装部分基本完成
6 验证安装
运行 npm start 然后再浏览器中访问
http://localhost:8000/app/index.html
可以看到界面就对了
7 运行 unittest
输入命令npm test,会弹出系统的默认浏览器，在git-bush中会出现如下界面，表示测试成功
8 运行端对端测试
运行命令 下载相关的依赖报
npm run update-webdriver
这个命令会到https://chromedriver./2.10/chromedriver_win32.zip 去下载这个zip，由于在这奇葩的国度，无法访问这个地址，所以这个命令会失败
挽救方法：
手动下载https://chromedriver./2.10/chromedriver_win32.zip 这个zip包，然后放到D:\angular-phonecat\node_modules\protractor\selenium目录中解压。
npm run protractor
会看到如下console和chrome弹出来，然后运行一堆测试。
本文已收录于以下专栏：
相关文章推荐
目前Angular的最新版本是Angular4.0，所以我们搭建的环境是4.0版本的。
Angular官方给我们提供了一个命令行工具就是Angular CLI，通过这个工具我们能很容易的创建Angu...
AngularJS学习（一）——基本的入门程序
AngularJS强化的JavaScript的功能，主要用在手机或者移动端开发的一套框架，需要注意的是AngularJS是一个框架。说到这里就要说一下，...
关于angularJS的安装与配置；
1.首先要安装node.js和它的npm包管理系统。（nodejs相关待整理）
2.安装grunt
　　.grunt是一个基于...
从今天开始，开始学习angularJS。
学习第一步是需要搭建一个学习和测试的环境，现在就开始环境的搭建。
无论是Mac、Linux或Windows环境中，您均可遵循本教程学习...
最近小小的研究了一下AngularJS2，今天介绍一下环境的搭建软件安装：Node.JS5.0以上；NPM3.0以上（安装Node.js的时候自动就安装了npm）;TypeScript（可以通过VS或...
angular.js 为我们封装好了一个路由工具 ngRoute ,靠url改变去驱动视图。
angularUI 也为我们封装了一个独立的路由模块 ui-router ,它是一种靠状态 state ...
在前面几节教程中，代码比较少，为了方便说明问题笔者將控制器代码都写在了HTML页面中，实际上这并不是什么好的编程习惯，而且可维护性差。通常的做法都是將处理业务逻辑的代码写在一个单独的JS文件中，然后在...
这一节稍微复杂 angularjs 是用MVC 模式，s
git checkout -f step-2
经过第一步的环境安装，现在你已经可以gou
工具与框架 · Scrapy, 爬虫
原文出处： MrZONT
0. 基本环境说明
本文截图及运行环境均在MAC OS X 10.9.5上实现，但基本步骤与win 7环境上相同（其实...
他的最新文章
讲师：董岩
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)70被浏览2742分享邀请回答283 条评论分享收藏感谢收起22 条评论分享收藏感谢收起查看更多回答Angular 1 和 Angular 2 集成：无缝升级的方法_Linux编程_Linux公社-Linux系统门户网站
你好，游客
Angular 1 和 Angular 2 集成：无缝升级的方法
来源：oschina.net&
作者：海涛, 叶秀兰, babybright123
已经有了 Angular 1 应用程序，正在想着怎么把它升级到 Angular 2？看看我们是怎么样支持递增升级的。
我们计划在同一应用程序上允许 Angular 1 和 Angular 2 混合使用
你可以在同一个视图中混用 Angular 1 和 Angular 2 组件
Angular 1 和 Angular 2可以跨框架注入服务
数据绑定可以跨框架运行
为什么要升级？
Angular 2 相对于 Angular 1 有很多优势，其中包括：性能有了极大提高，更强大的模板化，延迟加载，更简单的 API。 调试更加简单，测试前所未有地容易，等等。以下是几个突出亮点：
更好的性能
我们通过关注大量的场景来让你的应用变得轻快，初次渲染和再次渲染会快 3x 到 5x。
通过单形态的 JS 调用进行更快的变化检测
模板预编译和重用
更低的内存使用 / VM 压力
线性可伸缩，可观察或者不可变数据结构
依赖注入支持增量加载
更多强大的模板
不再需要大量的指令
静态分析 && 未来工具和 IDEs 在开发的过程发现错误，而不是运行过程
允许模板编写工具来决定绑定的使用，而不是在指令定义硬连接
我们正在从 DOM 解耦 Angular 2 的渲染。我们正在积极支持下面的其他功能，从这个解耦我们可以：
服务端渲染：允许超快的初次渲染和 web-crawler 支持。
Web Workers：把你的应用和大部分 Angular 转移到一个 Web Worker 线程，保持任何时候的 UI 的流畅和响应式。
原生移动 UI：我们热衷于在移动应用中支持 Web 平台。同时，一些团队想要在他们的 iOS 和
移动应用中展示完全原生的 UIs。
编译作为构建的步骤之一。Angular 应用解析和编译他们的 HTML 模板。我们在把编译步骤转移到你的构建过程，以此来加快初次渲染速度。
Angular 1 和 2 共同运行
Angular 2 比 Angular 1 提供了更吸引人的优势，表现在性能，简易性和灵活性。我们正在努力令你容易地从现有 Angular 1应用中就能获得这种优势的好处，而这种 Angular 1 应用无缝混合了 Angular 2的组件和服务从而形成单独的应用。通过这样的混合，你能够在多次小规模的提交中升级一个应用中的一个服务或组件。
例如，你可能有一个如下图类似的应用。为了感受 Angular 2 的新特性，又决定升级组件 left nav 成为 Angular 2 组件。一旦你对 Angular 2 的应用更有把握，你决定为了你的主体区域中的滚动区使用 Angular 2 的渲染速度。
为了让两者集成工作，在 Anglar 1 和 Angular 2 之间有四样要素需要相互协作：
为了实现以上功能，我们会建立一个名为 ng-upgrade 的库。你能在已存在的 Angular 1 应用里包含 ng-upgrade 和 Angular 2，并能很好地与之混合并搭配使用。
你可以在原始的中找到全部细节和伪代码，并阅读细节的概述以了解其工作原理。在未来的官方公告中，我们将会粗略介绍从 Angular 1 代码升级到 Angular 2 的特例。
首先，我们需要解决应用程序中各部分的通信问题。在 Angular 中，用于与其他类或函数通信的的最普遍方式是依赖注入。Angular 1 具有单一的根注入器，而 Angular 2 则具有分层注入器。每次升级服务都暗示着这两种注入需要互相提供实例。
ng-upgrade 库会自动地把 Angular 1 中的所有可注入的元素在 Angular 2 中变得可用。这意味着 Angular 2 的组件或服务能够在你的 Angular 1 应用服务中各处注入。
Angular 2 支持把 Angular 2 服务暴露在 Angular 1 注入器之下的行为，但你需要提供简单的映射设置。
通过独立的提交和混合环境中的通信，这种服务结果能够简便地一次一次地从 Angular 2& 转移到 Angular 1。
组件嵌套和嵌入
在所有版本的 Angular 中，我们将组件定义为拥有其模板的指令。为了进行增量迁移, 你需要能够一次次迁移组件。这意味着 ng-upgrade 要允许来自每一个框架中的组件相互嵌套。为了解决这个问题，ng-upgrade 允许你在外观设计模式中包含 Angular 1 的组件，这样就能够在 Angular 2 的组件中使用。相反地，你可以在 Angular 1 中包含 Angular 2 的组件来使用。伴随着 Angular 1 的嵌入和 Angular 2 的内容保护的模拟，这能够发挥全部作用。
在嵌套组件中，每个模板，包括其语法和语义，完全从属与 Angular 1 或者 Angular 2 两者之一。这不是一种仿真模式，而是每个框架中基于组件种类的实实在在的执行。这意味着升级到 Angular 2 的组件将会受益于 Angular 2 的所有特性，而不仅仅是更好的语法。
这也意味着Angular 1的组件通常会使用Angular 1的依赖注入。即使在使用Angular 2的模板时，Angular 2组件也会使用Angular 2的依赖注入，即使它是使用Angular 1的模板。&
把Angular 1的组件和Angular 2的组件混合起来意味着Angular 1的作用范围和Angular 2的组件是交错的。因此，ng-upgrade会确认变化检测（Angular 1的作用范围摘要和Angular 2的变化检测）在相同通道中是否交错，以维持表达式的可预测性的评估命令。ng-upgrade把这些特点纳入账户，并通过创造一种单独的结合性摘录循环的方法来实现跨平台，以便在Angular 1的作用范围摘要和Angular 2的变化检测建立联系。
典型的应用升级过程
这里有一个Angular 1项目升级为 Angular 2 的例子：
1. 在现有的应用中包含 Angular 2 和 ng-upgrade 的库。
2. 选择你想迁移的组件。
a. 编辑 Angular 1 的指令控制器去顺应 Angular 2 的语法。
b. 改变指令控制器/连接函数改变令其符合 Angular 2 的语法和语义。
c. 利用 ng-upgrade 去输出指令（现在是组件）作为 Angular 1 的组件（如果需要你可以称之为从Angular 1 模板衍生的 Angular 2 的组件）。
3. 选择你想迁移的服务。
a. 大多数的服务要求最低限度的修改。
b. 在 Angular 2 环境下配置服务。
c.（可选的）不使用 ng-upgrade 再输出服务到使用 ng-upgrade 的 Angular 1，如果它还继续被其他 Angular 1 代码使用。
4. 重复第2步骤和第3步骤以便于应用开发
5. 一旦没有多余的服务/组件被用来变更，把高层次的 Angular 1 引导程序降下，更换为 Angular 2的引导程序。
注意每个独立的变更会分别地被检查。并且，应用会持续地工作，让你随心所欲地继续发布升级。
我们不打算因为允许非组件的指令能够在两边被使用而提供支持。因为我们想到，大多数的非组件的指令在 Angular 2 中是不必要的，但在新的模板语法中是被直接支持的。
我听说 Angular 2 不支持双方法连接。我应当怎样替换它？
事实上，Angular 2 是支持双方发连接和 ng-model，虽然这需要一点不同的语法。当我们打算建立起 Angular 时，我们就想修复好与 Angular 摘录循环的发出。为了解决这个问题，我们选择创建一个非直接的数据流用作于变化检测。一开始，我们还不清楚怎样用双方法在 Angular 1 中来构建起 ng-model 的数据绑定。但我们总是认为我们必须令 Angular 2 中构建如同 Angular 1 的一样简单。
经过几次循环后，我们设法修复多摘录中坏掉的地方，同时保持 Angular 1 中 ng-model 的强力和简易性。双方法数据绑定有了一个新语法：[(property-name)]="expression"来令表达式在各方位中的界限更加明确。由于能够应用与大多数场景，这只不过是一个微小的语法更改，能够轻易地进行迁移。
如下面的例子，在 Angular 1 中，你会有：&input type="text" ng-model="model.name" /&在 Angular 2 中，你可以把上面的例子转换为这样：&input type="text" [(ng-model)]="model.name" /&
我能用什么语言搭配 Angular 2 使用？
Angular 2 的 API 完全支持现在的 JavaScript（ES5标准），下一个版本的 JavaScript（ES6标准或ES2015），TypeScript 和 Dart。
继续使用现在的 JavaScript 是非常好的选择，我们强烈建议你深入研究一下 ES6 和 TypeScript（ES6的一个超级集合），这些会为你的产品带来强大的提升。
ES6 为常用库，比如协议和模组，提供了很多提升性的语法和标准。TypeScript 能为你带来更好的代码导航，IDE 中的自动重构，文件，查找错误，等等。ES6 和 TypeScript 作为现在 ES5 的超级集合，十分简单易用。这意味着你现有的全部代码是有效的，并且能为它们添加一些新特性。
我应该利用代码库中的$watch做什么？
为了得到运行速度和可预测性，在 Angular 2 中，通过在 HTML 模板中或者组件指令中的注释中申明地指定要看的表达式。
在很多应用与性能不相适的场合下, 你可以从 ES7 标准的可见性中，比如 JavaScript 中的 Rx.js 或者Dart 中的 Streams，获得可见性的好处。现在我能为应用的版本迁移做什么准备
模仿最好的实例，并使用 Angular 1 的组件和服务来构建你的应用，就像 中所描述的。
原生升级能否使用新的组件路由器？
我们在 ng-conf2015 告知的升级计划是基于某时间段中全视图的升级，和两个版本的 Angular 中的组间路由器的控制通讯。我们得到的反馈是&好的，这具有增量性，但增量性还不够。我们又重新设计如上的计划。有更多的细节??能够透露吗？
当然是的！在设计文档。我们在编写一系列即将发布的公告，相关主题包括如下：
把你对于的 Angular 1 相关知识映射，类比到Angular 2中。
一组围绕 Angular 2 细节的问答。
带有代码示例的版本迁移的细致指导。
一些AngularJS相关文章链接：
AngularJS权威教程 清晰PDF版&
希望你喜欢，并分享我的工作~带你走近AngularJS系列：
带你走近AngularJS - 基本功能介绍
带你走近AngularJS - 体验指令实例
带你走近AngularJS - 创建自定义指令
如何在 AngularJS 中对控制器进行单元测试
在 AngularJS 应用中通过 JSON 文件来设置状态
AngularJS 之 Factory vs Service vs Provider
AngularJS && 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交数据
AngularJS 的详细介绍：AngularJS 的下载地址：
英文原文：
本文永久更新链接地址：
相关资讯 & & &
& (04月14日)
& (01月12日)
& (05月21日)
& (04月13日)
& (12/27/:28)
　　　同意评论声明
　　　发表
尊重网上道德，遵守中华人民共和国的各项有关法律法规
承担一切因您的行为而直接或间接导致的民事或刑事法律责任
本站管理人员有权保留或删除其管辖留言中的任意内容
本站有权在网站内转载或引用您的评论
参与本评论即表明您已经阅读并接受上述条款}