angularJS 入門基礎

作者：Eve Cole 更新時間：2025-06-14 16:00:03

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>

<div>

angular最強大的東西,數據的綁定binding

</div>

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

<div>

通過angular,展示數組對應的數據;

</div>

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

數據過濾器;

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

<div>

angular中的factory就相當於一個公用的實例方法,可以理解為一個多個控制器都可以用的函數;

</div>

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

return {

"noting" : "json"

};

});

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

$scope.json = ff;

});

</script>

</div>

<div>

angular的指令;

</div>

<div>

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

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

return {

restrict : "AE",

replace : true,

transclude : true,

template : '<div> <button 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>

<div>

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>

<div>

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>

如何操作頁面的樣式,這個直接改綁定的數據模型就好了：

複製代碼代碼如下:

<div>

angular對樣式進行操作;(jQ是手動選擇元素對元素樣式進行操作,angular提供了一種更的方法,把元素的屬性賦值給一個變量,你只要改變這個變量即可)

</div>

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

使用模板

</div>

</script>

<div>

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

<div>

<span>update</span>angular的通知數據更新三種方式$scope.$digest(),$scope.$apply(),以及通過$scope.$watch監聽進行更新;

</div>

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

<div>

angular中的工具方法列表

</div>

<div>

<ul>

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

這些工具方法跟其他庫差不多;

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>

<div>

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>

<div>

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

</div>

如果不用ng-message組件的錯誤提示如下;

<div>

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

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>

<div>

$timeout和$interval,這兩個服務;

</div>

<div>

<h4>setInterval</h4>

<p>

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

</p>

</a>

<h4>timeout</h4>

<p>

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

</p>

</a>

</div>

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