AngularJS复习小结

开发移动端App，首先得在头部

然后在浏览器head引入angular.js angular-router.js,注意先后顺序哦！

创建文件目录存放的文件

使用angularJS开发项目步骤：

1、声明模块

var app = angular.module(‘myApp’,[‘ng’]);

2、注册模块

在index.html文件的html标签中

<html ng-app=”myApp”> 自动载入并执行；指定ng的作用范围

3、创建控制器

App.controller(‘控制器名称’,[‘$scope’,’$http’,’其他服务的名称’,function($scope,$http,其他服务的名称){

}])

4、调用控制器

一般首先创建一个父控制器，作用域为body，<body ng-controller=”控制器名称”>

5、操作模型数据

$scope.msg = “hello”;

这个$scope作用是声明变量的作用，与js的var差不多的意思

ng-init也可以用于声明变量，但ng-init用在html文档中，用ng-init不如用$scope,因为ng-init使得文档耦合性增加

比如：

<table ng-init="stuList=[

{name:'zhangsan',score:80,sex:'male'},

{name:'Reese',score:81,sex:'male'},

{name:'Finch',score:82,sex:'male'},

{name:'Lincoln',score:83,sex:'male'},

{name:'TBag',score:84,sex:'male'},

]">

这么写不如在js里面：$scope.stuList = [ ];

6、显示（渲染数据） ng指令或者{{}}

ng-bind=“dishList.name” {{dishList.name}}

ng-bind相对于{{}}，解决了ng启动较慢是双花括号的闪烁问题

ng-bind就是所谓的单向绑定

AngularJS中的指令：

ng-app: 指令初始化一个 AngularJS 应用程序。

ng-controller:

ng-view:

ng-init: 指令初始化应用程序数据

ng-model: 指令把元素值（比如输入域的值）绑定到应用程序

ng-repeat: 指令会重复一个 HTML 元素

ng-bind: 绑定变量或表达式

ng-click: 点击事件

ng-src: 图片地址

ng-if: 根据表达式的值在DOM中生成或移除一个元素

ng-show:控制显示，在dom中

ng-hide:控制隐藏，在dom中

自定义指令： ng指令不满足自己的要求时

app.directive("tsHello",function(){

return {

restrict: "ECAM",

template: "<div>Hello {{testName}}</div>",

scope: {

testName: "@"

}

});

E:element

C:class

A:attr

M:注释

<div ts-hello test-name=”world”></div> ===>Hello World

MVC设计模式：

M:Model 数据模型，ng中定义的一些变量

V:View 视图模型，通过ng指令表达的增强版的html

C:Controller 控制器，负责数据的增删改查

大大提高代码的可重用性；降低代码的耦合度；控制器提高了应用程序的灵活性和可配置性

双向数据绑定：

1、数据绑定到视图：

方式：ng-repeat ng-bind ng-if ng-show ng-hide {{}}

2、视图用户的输入绑定到数据：

方式：ng-model

如果想查看数据实时变化，用$watch监听

$scope.$watch(“text” function(){

})

什么是AngularJS的双向数据绑定？

3、所谓的双向绑定，无非是从界面的操作能实时反映到数据，数据的变更能实时展现到界面。即数据模型（Module）和视图（View）之间的双向绑定

工作原理：ng框架自动添加一个监听(watch)，和$scope.$watch是一样的，只要数据发生变化，视图就会更新。

如何知道数据变化？

ng会周期性的运行一个函数来检查$scope的模型数据是否发生变化，称为$digest; $scope.$digest()

什么时候调用$digest()

ng指令内部调用；很少直接手工调用$digest,都是$scope.$apply()==>$rootscope.$apply()

内置过滤器：

ng中的过滤器为了实现对于表达式结果的筛选、过滤、格式化，达到更好的表现效果。

currency

date：日期 {{nowDate | date:'MM-dd'}}

uppercase/lowercase

number：格式化数字为文本（对有小数点的数据的处理）

orderBy: 对指定的数组进行升序或者降序排列 true为降序排列

limitTo: 限定数组或者字符串要显示的个数

</li>

</li>

自定义过滤器：

app.filter(“myFilter”,function(){

return function(input,arg){

var ouput = arg+input

return ontput;

}

})

使用：{{price | myFilter:’￥’}} 假设price = 100 ，则输出￥100

序列化：angular.toJson(jsonObj) 对象或数组转字符串

反序列化：angular.fromJson(jsonStr) 字符串转对象

遍历：

var values = {name: 'misko', gender: 'male'};

angular.forEach(values,function(val,key){

Console.log(key+value)

})

ng内置服务：$http $location $interval $timeout等等

$http服务：

$http.get $http.post $http.jsonp

$http({

method: ”POST”,

url: “url”,

headers: {“Content-Type”:”application/x-www-form-urlencoded; charset=UTF-8”},

data: $.param(postData)

}).success(function(res){

$scope.list = res;

}).error(function(data){

})

$location服务：

1. angular.module('Demo', [])

2. .controller('testCtrl',["$location","$scope",testCtrl]);

3. function testCtrl($location,$scope) {

4. var url = "http://example.com:8080/#/some/path?foo=bar&baz=xoxo#hashValue";

5. $location.absUrl();// http://example.com:8080/#/some/path?foo=bar&baz=xoxo#hashValue

6. $location.url();// some/path?foo=bar&baz=xoxo

7. $location.protocol();// http

8. $location.host();// example.com

9. $location.port();// 8080

10. $location.path();// /some/path

11. $location.search();// {foo: 'bar', baz: 'xoxo'}

12. $location.search('foo', 'yipee');

13. $location.search();// {foo: 'yipee', baz: 'xoxo'}

14. $location.hash();// #hashValue

15. $scope.$on("$locationChangeStart", function () {

16. //监听url变化，在变化前做想要的处理

17. });

18. $scope.$on("$locationChangeSuccess", function () {

19. //监听url变化，在变化后做想要的处理

20. });

21. }

自定义服务：封装业务逻辑，提高代码复用率

普通方法

app.factory('$output', function () {

return {

print: function () {

console.log('func in $output is called');

}

})

构造函数

app.service('$student', function () {

this.study = function () {

console.log('we are learning...');

}

this.name = "zhangSan";

})

常量服务

app.constant('$Author',{name:'KKK',email:'**@163.com'})

变量服务

app.value('$Config',{version:1})})

依赖注入：

1、推断式：

app.controller(“myCtrl”,function($scope){ });

2、标记式：

var CtrlFunc = function(‘$scope’,’$Test’){

$Test.test();

}

CtrlFunc.$inject = [‘$scope’,’$Test’]；

app.controller(‘myCtrl’,CtrlFunc);

3、行内式:

app.controller(“myCtrl”,[‘$scope’,function($scope){ }])

推荐使用行内式注入服务，因为压缩时不会把参数压成一个字母，推断式就会报错

不同控制器间共享数据：

1、借助于$rootscope

2、控制器的嵌套

3、触发事件传递参数

子到父：$scope.$emit(‘事件名’，’data’);

父到子：$scope.$broadcast(‘事件名’，’data’);

a) 绑定事件

$scope.$on(‘事件名’,function(event,data){})

4、将其封装成一个服务（自定义服务）

参考文献：

http://www.angularjs.net.cn/api/ng/

http://blog.csdn.net/licheng11403080324/article/details/52123771

转载于:https://www.cnblogs.com/lantinggumo/p/7636686.html

AngularJS复习小结相关推荐

angularJS学习小结——filter
引言 filter过滤器对于我们来说并不陌生,他和我们现实生活中的过滤器的意思差不多,它的作用就是接收一个输入的值,然后按照某个规则进行处理然后输出最后的结果,例如我们输入一个数字,然后我们需要得到 ...
angularJS学习小结——$apply方法和$watch方法
引言最近在项目中封装控件的时候用到了$watch方法来监听module中的值的变化,当时小编对这个方法不是很了解,所以在网上找了一些资料来学习一下,下面小编就给大家简单介绍一些angularJS中 ...
关于 angularjs 的小结
前面的几篇文章已经对 angularjs 的入门有了一个基础的认识,了解了如何使用以及为什么使用它初识 Angularjs1.x ,了解5个W和1个H Angularjs 开始之Hello worl ...
软件构造复习小结（2）——设计规约（Specification）
一.方法(Method) "方法"是程序的"积木",可以被独立开发.测试.复用:使用"方法"的客户端,无需了解方法内部具体如何工作- &qu ...
工程硕士考试复习小结
工程硕士考试复习到现在已经接近尾声,后天就要奔赴省城石家庄赶考了.整个工程硕士的复习过程从十月初开始到现在将近一个月的时间,对所需要进行考试的科目进行整体复习.复习的形式前阶段 ...
Tarjan 复习小结
总算把这几个东西策清楚了. 在$Tarjan$算法里面,有两个时间戳非常重要,一个是$dfn$,意为深度优先数,即代表访问顺序:一个是$low$,意为通过反向边能到达的最小$dfn$, ...
9203复习小结消息框新窗体
事件 1,自定义事件选中控件点击闪电按钮选中想要的事件右边输入一个方法名称 2,控件的默认事件双击控件关于窗体对象一般情况下,窗体类中的this,代表了窗体本身关闭闭体 this.C ...
数据库原理及应用期末复习小结
数据库(DataBase):相互之间有关系若干的表(Table)的集合数据库管理系统(DBMS):Database Management System,主要是指MySQL.SQL server等一系 ...
线代复习小结矩阵等价、相似、合同的区别以及向量组等价 2019/09/13
向量组等价: 向量组等价<=>可以相互表出向量组等价=>等秩但是项链组等秩≠>向量组等价向量组等价,则该向量组的秩相同,从而A矩阵跟B矩阵的秩相同,所以矩阵A跟矩阵B等价 ...

AngularJS复习小结

AngularJS复习小结相关推荐

最新文章

热门文章