Angularjs 1.5版快速入門

本文轉載自查看原文 2016-03-28 14:57 7112

還是習慣markdown編輯器，原文地址：https://www.zybuluo.com/gogogodeng/note/321997

1. 初始化
2. 控制器
3. 指令
1. 指令介紹
2. 常用指令
4. 過濾器
5. 事件處理

初始化AngularJS應用

AngularJS 是一個 JavaScript 框架。它可通過標簽添加到 HTML 頁面。AngularJS 通過指令擴展了 HTML，且通過表達式綁定數據到 HTML。

要使用AngularJS首先要在頁面頭部加載(以下全部以1.50正式版為例)

<script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>

但是現在還是不能用的，在需要的標簽上添加ng-app

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body>
    <div ng-app="">
         <p>名字 : <input type="text" ng-model="name"></p>
         <h1>Hello {{name}}</h1>
    </div>
</body>
</html>

標記ng-app之后就表示angularjs將在標記的標簽內部開始處理（angular作用域），所以一旦要使用它，請不要忘記這個標記
可以是html中的任何標簽

其中ng-model代表模型，通過標簽中的{{}}雙花括號，可以直接進行綁定
文本輸入指令<input type="text" ng-model="name">綁定到一個叫name的模型變量。
我們在輸入框輸入任何字符，都會直接出現在Hello之后替換{{name}}
這就是雙向綁定，在修改輸入框中的值得時候，對應的name這個模型就會一起改變，從而同步到視圖中

{{ expression }}括號內的內容稱之為表達式
表達式可以是數字運算，字符串拼接，數組，對象，過濾器

通常我們應用的時候，我們會主動的進行初始化，就需要這樣寫

<script type="text/javascript">
	var app = angular.module('myapp',[]);
</script>

其中需要注意的是var app = angular.module('myapp',[]); 這里的myapp應該對應的就是我們一開始聲明的ng-app='myapp'
所以代碼應該改成這樣

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Angular JS</title>
	<script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body>
	<div ng-app="myApp">
	 	<p>名字 : <input type="text" ng-model="name"></p>
	 	<h1>Hello {{name}}</h1>
	</div>
	<script type="text/javascript">
		var app = angular.module('myApp',[]);
	</script>
</body>
</html>

如果有一些附加的模塊，就需要寫在方括號的數組中，而且要在引用angularjs核心包之后一起引用
通過這樣的方式，就創建了一個angular的對象，通過對象，我們還可以創建其中很重要的控制器和指令。
所以一般一個頁面就只有一個這樣的angular對象。跨頁面是無效的。
適合做一些SPA。

AngularJS應用引導過程有3個重要點：注入器(injector)將用於創建此應用程序的依賴注入(dependency
injection)；注入器將會創建根作用域作為我們應用模型的范圍；
AngularJS將會鏈接根作用域中的DOM，從用ngApp標記的HTML標簽開始，逐步處理DOM中指令和綁定。
一旦AngularJS應用引導完畢，它將繼續偵聽瀏覽器的HTML觸發事件，如鼠標點擊事件、按鍵事件、HTTP傳入響應等改變DOM模型的事件。這類事件一旦發生，AngularJS將會自動檢測變化，並作出相應的處理及更新。

AngularJS的控制器

首先看一個例子

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Angular JS</title>
	<script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body>
	<div ng-app="myApp" ng-controller="myCtrl">
	名: <input type="text" ng-model="firstName"><br>
	姓: <input type="text" ng-model="lastName"><br>
	<br>
	姓名: {{ firstName + " " + lastName }}
	</div>
	<script type="text/javascript">
		var app = angular.module('myApp',[]);
		app.controller('myCtrl',function($scope) {
		// $scope代表作用域
		$scope.firstName = "John";
		$scope.lastName = "Doe";
		})
	</script>
</body>
</html>

ng-controller="myCtrl" 聲明了一個控制器
然后通過app.controller('myCtrl',function($scope){})定義一個控制器
控制器中的$scope作用域參數，用來保存一些模型,我們創建了兩個模型firstName和lastName並分別賦值，運行之后可以看到效果。$scope他自帶有屬性和方法，我們也可以直接為他創建（參考javascript）。
比如：

$scope.fullName = function() {

　　return $scope.firstName + " " + $scope.lastName;

}

當我們寫一個數據CRUD的時候，就可以直接定義方法去操作其中的模型對象

$scope.addStore = function(){};
$scope.updateStore = function(){};
$scope.queryStore = function(){};
$scope.deleteStore = function(){};

在控制器中，還有一個參數，$rootScope(根作用域)

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Angular JS</title>
	<script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="myApp">
	<div  ng-controller="myCtrl">
    	名: <input type="text" ng-model="firstName"><br>
    	姓: <input type="text" ng-model="lastName"><br>
    	<br>
    	姓名: {{ firstName + " " + lastName }}
    	性別: {{ Sex }}
	</div>

	<div  ng-controller="secondCtrl">
	你的性別是: {{ Sex }}
	</div>

	<script type="text/javascript">
		var app = angular.module('myApp',[]);
		app.controller('myCtrl',function($scope, $rootScope) {
			// $scope代表作用域
			$scope.firstName = "John";
			$scope.lastName = "Doe";
			$rootScope.Sex = "女";
		});
		app.controller('secondCtrl',function($scope, $rootScope) {
		});
	</script>
</body>
</html>

$scope只能在對應得控制器中使用，而$rootScope可以在多個控制器中使用。它是存在於整個myApp中。

AngularJS的指令

angularjs的指令就是擴展html的屬性，所有ng開頭的都是指令。
例如：ng-app, ng-model, ng-controller, ng-repeat等等，angular全部都是靠指令來進行處理html

除了這些自帶的指令之外，我們還可以進行自定義指令。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="myApp">
    
    <my-directive></my-directive>

    <script type="text/javascript">
        var app = angular.module('myApp',[]); app.directive("myDirective",function() { return { template: "<h1>我的自定義指令!</h1>" } }) </script> </body> </html>

app.directive就是定義一個指令,返回了一個模板<h1>我的自定義指令!</h1>
但是要注意的是，定義指令名稱的時候，如果是這樣的駝峰命名，在標簽中因為是不區分大小寫的，故要在前面加上一個橫杠，像這樣<my-directive></my-directive>

調用指令的方式有四種，分別是:

<my-directive></my-directive> 元素 E
<div my-directive></div> 屬性 A
<div class="my-directive"></div> 類名 C
 注釋 M

可以在定義指令的時候，設置使用的方式，默認的是EA

app.directive("myDirective",function() {
return {
restrict : "M",
// replace: true,
template: "<h1>我的自定義指令!</h1>"
}
})

其中restrict就是設置使用的方式，如果全部都要用就寫成restrict : "EACM"
一般只會用EA，如果要用注釋的方式，就一定要設置replace: true 進行替換，默認的replace: false，會自動在標簽內部生成template

常用的一些指令

ng-repeat 遍歷數據反映到視圖中

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="myApp">

    <div ng-controller="myCtrl">
        <ul>
            <li ng-repeat="x in items">
                {{ '第' + $index + '條數據: 有' + x.num + '個來自' + x.country + '的' + x.name }}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        var app = angular.module('myApp',[]); app.controller("myCtrl",function($scope) { $scope.items = [ { name: 'box', num: 1, country: 'Norway'}, { name: 'football', num: 2, country: 'Sweden'}, { name: 'toy', num: 3, country: 'Denmark'}, { name: 'guitar', num: 4, country: 'Germany'} ] }) </script> </body> </html>

當我們返回數據庫的一些數據的時候，可以通過這個指令遍歷數組
ng-repeat="x in items"items對應$scope的數組，x表示其中的一個，然后就可以把每個x的屬性的值給遍歷出來，其中如果需要得到數據的索引，可以使用$index。

select下拉列表的用法

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="myApp">
    
    <div ng-controller="myCtrl">
        <select ng-model="selectedNames" ng-options="x for x in names"></select>
        <h1>你選擇的是: {{ selectedNames }}</h1>
    </div>
    
    <script type="text/javascript">
        var app = angular.module('myApp',[]); app.controller("myCtrl",function($scope) { $scope.names = [ 'Norway','Sweden','Denmark','Germany']; }) </script> </body> </html>

這樣就簡單的綁定了下拉列表，雖然使用ng-repeat也可以，但是ng-repeat選擇的是一個值，而ng-options可以選擇一個對象。
比如我們經常用到的，就是一個key對應一個value，我們顯示value，操作的是key:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="myApp">
    
    <div ng-controller="myCtrl">
        <select ng-model="selectedNames" ng-options="x.name for x in names"></select>
        <h1>你選擇的是: {{ selectedNames.id }}  {{ selectedNames.name }}</h1>
    </div>
    
    <script type="text/javascript">
        var app = angular.module('myApp',[]); app.controller("myCtrl",function($scope) { $scope.names = [ { id: '0001', name: 'Norway' }, { id: '0002', name: 'Sweden' }, { id: '0003', name: 'Denmark' }, { id: '0004', name: 'Germany' } ]; }) </script> </body> </html>

for后面表示names中的一個對象x，for之前的表示下拉列表顯示什么字段。
根據數據結構不同，有不同的寫法。

$scope.sites = {
site01 : "Google",
site02 : "Runoob",
site03 : "Taobao"
};
<select ng-model="selectedSite" ng-options="x for (x, y) in sites">
</select>
<h1>你選擇的值是: {{selectedSite}}</h1>

$scope.cars = {
car01 : {brand : "Ford", model : "Mustang", color : "red"},
car02 : {brand : "Fiat", model : "500", color : "white"},
car03 : {brand : "Volvo", model : "XC90", color : "black"}
};
<select ng-model="selectedCar" ng-options="y.brand for (x, y) in sites">
</select>
<h1>你選擇的值是: {{selectedCar}}</h1>

ng-bind-html
可以直接將Html內容綁定

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular-sanitize.min.js"></script>

</head>
<body ng-app="myApp" ng-controller="myCtrl">
    
    <p ng-bind-html="myText"></p>
    
    <script type="text/javascript">
        var app = angular.module('myApp',['ngSanitize']); app.controller("myCtrl",function($scope) { $scope.myText = "my name is <h1>John Doe</h1>"; }) </script> </body> </html>

需要注意的是，必須引用ngSanitize模塊，如果是1.3的版本可以使用<div ng-bind-html-unsafe="expression"></div>這樣的方式
ngSanitize可以檢測html代碼的安全性

ng-checked

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>

</head>
<body ng-app="myApp">
    
    <input type="checkbox" ng-model="all"> Check all<br><br>
    <input type="checkbox" ng-checked="all">Volvo<br>
    <input type="checkbox" ng-checked="all">Ford<br>
    <input type="checkbox" ng-checked="all">Mercedes
    
    <script type="text/javascript">
        var app = angular.module('myApp',['']); </script> </body> </html>

<input type="checkbox|radio" ng-checked="expression"></input>

ng-change

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>

</head>
<body ng-app="myApp" ng-controller="myCtrl">
    
    <input type="text" ng-change="myFunc()" ng-model="myValue" />
    <p>The input field has changed {{count}} times.</p>
    
    <script type="text/javascript">
        var app = angular.module('myApp',[]); app.controller("myCtrl",function($scope) { $scope.count = 0; $scope.myFunc = function() { $scope.count++; }; }) </script> </body> </html>

ng-hide和ng-show

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>

</head>
<body ng-app="myApp">
    
    <div>
        隱藏 HTML: <input type="checkbox" ng-model="myVar1">
        <div ng-hide="myVar1">
        <h1>Welcome 隱藏</h1>
        <p>Welcome to my home.</p>
        </div>
    </div>
    
    <div> 顯示 HTML: <input type="checkbox" ng-model="myVar2"> <div ng-show="myVar2"> <h1>Welcome 顯示</h1> <p>Welcome to my home.</p> </div> </div> <script type="text/javascript"> var app = angular.module('myApp',[]); </script> </body> </html>

ng-class
通過綁定模型來同步修改css

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
    <style>
        .sky {
            color:white; background-color:lightblue; padding:20px; font-family:"Courier New"; } .tomato { background-color:coral; padding:20px; font-family:Verdana; } </style> </head> <body ng-app="myApp"> <select ng-model="home"> <option value="sky">Sky</option> <option value="tomato">Tomato</option> </select> <div ng-class="home"> <h1>Welcome Home!</h1> <p>I like it!</p> </div> <script type="text/javascript"> var app = angular.module('myApp',[]); </script> </body> </html>

ng-if

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular JS</title>
<script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">

<input type="checkbox" ng-model="myVar" ng-init="myVar = true">
<div ng-if="myVar">
<h1>Welcome</h1>
<p>Welcome to my home.</p>
<hr>
</div>

<script type="text/javascript">
var app = angular.module('myApp',[]); app.controller('myCtrl',function($scope) { }) </script> </body> </html>

`ng-if="expression"`可用表達式

ng-href

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular JS</title>
<script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">

<div ng-init="myVar = 'http://www.itravac.com'">
<h1>想去旅游？</h1>
<p>訪問 <a ng-href="{{myVar}}">{{myVar}}</a> 出發!</p>
</div>

<script type="text/javascript">
var app = angular.module('myApp',[]); app.controller('myCtrl',function($scope) { }) </script> </body> </html>

AngularJS的過濾器

currency 格式化數字為貨幣格式。
filter 從數組項中選擇一個子集。
lowercase 格式化字符串為小寫。
orderBy 根據某個表達式排列數組。
uppercase 格式化字符串為大寫。

過濾器可以通過一個管道字符（|）和一個過濾器添加到表達式中。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    
    <!-- 大寫 -->
    <p>姓名為 {{ lastName | uppercase }}</p>

    <!-- 小寫 -->
    <p>姓名為 {{ lastName | lowercase }}</p>
    
    <!-- 數字格式化 -->
    <input type="number" ng-model="quantity">
    <input type="number" ng-model="price">
    <p>總價 = {{ (quantity * price) | currency }}</p>
    
    <!-- 排序 -->
    <ul>
      <li ng-repeat="x in names | orderBy:'country'">
        {{ x.name + ', ' + x.country }}
      </li>
    </ul>
    
    <!-- 過濾輸出 -->
    <p><input type="text" ng-model="test"></p>

    <ul>
      <li ng-repeat="x in names | filter:test | orderBy:'country'"> {{ (x.name | uppercase) + ', ' + x.country }} </li> </ul> <script type="text/javascript"> var app = angular.module('myApp',[]); app.controller('myCtrl',function($scope) { $scope.lastName = "john doe"; $scope.names = [ { name: 'box', num: 1, country: 'Norway'}, { name: 'football', num: 2, country: 'Sweden'}, { name: 'toy', num: 3, country: 'Denmark'}, { name: 'guitar', num: 4, country: 'Germany'} ]; }) </script> </body> </html>

AngularJS的事件處理

ng-click (ng-hide,ng-show,ng-change等)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular JS</title>
    <script src="http://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
    
    <button ng-click="clickme()">點我！</button>
    <p>{{ count }}</p>

    <script type="text/javascript">
        var app = angular.module('myApp',[]); app.controller('myCtrl',function($scope) { $scope.count = 0; $scope.clickme = function() { $scope.count += 1; } }) </script> </body> </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 AngularJS - 快速入門 AngularJS快速入門指南20：快速參考 AngularJS快速入門指南11：事件 AngularJS快速入門指南13：表單 AngularJS快速入門指南16：Bootstrap AngularJS快速入門指南06：過濾器 puppeteer （Nodejs版selenium ）快速入門 Robot Framework 快速入門_中文版快速入門：github發布windows版怎么樣快速學習AngularJS？