AangularJS入门总结二

  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="{{url}}">,那么在

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

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

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

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

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

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

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

    自定义指令: (还没写)

       

时间: 2024-10-10 00:21:40

AangularJS入门总结二的相关文章

Bootstrap入门(二)栅格

Bootstrap入门(二)栅格 全局CSS样式--栅格 先引入本地的CSS文件(根据自己的文件夹,有不同的引入地址,我是放在一个新建的名为css的文件夹中) container 容器,栅格系统是依赖容器存在的 ... Bootstrap 提供的栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局.参数: 超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面显示

[WebGL入门]十二,模型数据和顶点属性

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中如果有我的额外说明,我会加上[lufy:],另外,鄙人webgl研究还不够深入,一些专业词语,如果翻译有误,欢迎大家指正. 顶点属性的意思 上次的文章中,介绍了一下从着色器的生成,编译,到程序对象的生成和着色器的连接.这次,简单的说一下模型数据的定义和顶点属性的处理.另外,介绍一下根据模型数据生成VBO的方法.VBO的使用要比生成难理解一些,但是不要担心,后面会慢慢说明.接下来看一下顶点属性.顶点属性,说的简单点,

Project Server 2013新手入门 (二)为PWA用户分配权限

上一篇文章我们讲到怎么为project server 2013 的PWA网站添加用户,那么用户添加好了,我们怎么给这些用户设置相应的权限,来对应我们项目管理中不同的角色(项目经理,资源经理.员工.负责人等),以便他们在项目整个过程中行使的权利和责任体现在我们的Project Server PWA的项目管理中心. 为用户分配PWA的全局权限(关于这个全局权限,我会在以后的文章中介绍) 执行完以上步骤之后,我们将在Project Server 2013 "服务器设置"下管理用户. 1)返回

HTML入门(二)

外部样式表当样式需要被应用到很多页面的时候,外部样式表将是理想的选择.使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观. <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> 内部样式表当单个文件需要特别样式时,就可以使用内部样式表.你可以在 head 部分通过 <style> 标签定义内部样式

C语言快速入门教程(二)

C语言快速入门教程(二) C语言的基本语法 本节学习路线图: 引言: C语言,顾名思义就是一门语言,可以类比一下英语; 你要说出一个英语的句子需要:  单词  +  语法!  将单词按照一定的语法拼凑起来就成了一个英语句子了; C语言同样是这样,只不过单词可以理解为一些固定的知识点,而语法可以理解为算法(可以理解为解决问题的方法) 在这一节中我们就对固定知识点中的语言描述与数据存储进行解析! 1.C语言的基本元素 1.1  标识符 什么是标识符? 答:在C语言中,符号常量,变量,数组,函数等都需

Maven入门系列(二)--设置中央仓库的方法

原文地址:http://www.codeweblog.com/maven入门系列-二-设置中央仓库的方法/ Maven仓库放在我的文档里好吗?当然不好,重装一次电脑,意味着一切jar都要重新下载和发布. 下载的地址是中央仓库mvnrepository.com,当然,全球很多个仓库. 资源的坐标简称GVA 那么,现在如何修改maven的本地仓库路径呢? 关键在于maven文件夹的config下的settings.xml(E:\IDE\apache-maven-3.3.1\conf\settings

Java入门(二)——果然断更的都是要受惩罚的。。。

断更了一个多月,阅读量立马从100+跌落至10-,虽说不是很看重这个,毕竟只是当这个是自己的学习笔记,但有人看,有人评论,有人认同和批评的感觉还是很巴适的,尤其以前有过却又被剥夺的,惨兮兮的. 好好写吧. 现在开展的“业务”,一个是PHP,一个是Android开发. 前者偏向于三个方向,总结之前的(看书,敲代码实现),电商网站的开发,一些技能的实现: 后者起步阶段,一边Java学习,一边动手做东西出来,争取一周内有个交代吧先. 今天还比较坑一点,把昨天弄的卸载了,AS中的虚拟界面用不了,用哥们儿

DWR入门实例(二)

DWR(Direct Web Remoting) DWR is a Java library that enables Java on the server and JavaScript in a browser to interact and call each other as simply as possible. Dwr能让在服务器端的java代码和浏览器客户端的javascript代码尽可能简单的相互调用. DWR is Easy Ajax for Java!  官网:http://d

JSON入门之二:org.json的基本用法

廊坊的风一如既往的在窗外刮着,天地间肆意地飘洒,纵情在一刹那,为何现在只剩下风吹乱我的发,乱蓬蓬的,还是去超市逛逛吧,买吃的`(*∩_∩*)′,走进华联超市,热情的店员招呼着我,开始为我介绍,推荐各种各样商品,店员向我推荐了他们的会员卡,全场所有项目均八折,每逢节假日打五折,我心想那太划算了,而且他们总店,分店,加盟店都可以用,所以就办了张会员卡.今天我们的设计模式就从超市会员卡开始说起. 这个俨然就是我们设计模式中的组合模式----组合模式有时候又叫做部分-整体模式,它使我们树型结构的问题中,