angular javascript
全部用到的庫, 所有用的CDN：css
運行下面代碼html
<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>
運行下面代碼java
<!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>
運行下面代碼jquery
<!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>
運行下面代碼git
<!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>
運行下面代碼angularjs
<!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>
運行下面代碼github
<!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>
運行下面代碼web
<!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>
運行下面代碼chrome
<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>
運行下面代碼
<!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>
運行下面代碼
<!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>
運行下面代碼
<!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>
運行下面代碼
<!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"> $interval(fn, delay, [count], [invokeApply]); </p> </a> <a href="#" class="list-group-item"> <h4 class="list-group-item-heading">timeout</h4> <p class="list-group-item-text"> $timeout(fn, [delay], [invokeApply]); </p> </a> </div> <div class="progress"> <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"> 0% </div> </div> <button class="btn-default btn" ng-click="prog()"> start </button> </div> <script type="text/javascript"> app.controller("st", function($scope,$element,$interval) { var $el = $($element[0]).find(".progress-bar"); console.log(arguments); //使用angular.element選中的元素用find找不到東西; $scope.prog = function() { var df = $interval(function() { var val = parseInt($el.html())+4; if(val>=104) $interval.cancel(df); $el.html( val+"%" ).width(val+"%"); },100); console.log(df) //console.log(aa = $interval) }; }); </script> </div> </body> </html>