简介
AngularJS是一款由Google公司开发维护的前端MVC框架，其克服了HTML在构建应用上的诸多不足，从而降低了开发成本提升了开发效率。
特点
AngularJS与我们之前学习的jQuery是有一定的区别的，jQuery更准确来说只一个类库（类库指的是一系列函数的集合）以DOM做为驱动（核心），而AngularJS则一个框架（诸多类库的集合）以数据和逻辑做为驱动（核心）,有着诸多特性，最为核心的是：模块化、双向数据绑定、语义化标签、依赖注入等。
MVC
MVC是一种开发模式，由模型（Model）、视图（View）、控制器（Controller）3部分构成，采用这种开发模式为合理组织代码提供了方便、降低了代码间的耦合度、功能结构清晰可见。
模型（Model）一般用来处理数据（读取/设置），一般指操作数据库。
视图（View）一般用来展示数据，比如通过HTML展示。
控制器（Controller）一般用做连接模型和视图的桥梁。
MVC关系图.png
AngularJs下载
1、通过AngularJs官网下载，不过由于国内特殊情况，需要翻墙才能下载。
2、通过npm下载。
体验AangularJs
将下载好的AngularJs引入到界面中，引入AangularJs放在body标签的最后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJs入门</title>
</head>
<body>
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
</body>
</html>
模块化
使用AngularJS构建应用（App）时是以模块化（Module）的方式组织的，即将整个应用划分成若干模块，每个模块都有各自的职责，最终组合成一个整体。
1、定义应用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJs入门</title>
</head>
<body ng-app="app">
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
</body>
</html>
使用ng-app指令可以指定一个 应用，一个页面一般只有一个ng-app,表示此标签所包裹的内容都属于应用（app）的一部分,ng-app属性可以不赋值，但是在关联相应的模块时一定要赋值。
2、创建模块
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJs入门</title>
</head>
<body ng-app="app">
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
</script>
</body>
</html>
使用 var app = angular.module("app",[]);，通过module方法创建一个模块，需要传递两个参数，第一个表示模块的名称，第二个表示此模块依赖其他的模块；
3、定义控制器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AngularJs入门</title>
</head>
<body ng-app="app">
<!--引入angularjs-->
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller("DemoController",["$scope",function ($scope) {
}])
</script>
</body>
</html>
通过app.controller(),创建一个控制器，控制器是连接模型和视图的一个桥梁，该方法需要两个参数，第一个是控制器的名称，第二个参数是一个数组，这个数组除最后一个参数为一个函数以外，其他的参数都是一个字符串，表明此控制器的依赖关系。
模型数据是要展示到视图上的，所以需要将控制器关联到视图上，通过为HTML标签添加ng-controller属性并赋值相应的控制器的名称，就确立了关联关系。
以上步骤就是AngularJS最基本的MVC工作模式。
网友评论