angularjs 基础
angularjs 学习
<div ng-app="hd" ng-controller="ctrl">
{{name}}
</div>
var m = angular.module('hd', []);
m.controller('ctrl', ['$scope', function($scope){
$scope.name = 'cjw';
}])
ng-cloak 避免闪屏幕
ng-bind和{{}}
<h3 ng-bind="name"></h3>
{{name}}
双向绑定
<div ng-app="cjw" ng-controller="ctrl">
<input type="text" ng-model="name">
{{name}}
</div>
<script>
var m = angular.module('cjw', []);
m.controller('ctrl', ['$scope', function($scope){
$scope.name = 'cjw';
}])
</script>
radio
<input type="radio" ng-model="staus" ng-value="1">开启
<input type="radio" ng-model="staus" ng-value="0">关闭
checkbox
<input type="checkbox" ng-model="video" ng-true-value="1" ng-false-value="0">
select
<select name="" id="" ng-model="city" ng-options="v.vlaue as v.name for v in data"></select>
global 函数
angular.version
angular.uppercase
angular.copy
angular.forEach
angular.toJson JSON.strigify()
angular.fromJson JSON.parse()
判断函数
angular.isArray
angular.isUndefined
angular.isString
angular.isObject
angular.isNumber
angular.isElement
angular.equals
ng-disabled 不可点击
ng-repeat ng-class ng-class-odd ng-class-even
<ul ng-repeat="(k, v) in data">
<li>{{v.name}}</li>
<li ng-class="{blue: v.id==1, orange: v.id==2}">{{v.url}}</li>
<li>{{k}}</li>
</ul>
ng-model-options
<input type="text" ng-model="title" ng-model-options="{updateOn:'default blur',debounce:{default:2000,blur:0}}">
{{title}}
全选 反选
<table>
<tr>
<td>全选 <input type="checkbox" ng-model="all"> </td>
<td></td>
<td></td>
</tr>
<tr ng-repeat="v in data">
<td><input type="checkbox" ng-checked="all"> </td></td>
<td>{{v.name}}</td>
<td>{{}}</td>
</tr>
</table>
ng-class
<li ng-class="{blue: v.id==1, orange: v.id==2}">{{v.url}}</li>
ng-style
<span ng-style="{color:color,fontSize:size+'px'}">后盾人</span>
事件
ng-click
ng-mouseover
过滤器
currency number
{{price|currency:'￥':1}}
{{price|number:2}}
lowercase uppercase
{{name|lowercase}}
{{name|uppercase|lowercase}}
limitTo
{{data|limitTo:3:1}}
date
{{time|date:'yyyy年MM月dd日 HH时mm分ss秒'}}
{{data|orderBy:'click':true}}
{{data|filter:'后盾人':true}}
$scope.data = $filter('orderBy')($scope.data,'id',true);
$scope.status = {id: false, click: false, title: false};
$scope.orderBy = function (field) {
$scope.status[field]=!$scope.status[field];
$scope.data = $filter('orderBy')($scope.data, field, $scope.status[field]);
}
$watch
$scope.$watch('news', function (n, o) {
$scope.error = n.title.length>3?'标题长度输入错误':'';
}, true);
指令
m.directive('hdcms', [function () {
return {
restrict: 'AEC',//a attr e element c class
template: '指令'
}
}]);
<div hd-cms color="orange">你好</div>
m.directive('hdCms', [function(){
return {
restrict: 'AEC',
template: function(elem, attr){
return "<span style='color:"+attr['color']+"'>"+$(elem).html()+"</span>";
}
}
}])
replace: false//是否替换本来节点
m.directive('hdCms', [function () {
return {
restrict: 'EA',//a attr e element c class
// replace: true,
// template:'abc'
templateUrl: '../view/hdcms.html'
}
}]);
scope: {color:'@hdColor'}
scope: {color:'=hdColor'}
scope: {color: '&hdColor'}
@
单项绑定的前缀标识符
使用方法：在元素中使用属性，好比这样<div my-directive my-name="{{name}}"></div>，注意，属性的名字要用-将两个单词连接，因为是数据的单项绑定所以要通过使用{{}}来绑定数据。
=
双向数据绑定前缀标识符
使用方法：在元素中使用属性，好比这样<div my-directive age="age"></div>,注意，数据的双向绑定要通过=前缀标识符实现，所以不可以使用{{}}。
<
单项绑定的前缀标识符，和=使用类似。不同的是改变内部scope不会反映到parent的scope
使用方法：在元素中使用属性，好比这样<my-component my-attr="parentModel">,directive的定义scope: { localModel:'<myAttr' }。代码
&
绑定函数方法的前缀标识符
使用方法：在元素中使用属性，好比这样<div my-directive change-my-age="changeAge()"></div>，注意，属性的名字要用-将多个个单词连接。
m.directive('hdCms', [function () {
return {
restrict: 'E',
replace: true,
templateUrl: '../view/57.html',
controller: ['$scope', function ($scope) {
$scope.data = [
{id: 1, name: '后盾人'},
{id: 1, name: 'hdcms'},
{id: 1, name: 'hdphp'}
];
}]
}
}]);
$interval $interval.cancel(id);
$scope.getClientHeight=function(){
$scope.clientHeight = $window.document.body.clientHeight;
}
$scope.getScrollHeight=function(){
$scope.scrollHeight = $window.document.body.scrollHeight;
}
$scope.prompt=function(){
$scope.content = $window.prompt('请输入内容');
}
m.controller('ctrl1', ['$scope', '$cacheFactory', function ($scope, $cacheFactory) {
var obj = $cacheFactory('hdphp');
//sessionStorage localStorage
obj.put('web', {name: '后盾人', url: 'houdunren.com'});
obj.put('user', {name: '向军', mail: '2300071698@qq.com'});
$scope.data = obj.get('web').name;
//删除缓存数据
// obj.remove('web');
// obj.removeAll();
// obj.destroy();
// console.log(obj.get('web'));
// console.log(obj.get('user'));
}]);
m.controller('ctrl2', ['$scope', '$cacheFactory', function ($scope, $cacheFactory) {
var obj = $cacheFactory.get('hdphp');
$scope.data = obj.get('web').name;
}]);
$http
m.controller('ctrl', ['$scope', '$http', function ($scope, $http) {
$http({
method:'get',
url:'1.php'
}).then(function(response){
//成功时执行
console.log(response);
$scope.data = response.data;
},function(response){
//失败时执行 hdphp
console.log(response);
});
}]);
dao层：就是Model层，在后台时，这一层的作用，就要是写与数据库交互数据的一层，在angularJS里就主要是写ajax的。
service层：主查写逻辑代码的，但在angularJS里也可以持久化数据（充当数据容器），以供不同的controller高用。
controller层：即控制层，在angularJS里就是写控制器的。控制器里尽量不要写那些不必要的逻辑，尽量写在service层里。
所以，就有了创建自定义服务的三种方式。
var app = angular.module('myApp', []);
app.factory('myFactory', function($http,$q) {
var service = {};
service.name = "张三";
//请求数据
service.getData = function(){
var d = $q.defer();
$http.get("url")//读取数据的函数。
.success(function(response) {
d.resolve(response);
})
.error(function(){
d.reject("error");
});
return d.promise;
}
return service;
});
app.controller('myCtrl', function($scope, myFactory) {
//alert(myFactory.name);
myFactory.getData().then(function(data){
console.log(data);//正确时走这儿
},function(data){
alert(data)//错误时走这儿
});;
});
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{r}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.service('myService', function($http,$q) {
this.name = "service";
this.myFunc = function (x) {
return x.toString(16);//转16进制
}
this.getData = function(){
var d = $q.defer();
$http.get("ursl")//读取数据的函数。
.success(function(response) {
d.resolve(response);
})
.error(function(){
alert(0)
d.reject("error");
});
return d.promise;
}
});
app.controller('myCtrl', function($scope, myService) {
$scope.r = myService.myFunc(255);
myService.getData().then(function(data){
console.log(data);//正确时走这儿
},function(data){
alert(data)//错误时走这儿
});
});
</script>
