AngularJS
前端js插件，用于开发单一页面应用程序，诞生于2009年，后来被google收购
特性：MVC、模块系统、指令系统、依赖注入、双向数据绑定
Angular指令：
Ng-app 注册angular程序 声明区域内使用angular语法 标记范围越小越好
Ng-model 双向绑定，绑定了表单元素到scope变量中，如果没有则会创建它。
{{变量名}} 输出变量内容 {{name}} 使用这种方式屏幕会闪烁 先显示出代码
Ng-bind 单向绑定，绑定到普通元素中 输出变量内容 <p ng-bind=“name”></p>
Ng-init 定义初始值
{{表达式}} 可以再{{中编写表达式}} {{5+5}} {{first+””+”last}}
<div ng-app ng-init="name='david'">
<input ng-model="name"/>
{{name}}
<p ng-bind="name"></p>
{{5+5}}
</div>
Ng-controller 定义一个控制器
module 模块 参数1 app名字 参数2 所依赖的模块 返回创建的模块对象
var app = angular.module("myApp", []);
app.controller("myclr",function($scope) {
$scope.first = 2;
})
方式2： 为了解决压缩时会压缩$scope为$s
var app = angular.module(‘myApp’,[‘$scope’,function($s){ //不怕压缩
}]);
$scope 传递数据 从内向外找
Ng-click angular点击事件
<button ng-click="sayHi()">sayHi</button>
$scope.sayHi=function() {
$scope.writeString = 'Hello,I\'m' + $scope.name + ".";
}
$rootscope 可用作于整个应用中,是各个controller和$scope的桥梁，使用$rootscope定义的值 可以在各个controller中使用。
app.controller("myCTL", function ($scope, $rootScope) {
$scope.names = ["Emil", "Tobias", "Linus"];
$rootScope.ok = "ok";
});
可以安装一些插件来实时监控$scope当前的值
Ng-cloak 遮掩angular表达式 避免表达式先显示出来 再进行运算的尴尬效果
需要手动添加样式 先隐藏 执行后显示 [ng-cloak] {display: none;}
Ng-xxx是不标准的属性 可以写为data-ng-xxx 让他对html5有效
ng-bind-html 可以输出html代码 依赖ngSanitize指令
angular-sanitize.js
由于{{}} 和ng-bind 方式输出html时会导致转义 输出源码 所以才需要这个模块
引入改js文件后 在定义模块时 依赖一下 页面使用ng-bind-html绑定
<p ng-bind-html="name"></p>
var app = angular.module("myapp", ['ngSanitize']);
ng-repeat 循环输出
track by 如果有重复值 track by 一下唯一值$index 位置必须在表达式最后
<li ng-repeat="x in names">
{{x.firstname + "country:" + x.country}}
</li>
内置$index 0..leng-1 $first $last $even $odd 等函数
ng-class 判断是否符合表达式的值
ng-class="{red:x.startsWith('J')}"
ng-class-even ng-class-odd 设置遍历时基偶样式
ng-hide 符合条件隐藏
ng-show 符合条件显示 ng-show=“hour > 12"
ng-if 符合条件显示 <div ng-if="hour > 3">Hour > 3</div>
ng-href ng-href=“{{link}}"
ng-src 避免原生src自动请求机制 ng-src=“{{imgSrc}}"
ng-switch ng-switch-when ng-switch-default 分支结构 如果等于 默认
ng-checked 单选/复选是否选中
ng-disabled 是否禁用
ng-readonly 是否只读
ng-selected 是否选中
ng-blur 失去焦点
Ng-change 发生改变
Ng-copy 拷贝完成
Ng-click 单击
Ng-dbclick 双击
Ng-focus 得到焦点
Ng-submit 表单提交
ng-options json生成select下拉项 使用时可以person.name
<select ng-options=“person.name for person in persons"></select>
表单验证
novalidate 阻止html5当中自带的验证样式 如email
<form novalidate>
<input type=“email” /> 不会再出现自带的验证 红框
</form>
requied 验证不可为空 为空时返回true
Ng-minlength 验证最小值
ng-maxlength 验证最大值
ng-pattern 验证正则表达式
<input type=text required ng-minlength=“5” ng-pattern=”/%{a-zA-Z}$/"/>
$valid 验证通过返回true否则返回false
$invalid 验证失败返回true 否则返回false
$pristine 没有发生改变 true 修改过false
$dirty 修改过返回true 没修改过返回false
$error
对应的css
.ng-valid{对应的css} $valid
.ng-invalid{} $invalid
.pristine{}
.ng-dirty{}
<form name=“myForm”>
<input type=“email” name=“name" ng-model=“text” />
{{ myForm.name.$valid }}
</form>
angular工具方法
angular.bind(document,funcName,param1)(); //修改this指向 funcName方法的this就是document了
angular.copy(a,b); // a拷贝到b 完全拷贝
angular.extend(b,a); //把a赋值给b 继承操作 b同时拥有a
angular.isArray(); //判断是否为数组
Angular.jsDate(); //是否日期
angular.isDefined(); //是否存在
angular.isUndefined(); //
angular.isFunction(); //是否为函数
Angular.isNumber();//是否数字
angular.isObject(); //是否对象
angular.isString();//是否字符串
angular.isElement(); //是否为元素
angular.version() //当前版本
angular.equals(a,b); //判断两个元素是否相等
angular.forEach(values,function(value,i){//遍历
Value 每一个值 I 索引
});
angular.fromJson(str); 字符串->json对象
angular.toJson(obj) json对象->字符串
angular.module(‘myapp’,[]); //创建模块
angular自定义指令：
//定义指令 驼峰命令法
app.directive(’smartDirective’,function(){
return {
//template:’模板’,
restrict:’EACM’, //就全都包含了
replace:true, //是否替换
templateUrl:’temp.html’ //外部页面
Scope:true //独立作用域
}
});
//调用时
<smart-directive></smart-directive>
隔离作用域
app.directive(‘xx’,function(){
Scope:[], //隔离 获取name时只取1值
Controller:[‘$scope,function($scope){
$scope.name=‘1’;
});
});
restrict E元素使用 A属性使用 C类名使用 M注释使用
angular工具方法
angular.bind(document,funcName,param1)(); //修改this指向 funcName方法的this就是document了
angular.copy(a,b); // a拷贝到b 完全拷贝
angular.extend(b,a); //把a赋值给b 继承操作 b同时拥有a
angular.isArray(); //判断是否为数组
Angular.jsDate(); //是否日期
angular.isDefined(); //是否存在
angular.isUndefined(); //
angular.isFunction(); //是否为函数
Angular.isNumber();//是否数字
angular.isObject(); //是否对象
angular.isString();//是否字符串
angular.isElement(); //是否为元素
angular.version() //当前版本
angular.equals(a,b); //判断两个元素是否相等
angular.forEach(values,function(value,i){//遍历
Value 每一个值 I 索引
});
angular.fromJson(str); 字符串->json对象
angular.toJson(obj); json对象->字符串
angular.lowercase();
angular.uppercase();
angular.element(“#id").css(“background”,”red”); //类似jquery操作dom addClass data eq find hasClass append attr等等
angular过滤器：
{{ “lalala” | upperase }} //转换为大写
{{ “DSDSS” | lowercase }} //转换为小写
{{ 14913434134 | date:”yyyy-MM-dd HH:mm:ss " }} //格式化时间
{{ 12312.2323 | number:2 }} //保留小数
{{ 13323 | currency }} //货币显示 $13323.00
{{ 13323 | currency “￥”}} ￥13233.00
{{ [{‘name':’dd’},{‘name':’david’}] | filter : {’name’:’david'} }} //过滤
{{ “123123” | limitTo :6 }} //从前面开始取6位
{{ “dfsfasdf” | limitTo: -4 }} //从后面开始取4位
{{ | order by ‘id’ : true }} //倒序排序
{{ | order by ‘id’ }} //升序排序
{ | json }} 转换为json格式
在js中使用过滤器 将$filter 注入到控制器中
$filter(‘uppercase’)(‘hello’) $filter(‘number’)(‘12312.123’,3) //保留3位小数
自定义过滤器
Var app = angular.module(‘myapp’,function (){
app.filter(‘filterName',function(str,num){
console.log(num);
Return str.chatAt(0).toUppercase()+str.substring(1);
});
});
{{ name | filterName : 2 }}
angular服务：
$scope.$watch 监控元素 当监控的值发生变化时触发函数
app.controller("mycontrol",function($scope) {
$scope.$watch("userName",function(now,old) {
console.log("now:" + now);
console.log("old：" + old);
});
});
$scope.$apply //在原生js中监听数据是否有变化
$timeout //多少毫秒后执行
$timeout(function(){
$scope.name=‘2秒后执行'
},2000);
$timeout.cancel() //取消及时 重新计时
$interval 每过多少毫秒执行一次
$location
- absUrl( )：只读；返回url，带有所有的片段。
- hash( )：读、写；当带有参数时，返回哈希碎片；当在带有参数的情况下，改变哈希碎片时，返回$location。
- host( )：只读；返回url中的主机路径。
- path( )：读、写；当没有任何参数时，返回当前url的路径；当带有参数时，改变路径，并返回$location。（返回的路径永远会带有/）
- port( )：只读；返回当前路径的端口号。
- protocol( )：只读；返回当前url的协议。
- replace( )：如果被调用，就会用改变后的URL直接替换浏览器中的历史记录，而不是在历史记录中新建一条信息，这样可以阻止『后退』。
- search( )：读、写；当不带参数调用的时候，以对象形式返回当前url的搜索部分。
- url( )：读、写；当不带参数时，返回url；当带有参数时，返回$location。
- $locationChangeStart：在URL改变前发生。这种改变可以通过调用事件的preventDefault方法为阻止。
- $locationChangeSuccess：当URL改变后发生。
$anchorScroll 锚点跳转
$cacheFactory
info() //查看缓存信息
put() //添加缓存
get() //获取缓存
remove() //删除
var cache = $cacheFactory(‘myCache’,{capacity:2} //可以限制长度
$log 等同console.log()
$interpolate 插值服务
文本框中输入 {{name}} 表达式等页面执行
$http get post请求
angular.module(‘myapp’,[]).controller(‘myctl’,[‘$scope’,’$http’,function($scope,$http){
$http({
method:’get’, //JSONP,POST
url:’xxx.php'
}).success(function(data,state,headers,config){
//成功回调
}).error(function(data){
//失败
});
//简写
$http.get(‘url’).success(function(){});
});
自定义服务
//provider
app.provider(‘myService’,function(){
return {
$get:function(){
return {
name:’david’,
sayHi:function(){
return this.name + “ hi “;
}
}
}
}
})
//内部会调用provider 简写
app.factory(‘Data’,function(){ return {msg:’来自factory’}});
.controller(function($scope,Data){});
angular路由：
//安装
npm install angular-route —save
//引入 依赖
var app = angular.module(‘myapp’,[’ngRoute’]);
//配置路由规则
app.config([‘routeProvider’,function($routeProvider){
$routeProvider.when(‘/a’,{templateUrl:''})
.when(‘/b’,{template:''})
.when(‘/c’,{})
.otherwise({redirecTo:’/a’}) //defualt
}]);
<a href=‘#a’ >a</a>
<a ng-click=“$location.path(‘a’)”>a</a>
ngAnimate 动画效果
