详细讨论AngularJs控制器、数据绑定和范围

上次分享了这一系列文章后，也有朋友建议，除了维护之外，没有必要学习1.x版本，可以学习2.0开始学习。我也知道1.x在性能和架构上不如2.x，但是我觉得因为现在有些朋友还在用1.x版本，所以1.x升级到2.x，甚至重构都非常困难，所以我们现在还在用1.x版本。我现在也在学习Angular 4.0版本，但是4.0中typescript和nodejs的集成比较大，而且我也在学习angular-cli脚手架，所以学完就准备和大家分享。这个暂时不讨论，今天继续和大家分享控制、数据绑定、范围的知识点。

1.控制器：

概念：Controller是angularJS中的一个函数，用来给视图的范围添加额外的函数，设置范围的初始状态，添加自定义行为。

控制器声明：app。控制器('控制器名称'，函数($ scope) {).})

//控制器定义//第一个参数：控制器名称，第二个参数：匿名函数，传入作用域，增加了附加函数app.controller ('my ctrl '，function($ scope){ $ scope . expression=' hello expression '；$ scope . ng bind=' hello ng-bind '；$ scope . html bind=' font color=' red ' hello，html bind/font '；$ scope.subCtrl=' hello subCtrl});控制器的使用：必要时添加ng-controller(在html的某个标签上)。

body ng-app=' myapp ' ng-controller=' my ctrl '从上面来看，控件的定义和使用都比较简单，但是很多人并不了解控制器的功能以及控制器中需要编写哪些代码，也有人将整个代码推送到控制器中。我个人认为控制器只是页面视图和模式之间的一个链接。只处理一些简单的逻辑，比如数据绑定、事件绑定等。具体的服务器访问或数据读取应该在服务中实现，我下次会详细告诉你。

我简单整理了一下控制使用的注意事项，供大家参考：

1)尽可能简化与控制器和$scope相关的操作。

2)不要重用控制器。一个控制器通常只负责一个小视图。

3)不要在控制器中操作DOM，这不是控制器的责任。

4)尽量不要过滤或操作控制器中的数据。

5)一般来说，控制器之间不会相互调用，控制器之间的交互会通过事件进行

2.范围(范围美元)

上述控制器中也提到了范围。该控制器主要与$scope的操作有关。我将简要地告诉您范围在AngularJs中的作用及其生命周期。我会把内部分享的总结贴出来与大家分享：

3.数据绑定：

AngularJs数据绑定也有几种绑定。我会给你列出来。可能大家都用过，也可能有些朋友没用过。

1)表达式{{}}:

常量：{{'const'}}变量：{{abc}}函数：{{func()}}

表达式：{{a b}}

这种方法是最常见的，表达式绑定，只要将表达式自动解析为Angular范围内的Html可识别的表达式或变量即可。

2)指令模式(ng-bind):

绑定方法是在元素中添加ng-bind指令，然后Angular解析指令并执行绑定。

3)天然气模型：

该方法主要用于表单提交，实现了页面内容和模型之间的双向数据绑定和双向数据。

4)ng-bind-html:

这个方法主要用于绑定Html元素，因为Angularjs默认不解析Html标签，直接输出，所以可以使用这个绑定方法在页面上显示Html标签内容，但是这个绑定需要引用一个序列化的js文件。

脚本类型=' text/JavaScript ' src=' http :/lib/angular-1 . 3 . 0 . 14/angular-sanitize . min . js '/脚本

5)ng-bind-模板：

此方法可以一次绑定多个变量和表达式。

使用场景：

第一页使用ng-bind，模板中的页面可以使用括号{{}}，表单使用ng-model。{{}}语法的缺陷：用户在不断刷新时可能会看到{ }；而且网络不好的时候也有可能看到

以下代码是上述五种方法的整体代码：

！doctype html html lang=' en ' head meta charset=' utf-8 ' title高页/标题！-参考AngularJs库-脚本类型=' text/JavaScript ' src=' http :/lib/angular-1 . 3 . 0 . 14/angular . js '/脚本！-介绍angularJs Html格式库-脚本类型=' text/JAVAScript ' src=' http :/lib/angular-1 . 3 . 0 . 14/angular-sanitize . min . js '/脚本/head！-数据绑定方法1，{{}} 2，指令绑定3，ng-bind绑定4，ng-bind-html绑定5，ng-bind-模板绑定-body ng-app=' myapp ' ng-controller=' my ctrl '！-1.表达式绑定-h1 {{expression}}/h1！-2.指令绑定-H2 {{ngmodel}}/H2输入类型=' text' ng-model=' ngmodel '！-3，ng-bind bind-H3 ng-bind=' ng bind '/H3 H3 class=' ng-bind : ng bind '/H3！-4，ng-bind-html binding-H4 ng-bind-html=' html bind '/H4！-5，ng-bind-template-H5ng-bind-template=' { { ngbind } }，{ { 1 1 } } '/H5/body/html script//模块定义//第一个参数：应用程序名称，第二个参数：应用程序相关模块varapp=angular.module()。//控制器定义//第一个参数：控制器名称，第二个参数：匿名函数，传入作用域，增加了附加函数app.controller ('my ctrl '，function($ scope){ $ scope . expression=' hello expression '；$ scope . ng bind=' hello ng-bind '；$ scope . html bind=' font color=' red ' hello，html bind/font '；$ scope.subCtrl=' hello subCtrl});/script以上关于AngularJs控制器、数据绑定和作用域的详细讨论是边肖与大家分享的全部内容。希望能给大家一个参考，支持我们。