AngularJS学习笔记三大模块（模态、控制器、视图）

今天，我们将详细解释AngularJS的三个主要模块：模型，视图控制器。

首先，告诉你三个模块之间的关系。

1。数据模型（模式）主要提供数据，它不直接与视图（视图）操作。

2.controller节约模式提供的数据与视图操作。

3.view是一个观点，即一个页面显示。

4。总之，控制器负责数据与视图之间的通信，这是二者之间的接口，它们分工明确，模块化。

1。如何使用数据模型（模态）

对于数据模型，我们来看看最后一个教程的例子。

文件

控制器

{问候语。文本} { } }

1。首先，AngularJS包，开始时先找NG程序指令，并指定整个范围；

2。然后，您将继续找到具体的说明，其中将找到NG模型，并定义文本的数据模型。

三.下面使用文本模型，实现双向绑定（只要它在NG应用程序的范围内，文本可以直接使用）。

两。如何使用控制器（控制器）

首先，让我们谈谈使用控制器的一些要点。

1。不要重用视图控制器，控制器一般只负责一个小视图（一对一对应）；

2。不要在控制器直接操作DOM，这是没有责任的控制器，和DOM的操作是使用指令指挥（见前面的教程）；

三.不要在控制器中执行数据过滤操作，并有专门的筛选器服务来实现这一块；

4。一般来说，不同的控制器不是相互调用的，控制器的交互通常是由事件执行的。

然后让我们看看上面代码中的蓝色部分，然后控制js的内容是：
函数控制器（$范围）{
scope.greeting美元= { {
正文：你好
}；
}
Angularjs发现天然气控制器的指令，然后发现指令，即定义的controll.js文件，然后直接获取其值从greeting.text。

三。如何使用视图（视图）

当谈到如何使用视图时，你必须提到指令！！！！！）

这是一段代码：
无功appmodule = angular.module（'app，{ }）； / /应用程序是在HTML中NG程序指令的名称

appmodule.directive（你好，功能）（{ / /定义一个命令你好
返回{
限制：e，
模板：嗨有，
替换：真
}；
}）；

上面的代码定义了一个指令标签，你可以用HTML试试它，看看会发生什么！！！

然后我将解释每个属性的含义。

1.restrict（字符串）：可选参数，指定什么形式的指令是在DOM表示。值：E（元），一个（属性）、C（级）、M（注释）；上面的例子是集作为一个单元形式（）；

2.template：（字符串或函数）可选参数，返回的内容，在返回一个div的例子；

3.templateurl：是相同的，返回的内容通过URL，如果返回的内容很多，建议使用此属性。

4.relace：（布尔值），默认值是false。上面的例子是建立真实的页面使用你好标签将由div将返回替换。

5.transclude：（布尔），设置为true时，此配置选项允许我们提取包含在该指令的元素的含量，然后放在指令模板的具体位置和共享与NG嵌入。

6、有一些其他属性，具体的人要学的比较慢。

好的，上面是对这3个主要模块的使用说明，希望能对你有所帮助，如果不了解上面的说明，我一定会为你解答的。祝你生活愉快。