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.versionangular.uppercaseangular.copyangular.forEachangular.toJson JSON.strigify()angular.fromJson JSON.parse()判断函数
angular.isArrayangular.isUndefinedangular.isStringangular.isObjectangular.isNumberangular.isElementangular.equalsng-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-clickng-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>angularjs 基础
原文地址：https://www.cnblogs.com/caijw/p/9064198.html