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作用是声明变量的作用，与js的var差不多的意思
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
AngularJS复习小结的更多相关文章
- 设计模式复习小结一(Strategy Pattern/Observer Pattern/Decorator Patter/Factory Pattern)
目录: 前言 1. Stratrgy Pattern 2. Observer Pattern 3. Decorator Pattern 4. Factory Pattern 4.1 FactoryPa ...
- AngularJS学习小结
在刚学习AngularJS的时候觉得好像挺简单的,看见老师每次用很少的代码就做出用源生代码或者JQuery要用多行代码才做出的效果的时候觉得好像思路很简单,也很好写就写出来了,但是等到我们自己做的时候 ...
- React复习小结（一）
一.React的发展 facebook在构建instagram网站的时候遇见两个问题: 1.数据绑定的时候,大量操作真实dom,性能成本太高 2.网站的数据流向太混乱,不好控制 于是facebook起 ...
- AngularJS复习------表单验证
在AngularJS中能够将HTML5表单验证功能同自己的验证指令结合起来使用,这里介绍使用的核心功能. 使用表单验证,首先要确保表单的每个控件都有name属性 如果想要屏蔽浏览器对表单的默认验证行为 ...
- AngularJS复习-----内置过滤器和内置服务
AngularJS中的内置服务(共30多个): $http 发送http请求,主要用于进行异步数据请求的功能实现,这个服务主要封装了XMLHttpRequest对象和JSONP数据访问模式来完成远程请 ...
- angularjs 学习小结
1.过滤器的使用 <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> ...
- html复习小结
border-radius可以设置百分比 百分之五十是圆形 class="class1 class2" 无序列表 <ul><li></li>&l ...
- 数位DP复习小结
转载请注明原文地址http://www.cnblogs.com/LadyLex/p/8490222.html 之前学数位dp的时候底子没打扎实 虚的要死 这次正好有时间……刷了刷之前没做的题目 感觉自 ...
- mysql查询语句复习小结
SQL查询语句基本语法: select 字段列表 from 表名|视图列表 [where 条件表达式1] [group by 属性名1 [having 条件表达式2]] [order by 属性名2 ...
随机推荐
- vue中非父子组件的传值bus的使用
非父子之间的组件传值,可以使用vuex.简单的状态管理,也可以用vue bus vue bus可以实现不同组件间.不同页面间的通信,比如我在A页面出发点击事件,要B页面发生变化,使用方法如下: 全局定 ...
- python编程中常见错误
python编程培训中常见错误最后,我想谈谈使用更多python函数(数据类型.函数.模块.类等)时可能遇到的问题.由于篇幅有限,我们试图将其简化,特别是一些高级概念.有关更多详细信息,请阅读学习py ...
- 一个SAP顾问的回忆：我过去很胖!
去年也是这个时候,SAP成都研究院体育界大神邓阳,曾经赏脸在Jerry这个公众号上赐文一篇,介绍了他和围绕在他身边的一群小伙伴们的体育故事:SAP成都研究院的体育故事 而今天文章的主角则是SAP成都研 ...
- 最简单的SAP云平台开发教程 - 如何开发UI5应用并运行在SAP云平台上
选择Services Catalog,根据关键字搜索到WebIDE服务,点击超链接打开WebIDE: 进入workspace,选择Git->Clone Repository: 从我的github ...
- 第五章、Django之模型层----多表查询
目录 第五章.Django之模型层----多表查询 一.一对多字段增删改查 1.增 2.查 3.改 4. 删除 二.多对多的增删改查 1. 增 2. 改 3. 删 三.ORM跨表查询 四.正反向的概念 ...
- Image Processing and Analysis_8_Edge Detection：Multiresolution edge detection techniques ——1995
此主要讨论图像处理与分析.虽然计算机视觉部分的有些内容比如特 征提取等也可以归结到图像分析中来,但鉴于它们与计算机视觉的紧密联系,以 及它们的出处,没有把它们纳入到图像处理与分析中来.同样,这里面也有 ...
- 发送短信——java
闲来无事研究一下调用第三方接口发送短信的技术 这一次我们使用阿里的短信服务 一.进行平台相关服务的注册和设置 下面请参照阿里的短信服务文档进行设置,只要按照文档步骤来差不多30分钟就能搞定服务注册: ...
- Linux学习笔记（二）Linux常用命令:权限、目录操作以及常见目录作用
一.Linux命令格式 命令 [选项] [参数] 注:(1)简化选项和完整选项 -a --all (2)当有多个选项是可以写在一起 -l -a 可以写为-la 二.权限 -rw-r--r--.&quo ...
- 图像处理---《Canny 边缘检测》
图像处理---<Canny 边缘检测> 很想系统的把图像处理之边缘检测部分详细的过一遍,对比一个各个算子的优良性能.时间紧,精力有限,现在只能走哪补哪,随手记. 有几个简单的场景,有需要, ...
- Airtest 支持的手机，系统等环境
据个人经验,Airtest 支持的以下设备会跑的比较666 Android 平台 华为荣耀9青春版 版本:8.0.0 型号:LLD-AL10 评价:自动化运行最6 华为 荣耀10青春版 版本:9.0. ...