深入理解 AngularJS 的 Scope – 尘埃落定ng-book 2 是一个 AngularJS 2 学习教程，它能提供给你绝佳的教学指导和具有代表性的实例，让你摆脱那些混乱的指导教材，节省你的时间。如果你想在段时间内夯实基础，掌握整个框架，你应该学习更为专业的知识技能，《ng-book：Angular 2 大全》是你的不二选择。此书有以下特征：快速起步和学习：第一章开篇就告诉你如何构建你的 Angular 2 App。在开始阅读的那几分钟里，你就能获得足够多的知识去构建你自己的 Angular 2 App综合主题：你将会学习 Angular 2 的核心概念-从丰富的交互组件到应用程序的深度测试。最好的练习：例如，测试，代码组织，如何构建你应用程序的性能。我们会学习常用的的例子来实现你应用程序的全部组件。持续地更新：当 Angular 有新的技巧或者方法出现的时候，这本书也会持续地更新。不要担心会过时，这本书会覆盖最新的版本。你可以免费访问并且更新。开源中国(gh_7e)　
　文章为作者独立观点，不代表微头条立场
的最新文章
瞌睡来了 : iOS新彩蛋、把日期设置为日苹果用户纷纷被挑衅 怎么就不敢试试！不就变砖头嘛~恰逢情人节，这两天，两只大鹅接吻的照片刷爆了朋友圈。各种鸡汤段子纷至沓来，网友有诗为证：
“这一吻亲爱的开源维护者们：我们听到你们的声音，非常抱歉对你们的意见我们响应慢了。我们正在努力修复你们所说的问题。在我
有一个朋友想要做一些社区工作。他需要所有资助者都是受过良好教育的精英，因为所有人都要求项目是透明的。像现Flexbox 已经成为了最流行的建站布局工具之一。Susy 是另一个布局工具，它和 Sass 社区一起在近Swift AI 是高性能的人工智能和机器学习库，完全用 Swift 编写，目前支持
iOS and OS丹麦第二大城市奥尔胡斯（Aarhus ）的政府正准备使用开放的 IT 标准，以摆脱目前对所有权软件的依赖。欧Inferno 是个轻量级同构框架，可以构建高性能的用户界面。Inferno 跟经典的虚拟 DOM 库（Re在之前的文章我们讨论了微软开源 .NET 框架核心部分后一年的社区的贡献程度。本文要继续继续分析这个问题，但60,000 毫秒内对 Linux 的性能诊断当你为了解决一个性能问题登录到一台 Linux 服务器：在第一过年了，该算算你去年一年挣了多少了？@qinchange：IT人的级别：IT领袖：年入过亿; IT大哥：年入Tcpdive 是 TCP 性能剖析工具，主要特性：更多 TCP 内部性能信息 定量评估 TCP 性能改进引言本教程的目的是提供在 Windows 操作系统上运行 Apache Kafka 的一个手把手的指南。本Apache SINGA 是 Apache 在 2015 年 3 月 17 日接纳的一个孵化项目，是个分布式人们常常会问--“我应该在我的新项目中要使用 Angular 2吗？”假使该项目不需要被准备好几个月？假使它本系列的介绍PHP 是一门自由度很高的编程语言。它是动态语言，对程序员有很大的宽容度。作为 PHP
程序员组件，实例和元素之间的不同点困扰了很多 React 初学者。为什么会有三个不同的术语指向屏幕的绘图。管理实例Weixin4c 是基于C技术环境的微信公众号框架引擎(weixin4c)1 背景weixin4c是一个基于大早上的污一把给你们提提神@开源官方红薯：平常还是少上网多读书社交网络最可怕的地方在于把光阴虚度得好像很充实jQuery 已经十周年了，是在 2006 年 1 月 14 日的 BarCamp NYC 上由 John 2016 年最重要的是什么？好好活着！@atitbagfs：活着才是王道想要跟女朋友分手，又不好意思开口怎么angular-next-starter-kit 是使用 Angular 1.x 开发的应用准备迁移到 An向苹果或者微软说再见，从来都没那么简单，也没那么轻松图片作者: Ian Burt 来自 Flickr | C宿舍好的Spring是一个轻量级的控制反转（IoC）和面向切面（AOP）的容器框架，如何在程序中获取Spring配置还在讨论快播庭审？其实快播案背后藏着更大的秘密。@红薯：我去，宇宙从哪来的？其实互联网流氓公司多的是。。。笑支持在 Visual Studio 开发安卓应用的工具 Android++ 近日正式开源，源代码提供在软件作这是一篇在 GopherCon 2015 的技术会谈，主讲人 Blake Caldwell 曾是 Fog COracle 在 2015 年的 DB-Engines 排行榜上，相比于其他 290 个监控的系统都更受欢迎在这里，值得推荐的 Ruby on Rails 的 web 开发的插件包括 Capistrano 和 ForPython 已经决定迁移到 GitHub，虽然有人公开说反对迁移到 GitHub，但是会在一定程度上使用现在互联网APP开发都处于快速迭代开发的状态，所以APP能正常升级到最新版本是比较重要的事情。这里从服务器和本编觉得我会在2016年走大运！2016是个很6的年份，你看，+666+6+6+6跨2015 年是新开源项目风生水起的一年！大到从企业解决方案、小到家庭应用都酝酿着各式各样的开源产品！很多开源Arcus 是一个基于 memcached 的云缓存，由 NAVER Corp 公司开发。 arcus-me传统的持续集成(CI)系统被设计成作业的流水线。你可以有一个同行评审，然后开始构建作业，然后是单元测试作业，在CloudFlare，我们有很多/miekg/dns Go DNS library的用将神经网络应用于大图像时，输入可能有上百万个维度，如果输入层和隐含层进行“全连接”，需要训练的参数将会非常多Kotlin 是 JetBrains 的一门新的编程语言，这个公司开发了世界上最好用的 IDE。经过一段时间将神经网络应用于大图像时，输入可能有上百万个维度，如果输入层和隐含层进行“全连接”，需要训练的参数将会非常多开源中国众包平台与腾讯Bugly产品组达成战略合作（新闻详情），有一部分众包项目已经完成，其余部分都已结束报2015年的最后一天了，我在2016年的新年目标就是完成2015年那些本该在2014年完成的我在2013年就距离2016大数据生态纵览峰会开幕不足半个月的时间，本次峰会由经管之家旗下CDA数据分析师主办，邀请了各种专OSCHINA 本期高手问答( 12月30日- 1月5日)我们请来了 AnyPIM 的开发者@汉卿cloud周二，各位 OSCer 好！快到年底了，我总结了下这一年的工作。@neji1983：工作总结：价格便宜，量还Arcus 是一个基于 memcached 的云缓存，由 NAVER Corp 公司开发。 arcus-me活动详情时间： 14:00地点：厦门 思明区软件园观日路23号大放映厅（福宴酒楼旁）费用：性能优化是为了提高性能性能，减少资源消耗和应用对系统的影响。如果过早实施，或者没有性能评估，性能性能优化可能Pinpoint 是用 Java 编写的 APM（应用性能管理）工具，用于大规模分布式系统。在 Dappergh_7eOSChina 开源中国 官方微信账号热门文章最新文章gh_7eOSChina 开源中国 官方微信账号开发环境，vs2013 update 5，win7 x64,目前最新angular2版本为beta 17
第一步：安装node.js
安装node.js(https://nodejs.org/en/),为的是能够使用npm获得angular2.0的开发包
验证是否安装成功
cmd下输入 node -v
第二步：在vs2013上安装typescript
安装完成后在项目中可以添加typescript项目了，并且在项目属性栏中会有typescript页
第三步：创建项目
可以将没用的都删除
第四步：添加package.json文件用于获取angularjs2包及依赖项
编辑文件，添加内容
"name": "angular2demo",
"version": "1.0.0",
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.17",
"systemjs": "0.19.27",
"es6-promise": "^3.2.1",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.6",
"zone.js": "0.6.12"
"devDependencies": {
"typescript": "^1.7.5"
对于所需要的包可通过npm查询最新版本，如
npm info angular2
下一步：配置package.config使用npm获取angular2相关包
在右键项目，选择power command 下的cmd下执行npm install
如果出现错误，需要安装&tsd&包的话，需要执行
npm install tsd -g
然后再进行安装
安装完成后
下一步：创建个人应用，注意在入口处需要添加browser.d.ts引用
新建一个app目录，并添加ponent.ts,main.ts
<ponent.ts中添加angularjs模块
import&{Component}&from&'angular2/core';
@Component({
&&&&selector:&'angular2-demo',
&&&&template:&'&h1&这是我的第一个应用&/h1&'
export&class&AppComponent&{&}
此时编译会出现错误&connot find promise&等
这时需要在ponent.ts顶部添加引用
///&reference&path="../node_modules/angular2/typings/browser.d.ts"/&
完整如下：
///&reference path="../node_modules/angular2/typings/browser.d.ts"/&
import {Component} from 'angular2/core';
@Component({
selector: 'angular2-demo',
template: '&h1&这是我的第一个应用&/h1& &h2&太神奇了&/h2&'
export class AppComponent { }
在mian.ts中添加app模块
import&{bootstrap}&&&&from&'angular2/platform/browser'
import&{AppComponent}&from&'./ponent'
bootstrap(AppComponent);
下一步：添加index.html页
&title&Angular 2 Demo&/title&
&meta name="viewport" content="width=device-width, initial-scale=1"&
&!-- 1. Load libraries --&
&!-- IE required polyfills, in this exact order --&
&script src="node_modules/es6-shim/es6-shim.min.js"&&/script&
&script src="node_modules/systemjs/dist/system-polyfills.js"&&/script&
&script src="node_modules/angular2/bundles/angular2-polyfills.js"&&/script&
&script src="node_modules/systemjs/dist/system.src.js"&&/script&
&script src="node_modules/rxjs/bundles/Rx.js"&&/script&
&script src="node_modules/angular2/bundles/angular2.dev.js"&&/script&
&!-- 2. Configure SystemJS --&
System.config({
packages: {
format: 'register',
defaultExtension: 'js'
System.import('app/main').then(null, console.error.bind(console));
&!-- 3. Display the application --&
&angular2-demo&Loading...&/angular2-demo&
下一步：更改typescript编译选项，修改项目文件
如果此时编译会出现错误，错误信息&connot find name promise"
此时需要修改项目属性，如下选择system，同时修改项目文件在PropertyGroup中的debug和release中同时添加
&TypeScriptEmitDecoratorMetadata&true&/TypeScriptEmitDecoratorMetadata&
&&&&&TypeScriptModuleResolution&Node&/TypeScriptModuleResolution&
&&&&&TypeScriptExperimentalDecorators&true&/TypeScriptExperimentalDecorators&
最后，文件编译成功，在app下的main.ts和ponent.ts会自动编译成.js文件，终于在浏览器上看到了第一个angular2的页面了，这中间好多坑，实验了很多个版本，各个版本出现的错误都不是一样的，毕竟还是beta版，先拿这个版本学习了！
阅读(...) 评论() &其实AngularJS的官方网站首页的几个例子已经很好的展示了AngularJS的一些特性，下面我就从几个例子一步一步的讲解AngularJS吸引人的东西并且实际项目中是怎么使用ng的。
首先还是从第一个经典的Hello world 案例说起，如下HTML（如果你在墙外，可以直接访问&，右边就有运行效果）。
&!doctype html&
会一点HTML的人都知道，这个界面有个input输入框，下面有个&h1&的标题，内容是&Hello {{yourName}}!。实现的效果是：当用户在input输入框输入内容时，下面的h1标题内部实时显示 &Hello 输入的内容!"与普通的HTML不同之处有以下几点：
html标签上加了一个&ng-app属性，意思是整个HTML都属于AngularJS控制；
input输入框加了一个&ng-model="yourName"，这样就表明input的value与内存中的变量yourName是双向绑定的，在输入框输入&world&，内存中的yourName变量就变成了&world&，反之亦然；
h1标签内部有个{{yourName}}，这个表示内存中的yourName属性和h1节点的内容实现了双向绑定，yourName为&world&后，h1的内容就会变成&Hello world!&，"{{}}"是ng的表达式。
传统的做法：
在input上添加change事件，当触发change事件后，获取input输入框的内容，再组合字符串，通过DOM操作修改h1的innerHTML，前提可能要给 input和h1加上id或者name属性。通过这个例子.
大家应该能够很明显的感觉到AngularJS的优势了，不用写一行JS代码，就能实现一个很完美的功能。
上面的例子只是展示了一个简单的双向绑定功能，AngularJS既然是一个MV*框架，上面说的yourName是Model，HTML是View，那么*（Controller或者ViewModel）去哪了？我稍微修改下上面的例子:
&!doctype html&
可以看到我修改的地方：
在div上加了一个ng-controller="testCtrl"，表示这个DIV内部所有元素都属于testCtrl管辖；
同时script加了一个函数testCtrl，这个函数有个$scope的参数，并且函数内给$scope.yourName赋了一个&world&的值，而且还有个clearInputValue函数，这个$scope大家可以理解为ViewModel，ng Model的载体（或者说上下文），所有模板中使用的ng变量都在$scope上，初始化给$scope.yourName赋值说明input输入框的Value默认就为&world&；
界面上多了一个Button，button上有个ng-click="clearInputValue()"，ng-click表示给这个Button绑定了一个click事件，点击Button执行clearInputValue函数，这个函数给$scope.yourName赋值了空字符串，清空了输入框的值。
从这个例子中大家可以清楚的看到AngularJS是怎么样实现MV*的，具体传统的做法大家可以自行在脑海中想想，ng的实现方式是不是更加的简单，至此你有没有被ng所吸引？？？
大家看了上面的例子后，或许有些人就开始疑问了，每个controller绑定一个函数，这个函数的第一个参数是$scope，所有的数据和方法都在$scope上下文里面，而且这个函数是全局函数，如果界面上有很多controller呢？不会有很多个全局函数吧？哈哈，其实ng早就想到了这一步，ng有自己的一套模块加载机制，而且还引入了依赖注入。我再次修改了上面的例子：
&!doctype html&
我给ng-app指定了一个名称叫&app&，同时js代码使用angular.module("app", []);定义了一个名称为&app&的module，同时用这个app module 的controller方法定义了一个testCtrl；定义module函数是angular对象上的静态方法，第一个参数传名称，第二个参数是一个数组，这个数组表示这个module所引用的其他module，在这个例子中我们没有使用任何其他的module，所以传入一个空的数组，如果第二个参数不传，表示获取名称为&app&的module；
这个例子是大家在项目中经常遇见的菜单模块，页面共有2个菜单，默认选中菜单1，当选择哪个菜单，下面的内容区域就显示选中菜单的内容，同时菜单的样式需要修改为选中状态；*关于显示哪个内容区域我使用了ng-if="currentMenu == 'menu1'"和ng-if="currentMenu == 'menu2'",顾名思义，ng-if意思是如果表达式为真编译并且显示ng-if内部的模板元素，如果为假，不显示任何内容；
至于选中菜单的样式，我使用了ng-class="{'active':currentMenu == 'menu1'}",意思就是currentMenu 为menu1时添加class &active&，否则没有任何样式。
上面的3个例子，很好的展示了如何开启一个ng的web，并且如何模块化的使用ng，如果你都看懂了,说明你已经掌握了如何使用ng-controller、数据的双向绑定，写模板，并且初步接触了很多内置的指令（如：ng-app,ng-controller,ng-model,ng-if,ng-class,ng-click）。说实话，你已经会了很多了。当然ng还是有很多东西等你慢慢发觉，如：
用ngRoute模块写SPA（单页程序）；
还有更多丰富的指令，学会自己封装自定义指令；
ng的过滤器功能（Filter）；
ng的表单验证功能；
使用ng的服务功能（service、provider和factory）；
ng scope树形结构，并且在不同控制器之间通过事件发布订阅机制通信；
$http和$resource模块与服务端API进行交互操作；
使用animate模块做一些动画特效；
单元测试。
说明：上面的例子为了展示方便，所有的js css 都写在了html页面里面，实际项目中应该分开写在独立的文件中。
最后的例子
大家可以根据上面学到的知识，自己做个todolist的例子，默认界面上有2个todo，一个完成一个未完成，每个todo前面有个checkbox表示是否已完成，下面有个输入框和添加按钮，输入内容点击添加则列表上会多一个todo。大家可以先不用看下面的代码，自己尝试做一下，这个例子需要用到的几个directive：&li ng-repeat="todo in todos"&&表示循环todos列表，在li标签内部就可以写模板语言显示每个todo的内容，如{{toodo.text}}&。
代码如下：
&!DOCTYPE html&
上面的输入框和按钮其实用下面的代码也能实现
&input type="text" ng-model="todoText"
placeholder="add new todo here"&
&input class="btn-primary" type="button" value="add" ng-click="addTodo()"&
之所以官方的示例中用了&form ng-submit="addTodo()"&实现是为了实现输入内容后直接按Enter键也能提交。
阅读(...) 评论()