本文介绍了AngularJS的基本概念，包括其MVC设计模式、双向数据绑定、依赖注入和模块化设计四大特征。此外，还提供了入门级示例，涵盖了表达式、$scope的理解、事件指令、循环数组以及简单的前后端交互案例。
一、AngularJs的简介
- AngularJS [1] 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC（Model–view–controller）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
- AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的库。它可通过 <script> 标签添加到HTML 页面。
- AngularJS 通过 指令 扩展了 HTML，且通过 表达式 绑定数据到 HTML。
- AngularJS 是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中。
二、AngularJs的四大特征
1.MVC设计模式
AngularJs遵循软件工程的MVC模式，并鼓励展现、数据和逻辑组件之间的松耦合，通过依赖注入（Dependency injection），Angular为客户端的web应用带来传统服务端的服务，例如独立于视图的控制，因此，后端减少许多负担，产生更轻的web应用。
Model：数据，其实就是angular变量（$scope.XX)View：数据的呈现，HTML+Directive（指令）Controller：操作数据，就是function，数据的增删改查
2.双向绑定
- AngularJs是建立在这样的信念上，即声明式编程应该用于构建用户界面以及编写软件构建，而指令式编程非常适合来表示业务逻辑。
- angular框架采用并拓展了传统的HTML，通过双向的数据绑定来适应动态内容，双向的数据绑定允许模型和视图之间的自动同步，因此，angular使得对DOM的操作不在重要并提升了可测试性。
3.依赖注入
依赖注入（Dependency Injection）简称DI，是一种设计模式，指某个对象依赖的其他对象无需手工创建，只需要“吼一嗓子”，则在此对象创建时，其依赖的对象由框架来自动创建并注入进来，其实就是最少知识法则，模块中所有的service和provider两类对象，都可以根据形参名称实现DI
4.模块化设计
高内聚低耦合
- 官方提供的ng 、ngRoute、ngAnimate
- 用户自定义的模块 angular.module(‘模块名’,[])
三、入门Demo
1.表达式
表达式的写法是{
{表达式}}，表达式可以是变量，常量或者运算式
ng-app指令的作用是告诉子元素这个指令是angular的，angular会自动识别的。- ng-app 指令定义了angularJs应用程序的根元素
- ng-app指令在网页加载完毕时会自动引导（自动初始化）应用程序。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app>
<p>我的第一个表达式: {
{ 5 + 5 }}</p>
</div>
</body>
</html>
- 初始化指令
ng-init
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="" ng-init="quantity=1;cost=5">
<p>总价: {
{ quantity * cost }}</p>
</div>
</body>
</html>
结果是一样的，将数据绑定指令ng-bind
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
