angularJS 入门基础

　　angular 　　

　　所有用到的库, 全部用的CDN：

复制代码代码如下:

　　.angular的数据绑定实例,这个是最基础的,angular的所有枝叶全部从这里开始:.

复制代码代码如下:

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<title>angular</title>

　　</head>

　　var app = angular.module("app",[]);

　　</script>

　　angular最强大的东西,数据的绑定binding

　　</div>

　　app.controller("bf", function($scope) {

　　$scope.data = "testData";

　　//$scope.$apply();

　　});

　　</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">

　　<head>

　　<title>angular</title>

　　</head>

　　var app = angular.module("app",[]);

　　</script>

　　通过angular,展示数组对应的数据;

　　</div>

　　<style>

　　.s{

　　color:#f00;

　　}

　　li{

　　cursor: pointer;

　　}

　　</style>

　　<ul>

　　{{i.name}}----{{i.age}}

　　</li>

　　</ul>

　　//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>

　　</body>

　　</html>

　　.数据过滤器的DEMO：

复制代码代码如下:

　　<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

　　<head>

　　<title>angular</title>

　　</head>

　　var app = angular.module("app",[]);

　　</script>

　　数据过滤器;

　　</div>

　　<br>

　　</div>

　　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">

　　<head>

　　<title>angular</title>

　　</head>

　　var app = angular.module("app",[]);

　　</script>

　　angular中的factory就相当于一个公用的实例方法,可以理解为一个多个控制器都可以用的函数;

　　</div>

　　app.factory("ff", function() {

　　return {

　　"noting" : "json"

　　};

　　});

　　app.controller("factory", function($scope, ff) {

　　$scope.json = ff;

　　});

　　</script>

　　</div>

　　angular的指令;

　　</div>

　　<heh>do you content for?</heh>

　　app.directive("heh", function() {

　　return {

　　restrict : "AE",

　　replace : true,

　　transclude : true,

　　template : '<div> <button class="btn-danger" ng-transclude></button></div>'

　　};

　　})

　　</script>

　　</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">

　　<head>

　　<title>angular</title>

　　</head>

　　var app = angular.module("app",[]);

　　</script>

　　ng-switch的使用

　　</div>

　　<li ng-switch-default>other</li>

　　</ul>

　　</div>

　　<div>

　　</div>

　　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">

　　<head>

　　<title>angular</title>

　　</head>

　　var app = angular.module("app",[]);

　　</script>

　　ng-src和ng-href的使用(如果使用src或者href的话,HTML初始化的时候就会加载,肯定是不行的)

　　</div>

　　</a>

　　</div>

　　app.controller("srcCon", function($scope) {

　　$scope.logo = "http://www.mainbo.com/templets/images/logo.gif";

　　});

　　</script>

　　</div>

　　</body>

　　</html>

　　如何操作页面的样式,这个直接改绑定的数据模型就好了：

复制代码代码如下:

　　angular对样式进行操作;(jQ是手动选择元素对元素样式进行操作,angular提供了一种更屌的方法,把元素的属性赋值给一个变量,你只要改变这个变量即可)

　　</div>

　　hehe--o(^▽^)o哇;

　　</hehe>

　　</div>

　　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">

　　<head>

　　<title>angular</title>

　　</head>

　　var app = angular.module("app",[]);

　　</script>

　　使用模板

　　</div>

　　</script>

　　<button ng-click="chan()">change</button>

　　</div>

　　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">

　　<head>

　　<title>angular</title>

　　</head>

　　var app = angular.module("app",[]);

　　</script>

　　<span class="label label-danger">update</span>angular的通知数据更新三种方式$scope.$digest(),$scope.$apply(),以及通过$scope.$watch监听进行更新;

　　</div>

　　the value set by $scope.$watch ==>> {{wat}}

　　</div>

　　<br>

　　applay;

　　</button>

　　</div>

　　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">

　　<head>

　　<title>angular</title>

　　</head>

　　var app = angular.module("app",[]);

　　</script>

　　angular中的工具方法列表

　　</div>

　　<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 >

　　这些工具方法跟其他库差不多;

　　angular.element是anguarLite选择元素的小JQ;

　　<br>

　　angular.module是模块元素的方法;

　　</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">

　　<head>

　　<title>angular</title>

　　</head>

　　var app = angular.module("app",[]);

　　</script>

　　ng-transclude的使用(这个是官方的案例):

　　</div>

　　<div>

　　</div>

　　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">

　　<head>

　　<title>angular</title>

　　</head>

　　var app = angular.module("app",[]);

　　</script>

　　ngPaste以及ngMouseup和ngKeyup,ngModelOptions....等方法参考官方的使用,要用查API就好了,(官方的要FQ哦;)

　　</div>

　　如果不用ng-message组件的错误提示如下;

　　<label for="emailAddress">Enter your email address:</label>

　　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>

　　</form>

　　<br>

　　<a href="https://yearofmoo.github.io/ngMessages/">老外写的DEMO</a>

　　</div>

　　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">

　　<head>

　　<title>angular</title>

　　</head>

　　var app = angular.module("app",[]);

　　</script>

　　$timeout和$interval,这两个服务;

　　</div>

　　<h4 class="list-group-item-heading">setInterval</h4>

　　$interval(fn, delay, [count], [invokeApply]);

　　</p>

　　</a>

　　<h4 class="list-group-item-heading">timeout</h4>

　　$timeout(fn, [delay], [invokeApply]);

　　</p>

　　</a>

　　</div>

　　</div>

　　start

　　</button>

　　</div>

　　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>

教程首页更多教程