AngularJS实用开发技巧(推荐)

Angular JS 是一组用来开发Web页面的框架、模板以及数据绑定和丰富UI组件。它提供web应用的架构,无需进行手工DOM操作。 AngularJS很小,只有60K,兼容主流浏览器,与jQuery 配合良好。

二、基础原则了解

①angular的一些入门了解

一、基础知识

1.angular放弃了IE8

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

二、一些原则

1.不要复用controller,一个控制器一般只负责一小块视图。

2.不要在controller里面操作dom。

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

4.不要在controller里面做数据过滤操作,有$filter服务。

5.一般情况下,controller是不会互相调用的,控制器之间的交互会通过事件进行。

6.angular利用指令来复用view。

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

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

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

10.可以用angular.element($0).scope()进行调试。

11.使用ngRoute进行视图之间的路由。

AngularJS实用开发技巧(推荐)

三、HTML页面最常用且实用的angular内置指令

①.ng-class(适用于类似点赞、关注等某个样式会因为某个操作改变的情况)

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

如果是字符串,多个类名使用空格分隔。

如果是对象,需要使用 key-value 对,key 是一个布尔值,value 为你想要添加的类名。只有在 key 为 true 时类才会被添加。

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

建议的两种使用方式:

一、字符串形式,代码如下:

<i ng-class="{true:'ion-ios-heart',false:'ion-ios-heart-outline'}[AccountInfo.isFocus]" ng-click='wetherFocus()'> </i>

这样的意思就是,i标签有一个基础类为icon,ng-class则绑定了一个动态的类,而这个类要取哪一个值则由AccountInfo.isFocus的值是true或者false来决定,若其值为true则i标签会添加ion-ios-heart这个类,若其值为false则i标签会添加ion-ios-heart-outline

这个类。i标签还绑定了一个ng-click的事件,在这个事件里面除了处理相应的逻辑之外,还决定AccountInfo.isFocus的值。这样的话,当发生点击操作的时候,自然就改变i标签相应的类,继而表现出不同的样式了。

二、key-value的样式,代码如下:

<i ng-class="{'ion-ios-heart':isIos,'ion-android-heart':isAndroid}"> </i>

显然,由代码则可以看出,这样的含义就是当isIos为true的时候就会取ion-ios-heart这个类,当isAndroid的值为true的时候,就会取ion-android-heart这个类。

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

ng-show 指令在表达式为 true 时显示指定的 HTML 元素,否则隐藏指定的 HTML 元素。

ng-hide 指令在表达式为 true 时隐藏指定的 HTML 元素,否则显示指定的 HTML 元素。

哈哈,看着就是水火不容的兄弟。。。。

例子如下:

<div> <span ng-click="toggleMenu()"></span> </div> <div> <ul ng-show="menuState"> ... </ul> <div ng-hide="menuState"> ... </div>

设置一个布尔变量menuState(实际开发中你可以用表达式,三目运算式等等),当其为true的时候,ng-show的内容会显示,ng-hide的内容会隐藏。反之则反之。。。

③.ng-switch(适用于在多种情况下显示不同的内容时)

ng-switch 指令根据表达式显示或隐藏对应的部分。

对应的子元素使用 ng-switch-when 指令,如果匹配选中选择显示,其他为匹配的则移除。

通过使用 ng-switch-default 指令设置默认选项,如果都没有匹配的情况,默认选项会显示。

例子:

<div ng-switch="essayType"> <div ng-switch-when="4"> .... </div> <div ng-switch-when="3"> .... </div> <div ng-switch-when="1"> ... </div> <div ng-switch-when="2"> ... </div> <div ng-switch-default> ... </div> </div>

④.ng-model(这里主要说一下ng-model神奇的小坑坑)

ng-model 指令绑定了 HTML 表单元素到 scope 变量中。

如果 scope 中不存在变量, 将会创建它。ng-model常用于<input>, <select>, <textarea>等元素。

如下代码:

<div> <textarea ng-model="content" placeholder="请输入留言"> </textarea> <ang-click="submitMes()">提交</a><br></div>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzswdp.html