AngularJS复习小结

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

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0" />

然后在浏览器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作用是声明变量的作用,与jsvar差不多的意思

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中的过滤器为了实现对于表达式结果的筛选、过滤、格式化,达到更好的表现效果。

{{expression | 名称:‘参数’| 名称:‘参数’}}

currency

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

uppercase/lowercase

number格式化数字为文本(对有小数点的数据的处理)

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

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

 

<!-- orderBy默认是升序的-->

    <li ng-repeat="stu in list |    orderBy:'age':true">

      {{stu.age+" "+stu.name}}

    </li>

<li ng-repeat="tmp in myList | limitTo:3">

      {{tmp}}

</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

posted @ 2017-10-08 10:23  hefeng6500  阅读(176)  评论(0编辑  收藏  举报