首页 > 代码库 > AangularJS入门总结二

AangularJS入门总结二

2024-09-21 13:18:46   209人阅读

  1. 双向数据绑定：在Mode(JS)中改变数据，而这些变动立刻就会自动出现在View上，反之亦然。一方面可以做到model变化驱动了DOM中元素变化，另一方面也可以做到DOM元素的变化也会影响到Model。
  2. $scope：是一个把view（DOM元素）连接到controller上的对象。$scope是model,它提供一个绑定到DOM元素上的“执行上下文”；
  3. $scope：实际就是一个JavaScript对象，controller和view都可以访问它，可以利用它在两者间传递信息；$scope 里，既存储数据，又存储将要运行在view上的函数；
  4. $rootScope：每个anguler应用都会有一个最顶层的scope，就是$rootScope，它对应着包含含有ng-app指令属性的那个dom元素；
  5. module（模板）：

    <html ng-app="mainApp"> 指定angular的作用域是在<html>标签以内部分; var mainApp= angular.module(mainApp, []);在js文件中调用angular对象的module方法来声明一个模块，模块的名字和ng-app的值对应。就可以让angular运行起来了；

  6. ng-controller：这个指令给DOM元素创建了一个新的$scope 对象，并将这个$scope 对象包含进外层DOM元素的$scope 对象里。
  7. 所有scope都遵循原型继承，这意味着它们都能访问父scope们。对任何属性和方法，如果AngularJS在当前scope上找不到，就会到父 scope上去找，如果在父scope上也没找到，就会继续向上找，直到$rootScope 上。如果controller是多层嵌套的，就会从最里面一直往外找，知道最上层；有些指令属性可以选择性地创建一个独立的scope，让这个scope不继承它的父scope们；
  8. Angular中的"ajax"----$http：$http 服务是AngularJS的核心服务之一，它帮助我们通过XMLHttpRequest对象或JSONP与远程HTTP服务进行交流；    (1)  get方法：$http.get("url?id="+id) .success(function(data){}).error(function(){});               (2)  post方法：$http.post("url",{username:$scope.username,pwd:$scope.pwd},success(function(data){}),error(function(){});
  9. 表达式: 表达式中不可以使用循环语句、判断语句，事实上在模板中使用复杂的表达式也是一个不推荐的做法，这样视图与逻辑就混杂在一起了;
  10. 过滤器（filter）:　(九种) Angular内置了一些过滤器：currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)；
  11. 过滤器使用方式：自定义过滤器，这个就强大了，可以满足任何要求的数据处理；

  12. 明白内置的filter的使用，以及如何定义一个filter。

    filter的两种使用方法：

　　　　　　1. 在模板中使用filter

　　　　　　　　我们可以直接在{{}}中使用filter，跟在表达式后面用 | 分割，语法如下：

　　　　　　　　　　　　　　{{ expression | filter }}

　　　　　　　　也可以多个filter连用，上一个filter的输出将作为下一个filter的输入：

　　　　　　　　　　　　　　{{ expression | filter1 | filter2 | ... }}　　

　　　　　　　　filter可以接收参数，参数用 : 进行分割，如下：

　　　　　　　　　　　　　　{{ expression | filter:argument1:argument2:... }}　　

　　　　　　　　除了对{{}}中的数据进行格式化，我们还可以在指令中使用filter，例如先对数组array进行过滤处理，然后再循环输出：

　　　　　　　　　　　　　　<span ng-repeat="a in array | filter ">

　　　　　　2. 在controller和service中使用filter

　　　　　　  　js代码中也可以使用过滤器，方式就是我们熟悉的依赖注入，如我要在controller中使用currency过滤器，只需将它注入到该controller中即可，

　　　　　　　　代码如下：

　　　　　　　　　　app.controller(‘test‘,function($scope,currencyFilter){

   　　　　　　　　　　 $scope.num = currencyFilter(123); 

　　　　　　　　　　}　　

　　　　　　　　在模板中使用{{num}}就可以直接输出$123.00了！

　　　　　　　　在服务中使用filter也是同样：

　　　　　　　　　　要在controller中使用多个filter，并不需要一个一个注入吗，提供了一个$filter服务可以来调用所需的filter，你只需注入一个$filter就够了；

　　　　　　　　　　使用方法如下：

　　　　　　　　　　app.controller(‘test‘,function($scope,$filter){

　　　　　　　　　　　　　　$scope.num = $filter(‘currency‘)(123);　　

　　　　　　　　　　　　　　$scope.date = $filter(‘date‘)(new Date()); 

　　　　　　　　　　}　　

 　　　　　　自定义过滤器：

　　　　　　　　　　filter的自定义方式也很简单，使用module的filter方法，返回一个函数，该函数接收输入值，并返回处理后的结果；

　　　　　　　　　　例如：返回一个数组中下标为偶数的元素；

　　　　　　　　　　　　　　/* Controller js */

　　　　　　　　　　　　　　mainApp.filter("oushu",function(){

　　　　　　　　　　　　　　　　　　return function(Array){

        　　　　　　　　　　　　　　　　　　var array = [];

       　　　　　　　　　　　　　　　　　　 for(var i=0;i<iArray.length;i++){

          　　　　　　　　　　　　　　　　　　　　　　  if(i%2!==0){

                　　　　　　　　　　　　　　　　　　　　　　array.push(Array[i]);

            　　　　　　　　　　　　　　　　　　　　　　}

        　　　　　　　　　　　　　　　　　　}

       　　　　　　　　　　　　　　　　　　 return array;

    　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　});

　13.指令：

　　　　　　模板中可以使用的东西有以下四种：

　　　　　　　　1.指令(directive)：angular提供的或者自定义的标签和属性，用来增强HTML表现力；

　　　　　　　　2.标记(markup)：即双大括号{{}}，可将数据双向绑定到HTML中；

　　　　　　　　3.过滤器(filter)：用来格式化输出数据；

　　　　　　　　4.表单控制：用来增强表单的验证功能。

　　　　　　指令的几种使用方式如下：

　　　　　　　　作为标签：<my-dir></my-dir>

　　　　　　　　作为属性：<span my-dir="exp"></span>

　　　　　　　　作为注释：<!-- directive: my-dir exp -->

　　　　　　　　作为类名：<span class="my-dir: exp;"></span>

　　　　　　　　常用的就是作为标签和属性；

　　　　　　样式相关的指令：

　　　　　　　　ng-class: 给元素绑定类名；

                                    表达式的返回值可以是类名字符串，用空格分割多个类名；

                                     类名数组，数组中的每一项都会层叠起来生效；

                                     一个名值对应的json对象，其键值为类名值为boolean类型，当值为true时，该类会被加在元素上。

　　　　　　　　ng-class-odd  ng-class-even 用来配合 ng-repeat分别在奇数列和偶数列使用对应的类。这个用来在表格中实现隔行换色再方便不过了。

　　　　　　　　ng-style：用来绑定元素的css样式；

　　　　　　　　ng-show ng-hide: 元素显隐控制，ng-show和ng-hide的值为boolean类型的表达式，当值为true时，对应的show或hide生效；

　　　　　　表单控件功能相关指令：

　　　　　　　　ng-checked  控制radio和checkbox的选中状态

　　　　　　　　ng-selected  控制下拉框的选中状态

　　　　　　　　ng-disabled  控制失效状态

　　　　　　　　ng-multiple  控制多选

　　　　　　　　ng-readonly 控制只读状态

 　　　　　　　 以上指令的取值均为boolean类型，当值为true时相关状态生效。

　　　　　　　 上面的这些只是单向绑定，只是从数据到模板，不能反作用于数据。要双向绑定，还是要使用 ng-model；

 　　　    　事件绑定相关指令：

　　　　　　　　ng-click

　　　　　　　　ng-change

　　　　　　　　ng-dblclick

　　　　　　　　ng-mousedown

　　　　　　　　ng-mouseenter

　　　　　　　　ng-mouseleave

　　　　　　　　ng-mousemove

　　　　　　　　ng-mouseover

　　　　　　　　ng-mouseup

　　　　　　　　ng-submit

　　　　　　　　事件绑定指令的取值为函数，并且需要加上括号，例如：

　　　　　　　　<select ng-change=”change($event)”></select>　　

　　　　　　　　然后在controller中定义如下：

　　　　　　　　$scope.change = function($event){

        　　　　　　 conolse.log($event.target);

　　　　　　　　}　　

　　　　　　　　在模板中可以用变量$event将事件对象传递到controller中;

　　　　　　特殊的指令：

　　　　　　　　ng-src:angular框架时在DOM内容加载完成之后才开始发挥作用的，如果模板中存在<img src="http://www.mamicode.com/{{url}}">,那么在

　　　　　　　　　　　　页面开始在加载angular完成之前，页面会一直显示一张错误的图片，因为路径还没有被替换；为了避免这种情况，

　　　　　　　　　　　　我们使用ng-src指令，这样在路径被正确得到之前就不会显示找不到图片。

　　　　　　　　ng-href: 同上理，<a>标签的href属性也需要换成ng-href，这样页面上就不会先出现一个地址错误的链接；

　　　　　　我们在模板中使用{{}}显示数据时，在angular编译完成之前页面会显示出大括号及里面的表达式。为了避免这个，ng中有一个与{{}}等同的指令:ng-bind，

　　　　　　同样用于单向绑定，在页面刚加载的时候就不会显示出对用户无用的数据了。尽管这样，{{}}那么好用，还不能用了不成？好消息是我们依然可以使用。因为

　　　　　　编写的是单页面应用，页面只会在加载index.html的时候出这个问题，只需在index.html中的模板中换成ng-bind就行。其他的模板是我们动态加载的，

　　　　　　就可以放心使用{{}}了。

 

 　　　　自定义指令： （还没写）

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

　　　　　　　

 

AangularJS入门总结二


联系
我们