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

作者: 梁同学de自言自语 | 来源:发表于2016-11-18 18:10 被阅读60次

《用AngularJS开发下一代Web应用》读书笔记①：Angu
《用AngularJS开发下一代Web应用》读书笔记②：Angu
MEAN开发指南
angular.js和ionic框架搭建一个webApp（适合对
Angular JS 学习笔记之－－万能的Hello Word
【Hybrid开发高级系列】AngularJS(三)——开发实践
AngularJS 版本演进了解
AngularJS
angularjs-表达式与ng-bind
(一) flask入门介绍

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代码）

<!DOCTYPE html>
<!-- 1.通过ng-app设置Angular管理的范围 -->
<html ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <title>AngularJS Hello World</title>
    </head>
    <!-- 2.引入Angular的文件 -->
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"/>
    <body>
        <!-- 3.通过ng-controller定义控制器 -->
        <div ng-controller="HelloController">
            <!-- 4.嵌套花括号的方式执行angular表达式 --> 
            <h3 class="show">{{text}},World</h3>
        </div>
    </body>
    <!-- 5.编写控制器的实现细节 -->
    <script type="text/javascript">
        var app = angular.module('myApp', []);
        app.controller('HelloController', function($scope) {
            $scope.text = "Hello";  //初始值
        });
    </script>
</html>

Model View Controller（MVC）

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

数据绑定

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

<!DOCTYPE html>
<!-- 1.通过ng-app设置Angular管理的范围 -->
<html ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <title>AngularJS Hello World</title>
    </head>
    <!-- 2.引入Angular的文件 -->
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <body>
        <!-- 3.通过ng-controller定义控制器 -->
        <div ng-controller="HelloController">
            <!-- 4.ng-model进行数据模型绑定 -->
            <input ng-model='text' />
            <!-- 5.嵌嵌套花括号的方式执行angular表达式 -->    
            <h3 class="show">{{text}},World</h3>
        </div>
    </body>
    <!-- 5.编写控制器的实现细节 -->
    <script type="text/javascript">
        var app = angular.module('myApp', []);
        app.controller('HelloController', function($scope) {
            $scope.text = "";   //初始值
        });
    </script>
</html>

效果：

数据绑定案例

依赖注入

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

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

指令

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

入门实例：购物车

<!DOCTYPE html>
<!-- 通过ng-app设置Angular管理的范围 -->
<html ng-app="myApp">
    <head>
        <meta charset="UTF-8">
        <title>AngularJS Shopping Cart</title>
    </head>
    <style type="text/css">
        span{border: 1px solid #CCCCCC;}
        .bookItem{margin-bottom: 15px;}
        .bookName{font-weight: bold;}
        .bookPrice{width: 28px;text-align: center;}
    </style>
    <!-- 引入Angular的文件 -->
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
    <body ng-controller='CartController'>
        <h2>你的购物车</h2>
        <!-- 通过ng-repeat遍历数据模型，并复制DOM结构 -->
        <div ng-repeat='item in items' class="bookItem">
            <!-- 获取数据模型中的属性值放入DOM结构 -->
            <div class="bookName">{{item.title}}</div>
            <!-- ng-model把数据模型和输入框绑定关系 -->
            <input ng-model='item.quantity' class="bookPrice"/>
            <span>单价：{{item.price}}元</span>
            <span>总价：{{item.price * item.quantity}}元</span>
            <button ng-click="remove($index)">移除</button>
        </div>
    </body>
    <!-- 在自定义控制器中实现业务细节 -->
    <script type="text/javascript">
        var app = angular.module('myApp', []);
        app.controller('CartController', function($scope) {
            //虚拟数据
            $scope.items = [
                {
                    title : 'JavaScript性能优化：度量、监控与可视化',
                    quantity : 1,
                    price : 40.40
                },
                {
                    title : 'HTML5基础知识 核心技术与前沿案例',
                    quantity : 2,
                    price : 59.30
                },
                {
                    title : 'ES6标准入门',
                    quantity : 1,
                    price : 58.70
                }
            ];
            //移除方法
            $scope.remove = function(index){
                $scope.items.splice(index,1);
            };
        });
    </script>
</html>

效果：

Angular购物车案例