AngularJS實現MVC
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Angular_MVC</title>
</head>
<body>
<div ng-controller="HelloAngular">
<p>{{greetting.text}},Angular</p>
</div>
</body>
<script type="text/javascript" src="js/angular-1.3.0.js"></script>
<script type="text/javascript">
function HelloAngular($scope){
$scope.greetting={
text:"HELLO"
};
}
</script>
</html>
image.png
AngularJS模塊化Module
<!DOCTYPE html>
<html lang="en" ng-app="HelloAngular">
<head>
<meta charset="UTF-8">
<title>Angular_MVC</title>
</head>
<body>
<div ng-controller="helloAngular">
<p>{{greetting.text}},Angular</p>
</div>
</body>
<script type="text/javascript" src="js/angular-1.3.0.js"></script>
<script type="text/javascript">
/**
* 調用了angular.module方法傳入一個字符串和一個數組
* angular.module是來定義一個模塊
*/
var myModule=angular.module("HelloAngular",[]);
/**
* [HelloAngular description]
* 在模塊上面調用controller方法
* 告訴angular我需要生成一個控制器
* helloAngular是控制器的名稱
* []號里面'$scope'依賴注入特性
*
*/
myModule.controller("helloAngular",['$scope',
function HelloAngular($scope){
$scope.greetting={
text:"HELLO"
};
}
])
</script>
</html>
image.png
AngularJS指令系統
<!DOCTYPE html>
<html lang="en" ng-app="MyModule">
<head>
<meta charset="UTF-8">
<title>Angular_MVC</title>
</head>
<body>
<hello></hello>
</body>
<script type="text/javascript" src="js/angular-1.3.0.js"></script>
<script type="text/javascript">
/**
* 調用了angular.module方法傳入一個字符串和一個數組
* angular.module是來定義一個模塊
*/
var myModule = angular.module("MyModule", []);
/**
* 在模塊上面調用directive方法
* 這個方法有兩個參數
* "hello"指令名稱也就是對應標簽名
* 后面是一個函數
* restrict/限制：
* template/模板：
* replace/代替：
* hello標簽被替換成了模板
*/
myModule.directive("hello", function() {
return {
restrict: 'E',
template: '<div>Hi everyone!</div>',
replace: true
}
});
</script>
</html>
image.png
AngularJS雙向數據綁定
視圖和數據是對應的，當視圖上面的內容發生改變時候，數據模型里面也立刻發生變化，當數據模型發生變化視圖自動會去更新這里需要借助一個事件機制；
<!DOCTYPE html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Angular_MVC</title>
</head>
<body>
<div>
<input ng-model="greeting.text"/>
<p>{{greeting.text}},AngularJS</p>
</div>
</body>
<script type="text/javascript" src="js/angular-1.3.0.js"></script>
<script type="text/javascript">
/**
* 輸入框使用ng-model綁定了greeting.text
* 底下p標簽用來顯示{{}}代表取值的意思
* 當ng-model發生變化p標簽值會自動變化
*/
</script>
</html>
image.png
