Merge pull request #3 from basecss/master

11111111

Author: dhcn

Diff for: Chapter2.markdown

@@ -4,14 +4,14 @@
 
 ## 目录
 
-- [启用Angular](#启用angular)
+- [启用Angular](#启用Angular)
 	- [加载脚本](#加载脚本)
 	- [使用ng-app声明Angular的界限](#使用ng-app声明angular的界限)
 - [模型/视图/控制器](#模型视图控制器)
 - [模板和数据绑定](#模板和数据绑定)
 	- [显示文本](#显示文本)
 	- [表单输入](#表单输入)
-	- [不唐突JavaScript的一些话](#不唐突javascript的一些话)
+	- [无侵入JavaScript的一些话](#无侵入javascript的一些话)
 	- [列表, 表格和其他重复的元素](#列表-表格和其他重复的元素)
 	- [隐藏与显示](#隐藏与显示)
 	- [CSS类和样式](#css类和样式)
@@ -322,11 +322,11 @@
 
     }
 ```
-###不唐突JavaScript的一些话
+###无侵入JavaScript的一些话
 
-在你JavaScript开发生涯的某些时刻, 有人可能会告诉你, 你应该编写"不唐突的JavaScript", 在你的HTML中使用`click`, `mousedown`以及其他类似的内联事件处理程序是不好的. 那么他是正确.
+在你JavaScript开发生涯的某些时刻, 有人可能会告诉你, 你应该编写"无侵入的JavaScript", 在你的HTML中使用`click`, `mousedown`以及其他类似的内联事件处理程序是不好的. 那么他是正确.
 
-不唐突的JavaScript思想已经有很多解释, 但是其编码风格的原理大致如下:
+无侵入的JavaScript思想已经有很多解释, 但是其编码风格的原理大致如下:
 
 1. 不是每个人的浏览器都支持JavaScript. 让每个人都能够看到你所有的内容和使用你的应用程序, 而不需要在浏览器中执行代码.
 
@@ -486,7 +486,7 @@
 
 这里, `ng-show`和`ng-hide`用于处理这些工作. 它们基于传递给它们的表达式提供显示和隐藏的功能. 即, 当你传递的表达式为true时`ng-show`将显示元素, 当为false时则隐藏元素. 当表达式为true时`ng-hide`隐藏元素, 为false时显示元素. 这取决于你使用哪个更能表达的你意图.
 
-这些指令通过适当的设置元素的样式为`display: block`来显示元素, 设置样式为`display: none`来隐藏元素. 让我们看以个正在构建的Death Ray控制板的虚拟的例子:
+这些指令通过适当的设置元素的样式为`display: block`来显示元素, 设置样式为`display: none`来隐藏元素. 让我们看一个正在构建的Death Ray控制板的虚拟的例子:
 ```html
     <div ng-controller="DeathrayMenuController">
         <p><button ng-click="toggleMenu()">Toggle Menu</button></p>
@@ -499,7 +499,9 @@
 ```
 ```js
     function DeathrayMenuController($scope){
-        $scope.menuState.show = false;
+        $scope.menuState = {
+        	show: false
+        };
 
         $scope.toggleMenu = function(){
             $scope.menuState.show = !$scope.menuState.show;
@@ -597,7 +599,7 @@
 在模版中, 我们设置`ng-class`为`{selected: $index==selectedRow}`. 当模型中的`selectedRow`属性匹配ng-repeat的`$index`时设置class为selected. 我们还设置一个`ng-click`来通知控制器用户点击了哪一行:
 ```html
     <table ng-controller="RestaurantTableController">
-        <tr ng-repeat="restaurant in directory" ng-click="selectRestaurant($index)" ng-class="{selected: $index==selectedRow">
+        <tr ng-repeat="restaurant in directory" ng-click="selectRestaurant($index)" ng-class="{selected: $index==selectedRow}">
             <td>{{restaurant.name}}</td>
             <td>{{restaurant.cuisine}}</td>
         </tr>

Diff for: Chapter3.markdown

@@ -104,7 +104,7 @@ AngularJS只是你开发实际网页的工具箱的一部分. 在这一节, 我
 
 让我们从你如何编写源代码开始. 有大量的JavaScript编辑器可以选择, 有免费的也有付费的. 长时间以来的事实证明Emacs和Vi是开发JS的最好选择. 现在, 各种IDEs都自带了语法高亮, 自动完成以及其他功能, 它给你一个选择的余地, 这可能是值得的. 那么, 应该使用那一个呢?
 
-如果你不介意付几十块钱(尽管它有一个30天的免费试用期), [WebStorm](www.jetbrains.com/webstorm/‎)是个不错的选择, 当今时代, WebStorm由JetBrains提供了最广泛的Web开发平台. 它所具有的特性, 在之前只有强类型语言才有, 包括代码自动完成(如图3-1所示, 指定浏览器版本), 代码导航, 语法和多无高亮, 同时支持多个库和框架的启动即可使用. 此外, 它还漂亮的集成了在IED中正确的调试JavaScript的功能, 而且这些都是基于Chrome执行的.
+如果你不介意付几十块钱(尽管它有一个30天的免费试用期), [WebStorm](www.jetbrains.com/webstorm/‎)是个不错的选择, 当今时代, WebStorm由JetBrains提供了最广泛的Web开发平台. 它所具有的特性, 在之前只有强类型语言才有, 包括代码自动完成(如图3-1所示, 指定浏览器版本), 代码导航, 语法和多无高亮, 同时支持多个库和框架的启动即可使用. 此外, 它还漂亮的集成了在IDE中正确的调试JavaScript的功能, 而且这些都是基于Chrome执行的.
 
 ![ide](figure/3-1.png)
 
@@ -182,14 +182,14 @@ Yeoman让你很简单的使用一个Web服务器服务你所有的静态资源
 
 ###Karma
 
-Karma存在的主要的原因是它让你的测试驱动开发(TDD)流程变得简单, 快速和有趣. 它使用NodeJS和SocketIO(你不需要知道它们是什么, 只需要假设它们是很棒很酷的库), 并允许在多个浏览器中及其快速的运行你的代码和测试. 在[https:// github.com/vojtajina/karma/](https:// github.com/vojtajina/karma/)中可以找到更多信息.
+Karma存在的主要的原因是它让你的测试驱动开发(TDD)流程变得简单, 快速和有趣. 它使用NodeJS和SocketIO(你不需要知道它们是什么, 只需要假设它们是很棒很酷的库), 并允许在多个浏览器中及其快速的运行你的代码和测试. 在[https://github.com/vojtajina/karma/](https://github.com/vojtajina/karma/)中可以找到更多信息.
 
 > **TDD简介**
 >
 > 测试驱动开发或者TDD, 是一个通过确保在开发生命周期内首先编写测试的敏捷方法, 这是在代码实现之前进行的, 这就是测试驱动的开发(不只是作为一种验证工具).
 >
 > TDD的原则很简单:
-> 
+>
 + 代码只需要在一个所需要的代码测试失败时编写.
 +  编写最少的代码以确保测试通过.
 +  在每一步删除重复代码.
@@ -264,7 +264,7 @@ Karma并没有所有最新版和最好的(greatest)IDEs使用的插件(已经实
 
 **在每一个变化上运行测试**
 
-这是许多TDD开发者的理想国: 能够运行在它们所有的测试中, 每次它们按下保存, 在急毫秒之内迅速的得到返回结果. 使用AngularJS和Karma可以很容易做到这一点. 事实证明, Karma配置文件(记住就是前面的`karma.conf.js`)有一个看似无害的名为**`autoWatch`**的标志. 设置它为true来告诉Karma每次运行你的测试文件(这就是你的源代码和测试代码)都监控它的变化. 然后在你的IDE中执行"karma start", 猜猜会怎样? Karma运行结果将可供你的IDE使用. 你甚至不需要切换控制台或者终端来了解发生了什么.
+这是许多TDD开发者的理想国: 能够运行在它们所有的测试中, 每次它们按下保存, 在几毫秒之内迅速的得到返回结果. 使用AngularJS和Karma可以很容易做到这一点. 事实证明, Karma配置文件(记住就是前面的`karma.conf.js`)有一个看似无害的名为**`autoWatch`**的标志. 设置它为true来告诉Karma每次运行你的测试文件(这就是你的源代码和测试代码)都监控它的变化. 然后在你的IDE中执行"karma start", 猜猜会怎样? Karma运行结果将可供你的IDE使用. 你甚至不需要切换控制台或者终端来了解发生了什么.
 
 ##端到端/集成测试
 
@@ -298,7 +298,7 @@ Scenario Runner允许你按照类Jasmine的语法来描述应用程序. 正如
   b. 添加一个代理服务器将请求定位到正确的测试文件所在目录, 例如:
 
   	proxies = {'/': 'http://localhost:8000/test/e2e'};
-  
+
   c. 添加一个Karma root(根目录/基础路径)以确保Karma的源文件不会干扰你的测试, 像这样:
 
   	urlRoot = '/_karma_/';
@@ -323,7 +323,7 @@ Angular场景情运行器, 顾名思义, 它是由Angular创建的. 因此, 他
 
 Angular意识也意味着Angular直到所有的XHR何时向服务器放出, 从而可以避免页面加载所等待的间隔时间. 场景运行器直到何时加载一个页面, 从而比Selenium测试更具确定性, 例如, 超时等待页面加载时任务可能失败.
 
-**调试功能** 
+**调试功能**
 
 探究JavaScript, 如果你查看你的代码不是很好; 当你希望暂停和恢复测试时, 所有的这些都运行场景测试吗? 然而所有的这一切通过Angular场景运行器都是可行的, 等等.
 
@@ -376,9 +376,9 @@ Angular意识也意味着Angular直到所有的XHR何时向服务器放出, 从
 		//Some stuff here
 	}]);
 ```
-一旦所有的变量都混肴或者压缩只有, 这是使用Angular找出那些你最初使用的服务和变量的方式.
+一旦所有的变量都混淆或者压缩只有, 这是使用Angular找出那些你最初使用的服务和变量的方式.
 
-> 每次都是数组的方式注入是比较好的处理发方式, 以避免开始编译代码时的错误. 挠头并视图找出为什么提供的$e变量丢失了(一些任务的混肴版本压缩了它)是不值得的.
+> 每次都是数组的方式注入是比较好的处理发方式, 以避免开始编译代码时的错误. 挠头并视图找出为什么提供的$e变量丢失了(一些任务的混淆版本压缩了它)是不值得的.
 
 ##其他优秀工具
 
@@ -457,7 +457,7 @@ Figure 3-5. AngularJS properties within Batarang
 
 然后只需按照打印的只是来获取Yeoman.
 
-对于Windows机器, 或者运行它是遇到任何问题, 到[https://github.com/yeoman/yeoman/ wiki/Manual-Install](https://github.com/yeoman/yeoman/ wiki/Manual-Install)并按照说明来安装会让你畅通无阻.
+对于Windows机器, 或者运行它是遇到任何问题, 到[https://github.com/yeoman/yeoman/wiki/Manual-Install](https://github.com/yeoman/yeoman/wiki/Manual-Install)并按照说明来安装会让你畅通无阻.
 
 ###启动一个新的AngularJS项目
 
@@ -490,7 +490,7 @@ Figure 3-5. AngularJS properties within Batarang
 ```bash
 	yeoman init angular:route routeName
 ```
-因此, 如果你运行`yeoman iniy angular route home`结束之后它将执行以下操作:
+因此, 如果你运行`yeoman init angular:route routeName`结束之后它将执行以下操作:
 
 + 在`app/scripts/controllers`目录中创建一个`home.js`控制器骨架
 + 在`test/specs/controllers`目录中创建一个`home.js`测试规范
@@ -524,7 +524,7 @@ Yeoman不支持压缩文件, 但是根据来发者提供的信息, 它很快会
 
 ##使用RequireJS整合AngularJS
 
-如果你提单做好更多的事情, 正好会让你的开发环境更简单. 后期修改你的开发环境, 会需要修改更多的文件. 依赖管理和创建包部署是任何规模的项目所忧虑的.
+如果你提前做好更多的事情, 正好会让你的开发环境更简单. 后期修改你的开发环境, 会需要修改更多的文件. 依赖管理和创建包部署是任何规模的项目所忧虑的.
 
 使用JavaScript设置你的开发环境是相当困难的, 因为它涉及Ant构建维护, 连接你的文件来构建脚本, 压缩它们等等. 值得庆幸的是, 在不久之前已经出现了像RequireJS这样的工具, 它允许你定义和管理你的JS依赖关系, 以及将他们挂到一个简单的构建过程中. 随着这些异步加载管理的工具诞生, 能够确保所有的依赖文件在执行之前加载好, 重点工作可以放在实际的功能开发, 在此之前从未如此简单过.
 
@@ -541,7 +541,7 @@ Yeoman不支持压缩文件, 但是根据来发者提供的信息, 它很快会
     c. /**script**: 主AngularJS代码库. 这个目录也包括我们的引导程序代码, 主要的RequireJS集成
 
         i. /**controllers**: 这里是AngularJS控制器
-        
+
         ii. /**directives**: 这里是AngularJS指令
 
         iii. /**filters**: 这里是AngularJS过滤器
@@ -727,7 +727,7 @@ Yeoman不支持压缩文件, 但是根据来发者提供的信息, 它很快会
 
     // web server port
     port = 8989;
-    
+
     // cli runner port
     runnerPort = 9898;
 
@@ -740,18 +740,18 @@ Yeoman不支持压缩文件, 但是根据来发者提供的信息, 它很快会
     // enable/disable watching file and executing tests whenever any file changes
     autoWatch = true;
 
-    // Start these browsers, currently available: 
+    // Start these browsers, currently available:
     // - Chrome
     // - ChromeCanary
     // - Firefox
     // - Opera
     // - Safari
     // - PhantomJS
-    // - IE if you have a windows box 
+    // - IE if you have a windows box
     browsers = ['Chrome'];
-    
+
     // Cont inuous Integrat ion mode
-    // if true, it captures browsers, runs tests, and exits 
+    // if true, it captures browsers, runs tests, and exits
     singleRun = false;
 ```
  我们使用一个稍微不同的格式来定义的我们的依赖(包括: false是非常重要的). 我们还添加了REQUIRE_JS和适配依赖. 最终进行这一系列工作的是`main.js`, 他会触发我们的测试.
@@ -760,7 +760,7 @@ Yeoman不支持压缩文件, 但是根据来发者提供的信息, 它很快会
 
 	require.config({
 		// !! Karma serves files from '/base'
-		// (in this case, it is the root of the project /your-project/app/js) 
+		// (in this case, it is the root of the project /your-project/app/js)
 		baseUrl: ' /base/app/scr ipts' ,
 		paths: {
         angular: 'vendor/angular/angular.min',
@@ -817,7 +817,7 @@ Yeoman不支持压缩文件, 但是根据来发者提供的信息, 它很快会
 				elem = $compi le('<input type=”text” ngbk-focus>')($rootScope);
 			}));
 
-			it('should have focus immediately', function() { 
+			it('should have focus immediately', function() {
 				expect(elem.hasClass('focus')).toBeTruthy();
 			});
 		});
@@ -836,7 +836,7 @@ Yeoman不支持压缩文件, 但是根据来发者提供的信息, 它很快会
 值得庆幸的是, RequireJS的处理方式并不会影响我们所有的端到端的测试, 因此可以使用我们目前所看到的方式简单的做到这一点. 一个范例配置如下, 假设你的服务其在http://localhost:8000上运行你的应用程序:
 ```js
 	// base path, that will be used to resolve files
-	// (in this case is the root of the project 
+	// (in this case is the root of the project
 	basePath = '../';
 
 	// list of files / patterns to load in the browser
@@ -858,7 +858,7 @@ Yeoman不支持压缩文件, 但是根据来发者提供的信息, 它很快会
 
 	// cli runner port
 	runnerPort = 9898;
-	
+
 	// enable/disable colors in the output (reporters and logs)
 	colors = true;
 

Diff for: Chapter4.markdown

@@ -110,7 +110,7 @@ Figure 4-1. Guthub: A simple recipe management application
 
 	services.factory('MultiRecipeLoader', ['Recipe', '$q', function(Recipe, q){
 		return function(){
-			var delay = $.defer();
+			var delay = $q.defer();
 			Recipe.query(function(recipes){
 				delay.resolve(recipes);
 			}, function(){
@@ -244,7 +244,7 @@ Figure 4-1. Guthub: A simple recipe management application
 ```js
 	// This file is app/scripts/directives/directives.js
 
-	var directive = angular.module('guthub.directives', []);
+	var directives = angular.module('guthub.directives', []);
 
 	directives.directive('butterbar', ['$rootScope', function($rootScope){
 		return {
@@ -255,7 +255,7 @@ Figure 4-1. Guthub: A simple recipe management application
 					element.removeClass('hide');
 				});
 
-				$routeScope.$on('$routeChangeSuccess', function(){
+				$rootScope.$on('$routeChangeSuccess', function(){
 					element.addClass('hide');
 				});
 			}