AngularJS實用入門
阿新 • • 發佈：2018-12-16
AngularJS的簡介
AngularJS 誕生於 2009 年，由 Misko Hevery 等人建立，後為 Google 所收購。是一款優
秀的前端 JS 框架，已經被用於 Google 的多款產品當中。AngularJS 有著諸多特性，最為核心的是：MVC、模組化、自動化雙向資料繫結、依賴注入等等
一，AngularJS 四大特徵
1.MVC模式
Angular 遵循軟體工程的 MVC 模式,並鼓勵展現，資料，和邏輯元件之間的鬆耦合.通過依賴注入（dependency injection），Angular 為客戶端的 Web 應用帶來了傳統服務端的服務，例如獨立於檢視的控制。 因此，後端減少了許多負擔，產生了更輕的 Web 應用。
2.資料的雙向繫結
雙向的資料繫結允許模型和檢視之間自動同步
3.依賴注入
依賴注入(Dependency Injection,簡稱 DI)是一種設計模式, 指某個物件依賴的其他物件無需手工建立，此物件在建立時，其依賴的物件由框架來自動建立並注入進來,其實就是最少知識法則;模組中所有的 service 和 provider 兩類物件，都可以根據形參名稱實現 DI.
4.模組化設計
高內聚低耦合法則 1)官方提供的模組 ng、ngRoute(主要實現路由功能)、ngAnimate(實現一些動畫效果) 2)使用者自定義的模組 angular.module(‘模組名’,[ ])
2.AngularJS的常用屬性
ng-app 在任何元素上使用，代表 angular 應用作用域 ng-controller 指定控制器 ng-model 指定模型 ng-bind 或者 {{屬性名}} 進行屬性取值 用於顯示
三，AngularJs的常用操作
1.雙向繫結 ng-model
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJs資料雙向繫結</title> <!--引入AngularJs檔案--> <script type="text/javascript" src="js/angular.min.js"></script> </head> <!--ng-app指令是AngularJs程式執行的入口--> <body ng-app> <input type="text" ng-model="name"/> <!--AngularJs的表示式:{{變數或方法等}}等價於ng-bind指令，進行屬性取值，用於顯示資料 --> {{name}} </body> </html>
2.初始化指令 ng-init
我們如果希望有些變數具有初始值，可以使用 ng-init 指令來對變數初始化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJs初始化指令</title>
<!--引入AngularJs檔案-->
<script type="text/javascript" src="js/angular.min.js"></script>
</head>
<!--ng-app指令是AngularJs程式執行的入口 ng-init:可以在頁面載入時，執行一些的操作-->
<body ng-app ng-init="name='張三'">
<input type="text" ng-model="name"/>
<!--AngularJs的表示式:{{變數或方法等}}等價於ng-bind指令，進行屬性取值，用於顯示資料 -->
{{name}}
</body>
</html>
3.控制器ng-controller
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJs控制器</title>
<!--引入AngularJs檔案-->
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
//定義一個模組
var app = angular.module('myApp',[]);
//定義一個控制器 在定義一個控制器前，必須定義模組
//$scope是檢視與控制器之間資料交換的橋樑
app.controller('MyController',function($scope){
$scope.add=function(){
return parseInt($scope.x) + parseInt($scope.y);
}
})
</script>
</head>
<!--模組名和控制器名寫上面自己定義的-->
<body ng-app="myApp" ng-controller="MyController">
X:<input type="text" ng-model="x"/><br />
Y:<input type="text" ng-model="y"/><br />
結果:{{add()}}
</body>
</html>
4.事件指令 ng-click
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJs事件指令</title>
<!--引入AngularJs檔案-->
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
//定義一個模組
var app = angular.module('myApp',[]);
//定義一個控制器 在定義一個控制器前，必須定義模組
app.controller('MyController',function($scope){
$scope.add=function(){
$scope.z = parseInt($scope.x) + parseInt($scope.y);
}
})
</script>
</head>
<!--模組名和控制器名寫上面自己定義的-->
<body ng-app="myApp" ng-controller="MyController" ng-init="val='運算'">
X:<input type="text" ng-model="x"/><br />
Y:<input type="text" ng-model="y"/><br />
<!--ng-bind 或者 {{屬性名}} 進行屬性取值 用於顯示-->
<button ng-bind="val" ng-click="add()"></button><br />
結果:{{z}}
</body>
</html>
5.迴圈陣列 ng-repeat
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJs事件指令</title>
<!--引入AngularJs檔案-->
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
//定義一個模組
var app = angular.module('myApp', []);
//定義一個控制器 在定義一個控制器前，必須定義模組
app.controller('MyController', function($scope) {
$scope.array = [1, 2, 3, 4, 5]
})
</script>
</head>
<!--模組名和控制器名寫上面自己定義的-->
<body ng-app="myApp" ng-controller="MyController">
<table>
<tr ng-repeat="x in array">
<td>{{x}}</td>
</tr>
</table>
</body>
</html>
6.內建服務 $http
我們的資料一般都是從後端獲取的，那麼如何獲取資料呢？我們一般使用內建服務$http 來實現從後端獲取資料。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJs內建服務$http</title>
<!--引入AngularJs檔案-->
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript">
//定義一個模組
var app = angular.module('myApp', []);
//定義一個控制器 在定義一個控制器前，必須定義模組
app.controller('MyController', function($http,$scope) {
$scope.findAll = function(){
$http.get('js/data.json').success(
function(response){
$scope.list = response;
});
}
})
</script>
</head>
<!--模組名和控制器名寫上面自己定義的-->
<body ng-app="myApp" ng-controller="MyController" ng-init="findAll()">
<table>
<tr>
<td>姓名</td>
<td>數學</td>
<td>語文</td>
</tr>
<tr ng-repeat="entity in list">
<td>{{entity.name}}</td>
<td>{{entity.shuxue}}</td>
<td>{{entity.yuwen}}</td>
</tr>
</table>
</body>
</html>
7.路由模組ngRoute的使用
我們在實際開發專案的過程中，許多頁面的head和footer都是相同的，我們只需要改變body部分的內容。AngularJS中的ngRoute模組就是用來實現這一功能的。
在頁面引入 angular 的 js ，route 的 js
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS的路由功能</title>
<h1>頁面的Head部分</h1>
<a href="#/JavaEE">JavaEE</a>
<a href="#/QKL">區塊鏈</a>
<a href="#/Python">Python</a>
<!--引入AngularJs檔案-->
<script type="text/javascript" src="js/angular.min.js"></script>
<!--引入ngRoute模組的js檔案-->
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script type="text/javascript">
//定義一個模組 注意：使用路由功能，必須引入ngRoute模組才能進行使用
var app = angular.module('myApp',['ngRoute']);
//設定路由對應的頁面 otherwise：用於設定預設想要顯示的頁面
app.config(['$routeProvider',function($routeProvider){
$routeProvider.when('/QKL',{
templateUrl:'區塊鏈.html'
}).when('/JavaEE',{
templateUrl:'JavaEE.html'
}).when('/Python',{
templateUrl:'Python.html'
}).otherwise({
//預設顯示的頁面，必須是上面設定的路由中的其中一個
redirectTo:'/Python'
});
}])
</script>
</head>
<body ng-app="myApp">
<!--用於顯示不同頁面的內容-->
<!--ng-view用於顯示路由呼叫的頁面-->
<div ng-view>
</div>
</body>
<footer>
<h1>頁面的Footer部分</h1>
</footer>
</html>
注意事項：
