一.开始

Angular JS是一组用于开发网页的框架、模板、数据绑定和丰富的UI组件。它提供了无需手动DOM操作的web应用程序架构。AngularJS非常小，只有60K，兼容主流浏览器，和jQuery配合很好。

二、理解的基本原则

(1)对角形的一些初步认识

一、基础知识

1.angular放弃了IE8

2.四大核心分别是mvc、模块化、指令系统和双向数据绑定

第二，一些原则

1.不要重复使用控制器。控制器通常只负责一个小视图。

2.不要在控制器中操作dom。

3.不要在contorller中格式化数据。ng有很好的表单控件。

4.不要过滤控制器中的数据，有一个$filter服务。

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

6.angular使用指令重用视图。

7.$scope是一个树形结构，与DOM标签平行。

8.子$scope对象继承父$scope上的属性和方法。

9.每个angular应用程序只有一个$rootScope对象。(通常位于ng-app上)。

10.您可以使用angular.element($0)进行调试。范围()。

11.使用ngRoute在视图之间布线。

三、HTML页面最常用、最实用的角度内置说明

.ng-class(适用于某种风格(如赞美和关注)会因操作而改变的情况)

ng类指令用于将一个或多个CSS类动态绑定到HTML元素。ng类指令的值可以是字符串、对象或数组。

如果是字符串，多个类名用空格隔开。

如果是对象，则需要使用键值对，其中键是布尔值，值是要添加的类名。只有当key为true时，才会添加类。

如果是数组，可以由字符串或对象组成，数组的元素可以是字符串或对象。

两种建议的使用方法：

1.以字符串形式，代码如下：

I class=' icon ' ng-class=' { true : ' ion-IOs-heart '，false : ' ion-IOs-heart-outline ' }[account info。is focus]' ng-click=' wetherfocus()'/I的意思是，I标记有一个叫icon的基本类，ng-class绑定了一个动态类。此类的值由AccountInfo.isFocus是真还是假决定。如果是真的，我标记会添加ion-ios-heart，如果是假的，我标记会添加ion-ios-heart-outline。

这门课。I标签还绑定了一个ng-click事件，其中AccountInfo.isFocus的值除了对应的逻辑之外还要确定。这样，当一个点击操作发生时，自然会改变I标签对应的类，然后显示不同的样式。

二、键值的样式，代码如下：

I class=' icon ' ng-class=' { ' ion-ios-heart ' : isIos，' ion-Android-heart ' : is Android } '/I显然，从代码中可以看出，这意味着当isios为真时，会取类ion-IOs-heart，当isiandroid为真时，

.ng-show和ng-hide(适用于在不同情况下显示两种不同的内容)

当表达式为真时，ng-show指令显示指定的HTML元素，否则隐藏指定的HTML元素。

当表达式为真时，ng-hide指令隐藏指定的HTML元素，否则显示指定的HTML元素。

哈哈，看来他们是水火不容的兄弟。

例子如下：

div class=' keyboard ' span class=' keyboardIcon ' ng-click=' toggleMenu()'/span/div class=' footer-menu ' ul class=' menu-list ' ng-show=' menuState './Ul div class=' footer-send ' ng-hide=' MenuState './div设置布尔变量menustate(可以使用表达式、三项式表达式等。在实际开发中)，当它为真时，将显示ng-show的内容，隐藏ng-hide的内容。恰恰相反。

.ng开关(适用于在各种情况下显示不同的内容)

ng-switch指令根据表达式显示或隐藏相应的零件。

对相应的子元素使用ng-switch-when指令。如果选择了匹配，请选择显示，如果其他子元素匹配，请删除它们。

使用ng-switch-default指令设置默认选项，如果不匹配，将显示默认选项。

示例：

div ng-switch=' essayType ' div class=' list-cart ' ng-switch-when=' 4 './div div class=' list-cart left-pic ' ng-switch-when=' 3 './Div Div class=' single-pic ' ng-switch-when=' 1 './div div class=' single-pic ' ng-switch-when=' 2 './div div class=' single-pic ' ng-switch-默认值./div/div 。ng。

ng-model指令将HTML表单元素绑定到范围变量。

如果变量不在作用域中，它将被创建。Ng-model常用于输入、选择、文本区域等元素。

以下代码：

div class=' what isay ' text area name=' my-message-detail ' ng-model=' content ' class=' my-message-detail ' placeholder='请输入消息'/text area a a class=' button BTN ' ng-click=' submit mes()' submit/ABR/div根据定义，理论上我们提交的时候，直接从控制器获取页面上定义的ng-model的值就可以了。但实际上，这是不可行的。Pro-test发现输出了一个未定义的，如果在控制器中定义了ng-model的初始值，则得到初始值，而不是变化后的最新值。

查找一些信息，大致意思是。角度限制了我们的一些定义。我们只能使用非原始对象来传递参数。

你什么意思？稍微修改一下上面的例子，如下所示：

Html代码：

div class=' what isay ' text area name=' my-message-detail ' ng-model=' model。content ' class=' my-message-detail ' placeholder='请输入消息'/textarea a a class=' button BTN ' ng-click=' submit mes()' submit

$ scope . model={ }；$ scope . model . content=' '；$ scope . submit mes=function(){ console . log($ scope . model . content)；}也就是说，我们定义一个对象，然后将ng-model定义为这个对象中的一个属性。这样，我们得到了ng-model的最新值。

另一个简单的方法是直接将ng-model作为参数传递。

例子如下：

//HTML代码输入类型=' text ' ng-model=' code ' button ng-click=' setcode(code)' log in/button br//controller code $ scope。setcode=function(code){ alert(code)；}四、数据交互的实用技巧

1)承诺的使用

ES6定义了一个承诺对象。这个对象很容易使用，尤其是在与背景交互时。既能防止回调过深，又能统一处理一些情况，还能提高代码的可读性。这个服务也封装在angularJs中，也就是$ Q。

$q是angularjs的一个服务，它只是promise异步编程模式的简化实现版本。可以通过$ q . defer()获得一个delay对象(defer object)，它有三个方法：

Resolve(value):向promise对象的异步执行器发送消息，告诉他我已经成功完成任务，value就是发送的消息。

reject(值):向promise对象的异步执行器发送消息，告诉他我不可能完成这个任务，值就是发送的消息。

Notify(value):向promise对象的异步执行器发送消息，告诉他我的任务完成情况，value就是发送的消息。

当这些消息被发送时，promise将调用现有的回调函数。

承诺是带有此延期对象的承诺对象。许诺对象可以通过defer.promise获得，许诺对象的一些方法：

然后(成功回调、错误回调、通知回调):参数是不同消息下不同的回调函数。defer发送不同的消息来执行不同的回调函数，这些消息作为这些回调函数的参数传递。返回值是一个promise对象，它的存在是为了支持链调用。第一个延期对象发出利息后，后续承诺对应的延期对象也会发送消息，但发送的消息不同。不管第一个延迟对象是发送拒绝还是解析，第二个和后续对象都是发送解析，消息是可传递的。

catch(错误回调):的缩写，然后是(null，错误回调)。

Finally(回调):相当于then(回调，回调)的缩写。这个中的方法最终不接受参数，但是可以成功地将延迟发送的消息和消息类型传递给下一个。

delay():用于生成延迟对象var delay=$ q . delay()；

reject():参数接收到一条错误消息，这相当于在回调函数中抛出一个异常，然后在下一个then中调用错误的回调函数。

All():参数作为承诺数组接收，并返回一个新的单一承诺对象。当所有这些承诺对象对应于延期对象时，这个单个承诺对象将被求解。当这些承诺对象中的一个被拒绝时，该单个承诺也将被拒绝。

当():接收到第一个参数作为任意值或承诺对象时，其他三个具有相同承诺的方法返回一个承诺对象。如果第一个参数不是promise对象，成功回调将直接运行，消息将是这个对象。如果是promise，返回的promise实际上是这个promise类型参数的包装。这个承诺对应的维护者发送的消息会被我们的when函数返回的承诺对象接收到。

具体用法如下：

在angular中，定义一个专用于交互的服务。

get:函数(url，选项){ br var delivered=$ q . deliver()；br show tip()；$http.get(url，选项)。成功(函数(数据){ HideTip()；if(数据。成功){递延. resolve(数据)；} else { deferred.reject(数据。消息)；}}).错误(函数(数据){ HideTip()；deferred.reject(数据)；});延期归还。}//调用get ('URL '，参数)。然后(函数(数据){//这里是successcallback}，函数(数据){//这里是error callback })；这样，我们可以在发出每个请求时统一定义一些提示，然后在请求结束后隐藏这些提示。在这段代码中，一般的意思是，当请求成功时，将调用deferred.resolve(数据)，并将状态设置为success，这样就会自动执行第一个函数，即successCallback，并传入请求的数据。当请求失败时，调用第二个函数errorCallback。

以上是边肖介绍的AngularJS实用开发技巧。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！