《用AngularJS开发下一代Web应用》读书笔记①：AngularJS简介

IMG_20161118_181453_HDR.jpg

开篇是技术框架惯例的吹牛逼时间，建议略过

• 在创建优质的web应用方面，Angular团队致力于减轻开发人员在开发Ajax应用过程中的痛苦。
• 编写web应用的过程中，我们希望使用这样的一个前端框架来构建：使用简单，易于理解，同时当web应用变得复杂时，依然能易于测试、扩展和维护。更希望能一边编写代码，一边看到代码的效果，而不是为了满足浏览器内部的奇怪运行机制，频繁修改（兼容性）。
• AngularJS框架已经实现以上的目标，这得益于Angular周边的开源社区，读者可以在GitHub上获取更多大型的、复杂的案例。 （ AngularJS GitHub页面）

介绍一些AngularJS框架中涉及到的概念

客户端模板

• 类似Rails、PHP和JSP等传统的web应用（多页面应用）是将构建好的HTML页面整个返回给浏览器。而Ajax应用（单页面应用）是只向服务器请求数据，在浏览器端把HTML模板与字符串组合起来，最后把结果插入DOM中，实现DOM的局部内容刷新。
• AngularJS是在Ajax的基础上进行了封装和简化（使得页面模板的定义可以直接在HTML中进行，不需要在Java或JavaScript中编写HTML代码）

Model View Controller（MVC）

• MVC背后的核心理念是：把管理数据的代码(model)、应用逻辑代码(controller)，以及向用户展示数据的代码(view)清晰的分离开来。
• 理想的代码流程是：
  • 视图从模型中获取数据，展示给用户；
  • 当用户进行界面交互时，控制器会做出响应并修改模型中的数据；
  • 最后，模型会通知视图，数据已经发生了变更，视图再刷新显示的内容；
• 在angular应用中，视图就是DOM，控制器是自定义的JavaScript函数，而模型数据则被存储在$scope对象中。
• 通过MVC来组织代码，会让你的web应用更加易于扩展、维护和测试。更重要的，MVC是一个思想上的模型，编写MVC标准的代码，能让其他开发者一眼看懂所写的代码，减少沟通成本。

数据绑定

• 上面提到过Ajax应用通过hisinnerHTML的方式将更新的HTML字符串插入到DOM，实现局部刷新。但如果需要频繁更新数据，或者根据用户输入来修改数据的时候，则需要做很多及其繁杂的工作来保证数据的状态是正确的，并且UI和JavaScript属性要同时正确。
• AngularJS通过数据绑定，让数据自己去同步。并且这一机制，对来自服务器的数据，同样有效。

    
        
        
    
    
    
    
        
        

            
            
                
            
{{text}},World
        
    
    
    

效果：

数据绑定案例

依赖注入

• 上面通过$scope对象获取数据，但我们并不需要调用函数去创建这个对象。除了$scope对象之外，Angular还提供了很多对象来做一些很酷的事情，比如通过$location访问原生的window对象。这些都是通过Angular的依赖注入机制实现的。
• 依赖注入机制遵循迪米特法则的设计模式，我们的类知识简单的获取它们所需要的东西，而不需要创建那些它们所依赖的东西。

迪米特法则，也叫做最少知识原则，核心含义是一个类要尽量少地知道其他类的相关信息。

指令

• Angualr最强大的功能之一就是可以把模板写成HTML的形式，这是由于内置的DOM转换引擎，通过该引擎扩展HTML的语法。
• 例如，通过花括号{{text}}进行双向数据绑定，通过ng-controller用来指定控制器，通过ng-model将输入数据绑定到模型中的属性，这些都是HTML扩展指令。
• 不仅限于Angular内置的指令，甚至还可以编写自定义的指令来扩展HTML模板的功能。

入门实例：购物车

    
        
        
    
    
    
    
    
        
你的购物车
        
        

            
            
{{item.title}}
            
            
            单价：{{item.price}}元
            总价：{{item.price * item.quantity}}元
            移除
        
    
    
    

效果：

Angular购物车案例