初学者眼中的的Angularjs（一）_angular新手开发-CSDN博客

本文链接：https://blog.csdn.net/qq_33562825/article/details/70225611

一、介绍

AngularJS是一款由Google公司开发维护的前端MVC框架，其克服了HTML在构建应用上的诸多不足，从而降低了开发成本提升了开发效率。
1.1 特点

AngularJS与我们之前学习的jQuery是有一定的区别的，jQuery更准确来说只是一个类库（类库指的是一系列函数的集合）以DOM做为驱动（核心），而AngularJS则一个框架（诸多类库的集合）以数据和逻辑做为驱动（核心）。

框架对开发的流程和模式做了约束，开发者遵照约束进行开发，更注重的实际的业务逻辑。

AngularJS有着诸多特性，最为核心的是：模块化、双向数据绑定、语义化标签、依赖注入等。
与之类似的框架还有BackBone、KnockoutJS、Vue、React等。
1.2 下载

1、通过AngularJS官网下载，不过由于国内特殊的国情，需要翻墙才能访问。 2、通过npm下载，npm install angular
3、通过bower下载，bower install angular

1.3 体验AngularJS

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="">
    <p>名字 : <input type="text" ng-model="name"></p>
    <h1>Hello {{name}}</h1>
</div>

</body>
</html>

1.4 MVC

模型（Model）一般用来处理数据（读取/设置），一般指操作数据库。
视图（View）一般用来展示数据，比如通过HTML展示。
控制器（Controller）一般用做连接模型和视图的桥梁。

这里写图片描述
MVC更多应用在后端开发程序里，后被引入到前端开发中，由于受到前端技术的限制便有了一些细节的调整，进而出现了很多MVC的衍生版（子集）如MVVM、MVW、MVP、MV*等。
注：做为初学可以不必过于在意这些概念。

二、模块化

使用AngularJS构建应用（App）时是以模块化（Module）的方式组织的，即将整个应用划分成若干模块，每个模块都有各自的职责，最终组合成一个整体。

采用模块化的组织方式，可以最大程度的实现代码的复用，可以像搭积木一样进行开发。

2.1 定义应用
通过为任一HTML标签添加ng-app属性，可以指定一个应用，表示此标签所包裹的内容都属于应用（App）的一部分。
这里写图片描述

2.2 定义模块
AngularJS提供了一个全局对象angular，在此全局对象下存在若干的方法，其中angular.module()方法用来定义一个模块。
这里写图片描述
注：应用（App）其本质也是一个模块（一个比较大的模块）。

2.3 定义控制器
控制器（Controller）作为连接模型（Model）和视图（View）的桥梁存在，所以当我们定义好了控制器以后也就定义好了模型和视图。
这里写图片描述
模型（Model）数据是要展示到视图（View）上的，所以需要将控制器（Controller）关联到视图（View）上，通过为HTML标签添加ng-controller属性并赋值相应的控制器（Controller）的名称，就确立了关联关系。

以上步骤就是AngularJS最基本的MVC工作模式。
下图是AngularJS的结构，学习AngularJS会围绕下图的结构展开。
这里写图片描述

三、指令

HTML在构建应用（App）时存在诸多不足之处，AngularJS通过扩展一系列的HTML属性或标签来弥补这些缺陷，所谓指令就是AngularJS自定义的HTML属性或标签，这些指令都是以ng-做为前缀的，例如ng-app、ng-controller、ng-repeat等。

3.1内置指令

ng-app 指定应用根元素，至少有一个元素指定了此属性。 ng-controller 指定控制器
ng-show控制元素是否显示，true显示、false不显示 ng-hide控制元素是否隐藏，true隐藏、false不隐藏
ng-if控制元素是否“存在”，true存在、false不存在 ng-src增强图片路径 ng-href增强地址 ng-class控制类名
ng-include引入模板 ng-disabled表单禁用 ng-readonly表单只读 ng-checked单/复选框表单选中
ng-selected下拉框表单选中

3.2自定义指令
AngularJS允许根据实际业务需要自定义指令，通过angular全局对象下的directive方法实现。
这里写图片描述