AangularJS入门总结二

时间 2020-06-04

标签 aangularjs 入门总结繁體版

原文原文链接

双向数据绑定：在Mode(JS)中改变数据，而这些变更马上就会自动出如今View上，反之亦然。一方面能够作到model变化驱动了DOM中元素变化，另外一方面也能够作到DOM元素的变化也会影响到Model。
$scope：是一个把view（DOM元素）链接到controller上的对象。$scope是model,它提供一个绑定到DOM元素上的“执行上下文”；
$scope：实际就是一个JavaScript对象，controller和view均可以访问它，能够利用它在二者间传递信息；$scope 里，既存储数据，又存储将要运行在view上的函数；
$rootScope：每一个anguler应用都会有一个最顶层的scope，就是$rootScope，它对应着包含含有ng-app指令属性的那个dom元素；
module（模板）：
<html ng-app="mainApp"> 指定angular的做用域是在<html>标签之内部分; var mainApp= angular.module(mainApp, []);在js文件中调用angular对象的module方法来声明一个模块，模块的名字和ng-app的值对应。就可让angular运行起来了；php
ng-controller：这个指令给DOM元素建立了一个新的$scope 对象，并将这个$scope 对象包含进外层DOM元素的$scope 对象里。
全部scope都遵循原型继承，这意味着它们都能访问父scope们。对任何属性和方法，若是AngularJS在当前scope上找不到，就会到父 scope上去找，若是在父scope上也没找到，就会继续向上找，直到$rootScope 上。若是controller是多层嵌套的，就会从最里面一直往外找，知道最上层；有些指令属性能够选择性地建立一个独立的scope，让这个scope不继承它的父scope们；
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(){});
表达式: 表达式中不可使用循环语句、判断语句，事实上在模板中使用复杂的表达式也是一个不推荐的作法，这样视图与逻辑就混杂在一块儿了;
过滤器（filter）:　(九种) Angular内置了一些过滤器：currency(货币)、date(日期)、filter(子串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)；
过滤器使用方式：自定义过滤器，这个就强大了，能够知足任何要求的数据处理；
明白内置的filter的使用，以及如何定义一个filter。css
filter的两种使用方法：

　　　　　　1. 在模板中使用filterhtml

　　　　　　　　咱们能够直接在{{}}中使用filter，跟在表达式后面用 | 分割，语法以下：ajax

　　　　　　　　　　　　　　{{ expression | filter }} express

　　　　　　　　也能够多个filter连用，上一个filter的输出将做为下一个filter的输入：json

　　　　　　　　　　　　　　{{ expression | filter1 | filter2 | ... }}　　数组

　　　　　　　　filter能够接收参数，参数用 : 进行分割，以下：浏览器

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

　　　　　　　　除了对{{}}中的数据进行格式化，咱们还能够在指令中使用filter，例如先对数组array进行过滤处理，而后再循环输出：框架

　　　　　　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.指令： 指令能够用来建立自定义的标签。能够用来装饰元素或者操做DOM属性。能够做为标签、属性、注释和类名使用。

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

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

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

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

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

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

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

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

做为注释：

　　　　　　　　做为类名：<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

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

　　　　　　　　而后在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就行。其余的模板是咱们动态加载的，

　　　　　　就能够放心使用{{}}了。

　　　　自定义指令：（）

　　14. 服务：做用就是对外提供某个特定的功能，如消息服务，文件压缩服务等，是一个独立的模块；

　　　　　　系统内置的服务以$开头，系内置的指令以ng开头；

　　　　　　　定义服务的方式：

　　　　　　　　　　　　使用系统内置的$provide服务；

　　　　　　　　　　　　使用Module的factory方法；

　　　　　　　　　　　　使用Module的service方法。

　　　　　　　　　　使用这三种方式来作一个从远程获取数据的服务：

　　　　　　　　　　1）使用内置的$provide服务；

　　　　　　　　　　　　var mainApp=angular.module("mainApp",[],function($provide){

　　　　　　　　　　　　　　　　$provide.factory("getData",function(){

　　　　　　　　　　　　　　　　　　var data=json;

　　　　　　　　　　　　　　　　　　return data;

　　　　　　　　　　　　　　})

　　　　　　　　　　2) 使用factory方式：

　　　　　　　　　　　　mainApp.factory("getData",function(){

　　　　　　　　　　　　　　　　　　var data=json;

　　　　　　　　　　　　　　　　　　return data;

　　　　　　　　　　　　})

　　　　　　　　　3)使用service方式：

　　　　　　　　　　　　mainApp.service(getData,function(){

　　　　　　　　　　　　});

　　　　　　　　Module的service方法，没有return任何东西，由于service方法自己返回一个构造器，系统会自动使用new关键字来建立出一个对象。

　　　　　　　　因此在构造器函数内可使用this，这样调用该服务的地方即可以直接经过getData.属性名的方式来访问数据了；

自定义服务，将$http封装成jq方式的ajax提交方式：

　　　　　　　　　　 mainApp.factory("ajax",function($http){
       　　　　　　　　　　 return function(config){
                　　　　　　　　 if(config.type == "get"){
                  　　　　　　　　　    var param="?";
                     　　　　　　　　 for(var key in config.data){
                         　　　　　　　　 param+=key+"="+config.data[key]+"&";
                     　　　　　　　　 }
                     　　　　　　　　　　 $http.get(config.url+param).success(config.success);
                 　　　　　　　　 }else{
                     　　　　　　　　　　 $http.post(config.url,config.data).success(config.success);
                 　　　　　　　　　　　　 }
     　　　　　　　　　　　　   };
    　　　　　　　　　　　　});

　　　　　　　　　　使用：

　　　　　　　　　　regApp.controller("regconstructor",function($scope,$http,ajax,$location){

　　　　　　　　　　　　　　　　　　ajax({
                   　　　　　　　　　　　　　　　　url:"xxx.php",
                   　　　　　　　　　　　　　　　　 type:"get",
                 　　　　　　　　　　　　　　　　   data:{
                        　　　　　　　　　　　　　　　　username:$scope.usersname
                   　　　　　　　　　　　　　　　　　},
                  　　　　　　　　　　　　　　　　 success:function(data){
                      　　　　　　　　　　　　　　　　　　 if(data.mes == "0"){
                           　　　　　　　　　　　　　　　　　　　　 $scope.nameinfo="用户名已存在";
                           　　　　　　　　　　　　　　　　　　　　 $scope.namestyle={color:"red"};
                     　　　　　　　　　　　　　　　　　　   }
                          　　　　　　
                    　　　　　　　　　　　　　　　　　　　　}
               　　　　　　　　　　　　　　 });

　　　　　　　　　　 });

　　 15. 依赖注入DI:

　　　　　　　　例如：mainApp=controller("testDI",function($scope,$loaction){});

　　　　　　　　这里咱们只是声明了$scope,$loaction这两个服务，所需的其余代码，框架已经帮咱们注入了；

　　16. 路由：ajax的一个致命缺点就是会致使浏览器后退按钮失效；

　　 17. 动画效果：能够用CSS3或者JS实现，用JS实现须要用到其余的js库来支持，由于底层实现仍是靠其余js库，angular只是将它封装好，更容易使用；