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运行起来了；
- 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。
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.指令： 指令可以用来创建自定义的标签。可以用来装饰元素或者操作DOM属性。可以作为标签、属性、注释和类名使用。
模板中可以使用的东西有以下四种：
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就行。其他的模板是我们动态加载的，
就可以放心使用{{}}了。
自定义指令： （）
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只是将它封装好，更容易使用；
AangularJS入门总结二的更多相关文章
- 无废话ExtJs 入门教程二十一[继承：Extend]
无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...
- 无废话ExtJs 入门教程二十[数据交互：AJAX]
无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
- Bootstrap入门（二）栅格
Bootstrap入门(二)栅格 Bootstrap入门(二)栅格 全局CSS样式--栅格 先引入本地的CSS文件(根据自己的文件夹,有不同的引入地址,我是放在一个新建的名为css的文件夹中) con ...
- Android工程师入门（二）——不忙不累怎么睡。。
安卓开发迫在眉睫,这周入个门吧! Android工程师入门(二) 四.在界面中显示图片 ImageView 是显示图片的一个控件. --属性 src——内容图片: background——背景图片/背 ...
- Java入门（二）——果然断更的都是要受惩罚的。。。
断更了一个多月,阅读量立马从100+跌落至10-,虽说不是很看重这个,毕竟只是当这个是自己的学习笔记,但有人看,有人评论,有人认同和批评的感觉还是很巴适的,尤其以前有过却又被剥夺的,惨兮兮的. 好好写 ...
- 无废话ExtJs 入门教程二[Hello World]
无废话ExtJs 入门教程二[Hello World] extjs技术交流,欢迎加群(201926085) 我们在学校里学习任何一门语言都是从"Hello World"开始,这里我 ...
- Maven入门系列(二)--设置中央仓库的方法
原文地址:http://www.codeweblog.com/maven入门系列-二-设置中央仓库的方法/ Maven仓库放在我的文档里好吗?当然不好,重装一次电脑,意味着一切jar都要重新下载和发布 ...
- Java NIO入门（二）：缓冲区内部细节
Java NIO 入门(二)缓冲区内部细节 概述 本文将介绍 NIO 中两个重要的缓冲区组件:状态变量和访问方法 (accessor). 状态变量是前一文中提到的"内部统计机制"的 ...
- ReactJS入门学习二
ReactJS入门学习二 阅读目录 React的背景和基本原理 理解React.render() 什么是JSX? 为什么要使用JSX? JSX的语法 如何在JSX中如何使用事件 如何在JSX中如何使用 ...
随机推荐
- Linux运维工程师需要掌握什么才能胜任工作呢
万丈高楼平地起,所有一切的高深的技术都离不开最基本的技术,那么作为运维工程师的你,什么是最基本的技术呢,毫无疑问是Linux,Linux 是你所有一切技术的根源,试想一下如果你连基础的操作命令都不知道 ...
- U启动安装原版Win7系统教程
1.制作u启动u盘启动盘2.下载原版win7系统镜像并存入u盘启动盘3.硬盘模式更改为ahci模式 第一步: 将准备好的u启动u盘启动盘插在电脑usb接口上,然后重启电脑,在出现开机画面时通过u盘启动 ...
- asp.net中HttpModule扩展的浅析
在asp.net中,我们可以使用HttpModule扩展自己的相关业务.可以在HttpApplication的19个管道事件中注入我们自己的业务逻辑代码. 闲话不说,代码先上. 一.新建网站项目 我们 ...
- vue安装与配置
直接引入 <script src="https://unpkg.com/vue"></script> 用npm安装 $ npm install vue ...
- uitableView group模式下的间距问题
我么在使用group模式定义tableview的时候,系统默认是会有head和foot的间距的,来区分我们不同的group:在具体使用的时候又时候我们不需要这个间距.我们可以重新赋值这些间距来达到我们 ...
- Linux7 下重新安装YUM
所有操作均在ROOT用户下,系统版本是Linux7.0 X86_64: 一.删除原有YUM # rpm -aq|grep yum|xargs rpm -e --nodeps 二.下载yum,注意自己的 ...
- SharePoint REST API - REST请求导航的数据结构
博客地址:http://blog.csdn.net/FoxDave 从一个既定的URL获取其他SharePoint资源 当你用SharePoint REST服务进行开发的时候,你经常会从指定的一个 ...
- tf.trainable_variables() and tf.all_variables()
tf.trainable_variables() 返回的是 所有需要训练的变量列表 tf.all_variables() 返回的是 所有变量的列表 v = tf.Variable(0, name=' ...
- 究竟 javascript 错误处理有哪些类型？
有时候,在自己封装的工具函数中,不传参或传入了错误类型的参数,也要适当的抛出一些错误以示警告:使用框架不正常情况下也会抛出错误,如果对错误一无所知,便无从下手调试.综合上述,了解错误的处理机制是多么必 ...
- 解决Could not open Hibernate Session for transaction; nested exception is java.lang.NoClassDefFoundError: org/hibernate/engine/transaction/spi/TransactionContext
我使用的是5.2.8的hibernate的jar包,运行的时候却报错Could not open Hibernate Session for transaction; nested exception ...