angular
所有用到的库, 全部用的CDN：
<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script> <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script> <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script>
.angular的数据绑定实例,这个是最基础的,angular的所有枝叶全部从这里开始:.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>angular</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script> <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script> <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script> </head> <body ng-app="app"> <script type="text/javascript"> var app = angular.module("app",[]); </script> <div class="panel panel-default"> <div class="panel-heading"> angular最强大的东西,数据的绑定binding </div> <div class="panel-body"> <div id="bind" ng-controller="bf"> <input type="text" ng-model="data" /> {{data}} <script> app.controller("bf", function($scope) { $scope.data = "testData"; //$scope.$apply(); }); </script> </div> </div> </div> </body> </html>
通过angular,展示数组对应的数据;.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>angular</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script> <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script> <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script> </head> <body ng-app="app"> <script type="text/javascript"> var app = angular.module("app",[]); </script> <div class="panel panel-default"> <div class="panel-heading"> 通过angular,展示数组对应的数据; </div> <div class="panel-body"> <div id="arr-bind" ng-app="arr-app" ng-controller="arrCon"> <style> .s{ color:#f00; } li{ cursor: pointer; } </style> <ul> <li ng-repeat="i in lists" ng-click="bered($index)" ng-class="{s : $index == flag}"> {{i.name}}----{{i.age}} </li> </ul> <script> //angular.module("arr-app", []); function arrCon($scope) { $scope.flag = 0; $scope.bered = function(i) { $scope.flag = i; }; $scope.lists = [ {name : "hehe", age:10}, { name : "xx", age : 20 }, { name : "yy", age : 2 }, { name : "jj", age : 220 } ] }; </script> </div> </div> </div> </body> </html>
.数据过滤器的DEMO：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>angular</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script> <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script> <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script> </head> <body ng-app="app"> <script type="text/javascript"> var app = angular.module("app",[]); </script> <div class="panel panel-default"> <div class="panel-heading"> 数据过滤器; </div> <div class="panel-body" ng-controller="filte"> {{sourCode}} <br> {{sourCode | up}} </div> <script> function filte($scope) { $scope.sourCode = "hehe lala dudu oo zz"; }; app.filter("up" ,function() { return function(ipt) { return ipt.replace(/ (\w)/g,function($0,$1) { return " "+$1.toUpperCase(); }); } }); </script> </div> </body> </html>
.factory工厂, $provider, service等等都是一样样的, 不要感觉很难, 其实就是看出一个数据模型或者实例就好了;：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>angular</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script> <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script> <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script> </head> <body ng-app="app"> <script type="text/javascript"> var app = angular.module("app",[]); </script> <div id="factory" class="panel panel-default"> <div class="panel-heading"> angular中的factory就相当于一个公用的实例方法,可以理解为一个多个控制器都可以用的函数; </div> <div class="panel-body" ng-controller="factory"> {{json}} <script> app.factory("ff", function() { return { "noting" : "json" }; }); app.controller("factory", function($scope, ff) { $scope.json = ff; }); </script> </div> </div> <div class="panel panel-default"> <div class="panel-title"> angular的指令; </div> <div class="panel-body"> <heh>do you content for?</heh> <script> app.directive("heh", function() { return { restrict : "AE", replace : true, transclude : true, template : '<div> <button class="btn-danger" ng-transclude></button></div>' }; }) </script> </div> </div></body> </html>
.ng-switch指令的使用(这个跟模板很想的,就是我们常见的点击隐藏和显示Tab插件的angular首先):：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>angular</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script> <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script> <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script> </head> <body ng-app="app"> <script type="text/javascript"> var app = angular.module("app",[]); </script> <div class="panel panel-default"> <div class="panel-heading"> ng-switch的使用 </div> <div class="panel-body" ng-controller="sw"> <div ng-init="a=2"> <ul ng-switch on="a"> <li ng-switch-when="1">1</li> <li ng-switch-when="2">2</li> <li ng-switch-default>other</li> </ul> </div> <div> <button ng-click="a=1" class="btn btn-primary">test</button> <button ng-click="a=2" class="btn btn-info">test</button> <button ng-click="a=3" class="btn btn-warning">test</button> </div> </div> <script type="text/javascript"> app.controller("sw", function($scope) { }); </script> </div> </body> </html>
ng-src和ng-href;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>angular</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script> <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script> <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script> </head> <body ng-app="app"> <script type="text/javascript"> var app = angular.module("app",[]); </script> <div class="panel panel-default"> <div class="panel-heading"> ng-src和ng-href的使用(如果使用src或者href的话,HTML初始化的时候就会加载,肯定是不行的) </div> <div class="panel-body" ng-controller="srcCon"> <a ng-href="{{logo}}" > <img ng-src="{{logo}}" /> </a> </div> <script type="text/javascript"> app.controller("srcCon", function($scope) { $scope.logo = "http://www.mainbo.com/templets/images/logo.gif"; }); </script> </div> </body> </html>
如何操作页面的样式,这个直接改绑定的数据模型就好了：
<div class="panel panel-default">
<div class="panel-heading">
angular对样式进行操作;(jQ是手动选择元素对元素样式进行操作,angular提供了一种更屌的方法,把元素的属性赋值给一个变量,你只要改变这个变量即可)
</div>
<div class="panel-body">
<hehe id="wh" ng-style="{width: w + 'px', height: h + 'px', backgroundColor: '#364'}">
hehe--o(^▽^)o哇;
</hehe>
</div>
<script type="text/javascript">
app.directive("hehe", function() {
function compile() {
};
return {
link : function($scope, $element) {
var obj = angular.element($element);
//obj.find不好用;
var add = obj[0].getElementsByClassName("add")[0];
var reduce = obj[0].getElementsByClassName("reduce")[0];
angular.element(add).bind("click", function(){
$scope.h = $scope.h+10;
apply();
})
angular.element(reduce).bind("click", function(){
$scope.h = $scope.h-10;
apply();
});
function apply() {
$scope.$apply();
}
return compile;
},
controller : function($scope) {
$scope.w = 200;
$scope.h = 50;
//$scope.$apply();
},
restrict: 'AE',
replace : true,
scope : "=ng-style",
transclude : true,
template : '<div><div ng-transclude></div><button class="btn btn-default add">+</button><button class="btn btn-default reduce">-</button></div>'
}
})
</script>
</div>
angular中的模板如何使用,这个要配合路由器使用比较叼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>angular</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script> <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script> <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script> </head> <body ng-app="app"> <script type="text/javascript"> var app = angular.module("app",[]); </script> <div class="panel panel-default"> <div class="panel-heading"> 使用模板 </div> <div class="panel-body" ng-controller="ngTpl"> <!---这个type要声明准确--> <script type="text/ng-template" id="tpl"> {{ver}} </script> <!---tpl是一个定值不是变量，要给变量要在scope中进行定义----> <div ng-include src="'tpl'"></div> <div class="well"> <button ng-click="chan()">change</button> </div> </div> <script type="text/javascript"> app.controller("ngTpl", function($scope) { function hehe(str) { str = _.shuffle(str); return str.join("") }; $scope.ver = "var——ver--heehe"; $scope.chan = function() { $scope.ver = hehe( $scope.ver ); }; }); </script> </div> </body> </html>
如何使用$scope.$watch实时改变绑定界面的模板:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>angular</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script> <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script> <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script> </head> <body ng-app="app"> <script type="text/javascript"> var app = angular.module("app",[]); </script> <div class="panel panel-default"> <div class="panel-heading"> <span class="label label-danger">update</span>angular的通知数据更新三种方式$scope.$digest(),$scope.$apply(),以及通过$scope.$watch监听进行更新; </div> <div class="panel-body" ng-controller="apply"> {{hehe}} <input type="text" ng-model="m0" /> <div class="well"> the value set by $scope.$watch ==>> {{wat}} </div> <br> <button ng-click="up()" class="btn btn-default"> applay; </button> </div> <script type="text/javascript"> app.controller("apply", function($scope) { $scope.hehe = "lll________xxx"; $scope.m0 = 1; ss = $scope; $scope.up = function() { $scope.hehe = $scope.m0; //可以,但是给了提示的报错, 谁知道为甚毛? //$scope.$apply(); $scope.$digest(); }; //给$scope.m0变量是无效的; $scope.$watch("m0", function(va) { $scope.wat = va; }) }); </script> </div> </body> </html>
angular中自己定义的工具方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>angular</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script> <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script> <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script> </head> <body ng-app="app"> <script type="text/javascript"> var app = angular.module("app",[]); </script> <div class="panel panel-default"> <div class="panel-heading"> angular中的工具方法列表 </div> <div class="panel-body"> <ul class="nav nav-pills nav-stacked"> <li role="presentation"><a href="###">angular.bind</a></li> <li role="presentation"><a href="###">angular.bootstrap</a></li> <li role="presentation"><a href="###">angular.copy</a></li> <li role="presentation"><a href="###">angular.element</a></li> <li role="presentation"><a href="###">angular.equals</a></li> <li role="presentation"><a href="###">angular.extend</a></li> <li role="presentation"><a href="###">angular.forEach</a></li> <li role="presentation"><a href="###">angular.fromJson</a></li> <li role="presentation"><a href="###">angular.identity</a></li> <li role="presentation"><a href="###">angular.injector</a></li> <li role="presentation"><a href="###">angular.isArray</a></li> <li role="presentation"><a href="###">angular.isDate</a></li> <li role="presentation"><a href="###">angular.isDefined</a></li> <li role="presentation"><a href="###">angular.isElement</a></li> <li role="presentation"><a href="###">angular.isFunction</a></li> <li role="presentation"><a href="###">angular.isNumber</a></li> <li role="presentation"><a href="###">angular.isObject</a></li> <li role="presentation"><a href="###">angular.isString</a></li> <li role="presentation"><a href="###">angular.isUndefined</a></li> <li role="presentation"><a href="###">angular.lowercase</a></li> <li role="presentation"><a href="###">angular.module</a></li> <li role="presentation"><a href="###">angular.noop</a></li> <li role="presentation"><a href="###">angular.reloadWithDebugInfo</a></li> <li role="presentation"><a href="###">angular.toJson</a></li> <li role="presentation"><a href="###">angular.uppercase</a></li> </ul > <div class="well"> 这些工具方法跟其他库差不多; angular.element是anguarLite选择元素的小JQ; <br> angular.module是模块元素的方法; </div> </div> </div> </body> </html>
ng-transclude的使用(这个是官方的案例)，代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>angular</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script> <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script> <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script> </head> <body ng-app="app"> <script type="text/javascript"> var app = angular.module("app",[]); </script> <div class="panel panel-default"> <div class="panel-heading"> ng-transclude的使用(这个是官方的案例): </div> <div class="panel-body" ng-controller="ExampleController"> <div> <input ng-model="title"><br> <textarea ng-model="text"></textarea> <br/> <pane title="{{title}}">{{text}}</pane> </div> </div> <script type="text/javascript"> app.directive('pane', function(){ return { restrict: 'E', transclude: true, scope: { title:'@' }, template: '<div style="border: 1px solid black;">' + '<div style="background-color: gray">{{title}}</div>' + '<ng-transclude></ng-transclude>' + '</div>' }; }) .controller('ExampleController', ['$scope', function($scope) { $scope.title = 'Lorem Ipsum'; $scope.text = 'Neque porro quisquam est qui dolorem ipsum quia dolor...'; }]); </script> </div> </body> </html>
一下验证邮箱准确性的例子:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>angular</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script> <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script> <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script> </head> <body ng-app="app"> <script type="text/javascript"> var app = angular.module("app",[]); </script> <div class="panel panel-default"> <div class="panel-heading"> ngPaste以及ngMouseup和ngKeyup,ngModelOptions....等方法参考官方的使用,要用查API就好了,(官方的要FQ哦;) </div> <script src="https://yearofmoo.github.io/ngMessages/angular-messages.js"></script> <div class="panel-body" ng-controller="fromvaild"> 如果不用ng-message组件的错误提示如下; <form name="userForm"> <div class="field"> <label for="emailAddress">Enter your email address:</label> <input type="email" name="emailAddress" ng-model="data.email" required /> <!-- this stuff is WAY too complex --> <div ng-if="userForm.emailAddress.$error.required" class="error"> You forgot to enter your email address... </div> <div ng-if="!userForm.emailAddress.$error.required && userForm.emailAddress.$error.email" class="error"> You did not enter your email address correctly... </div> </div> <input type="submit" /> </form> <br> <a href="https://yearofmoo.github.io/ngMessages/">老外写的DEMO</a> </div> <script type="text/javascript"> app.controller("fromvaild", function($scope) { //$scope.myField.$error = { minlength : true, required : false }; }) </script> </div> </body> </html>
setTimeout和setInterval都是经过angular包装过的，返回的是延迟对象的实例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>angular</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.js"></script> <script src="http://cdn.bootcss.com/angular.js/1.3.0-beta.13/angular.min.js"></script> <link href="http://cdn.bootcss.com/bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/underscore.js/1.7.0/underscore-min.js" type="text/javascript"></script> </head> <body ng-app="app"> <script type="text/javascript"> var app = angular.module("app",[]); </script> <div class="panel panel-default"> <div class="panel-heading"> $timeout和$interval,这两个服务; </div> <div class="panel-body" ng-controller="st"> <div class="list-group"> <a href="#" class="list-group-item active"> <h4 class="list-group-item-heading">setInterval</h4> <p class="list-group-item-text">