《用AngularJS开发下一代Web应用》读书笔记①：Angu
2016-11-18 本文已影响60人
梁同学de自言自语
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应用通过his
innerHTML的方式将更新的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购物车案例
