Angularjs 1.5版快速入門

時間 2019-11-12

原文原文鏈接

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

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

初始化AngularJS應用

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

要使用AngularJS首先要在頁面頭部加載(如下所有以1.50正式版爲例)css

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

可是如今仍是不能用的，在須要的標籤上添加ng-apphtml

<!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中的任何標籤java

其中ng-model表明模型，經過標籤中的{{}}雙花括號，能夠直接進行綁定
文本輸入指令<input type="text" ng-model="name">綁定到一個叫name的模型變量。
咱們在輸入框輸入任何字符，都會直接出如今Hello以後替換{{name}}
這就是雙向綁定，在修改輸入框中的值得時候，對應的name這個模型就會一塊兒改變，從而同步到視圖中angularjs

{{ expression }}括號內的內容稱之爲表達式
表達式能夠是數字運算，字符串拼接，數組，對象，過濾器數據庫

一般咱們應用的時候，咱們會主動的進行初始化，就須要這樣寫express

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。