Angular入門筆記

時間  2019-11-26
標籤 angular 入門 筆記 欄目 AngularJS 简体版
原文   原文鏈接

      AngularJS（下面簡稱其爲ng）是Google開源的一款JavaScript MVC框架，彌補了HTML在構建應用方面的不足，其經過使用指令（directives）結構來擴展HTML詞彙，使開發者能夠使用HTML來聲明動態內容，從而使得Web開發和測試工做變得更加容易。javascript

1、歷史html

　　AngularJS最初由Misko Hevery和Adam Abrons於2009年開發，後來成爲了Google公司的項目。前端

　　當前最新版是：1.2.0-beta.10java

　　當前最新穩定版是：1.2.16git

2、受權angularjs

　　Angular是開源免費的。受權協議是：MITgithub

　　GitHub地址：https://github.com/angular/angular.jsajax

3、兼容性api

　　Safari, Chrome, Firefox, Opera, IE8, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari). 數組

　　對於早期IE版本，請參考： Internet Explorer Compatibility

5、核心特性

　　1.MVC

　　2.模塊化

　　3.自動化雙向數據綁定

　　4.語義化標籤

　　5.依賴注入

6、優缺點

　　若是你要開發的是單頁應用，AngularJS就是你的上上之選。Gmail、Google Docs、Twitter和Facebook這樣的應用，都很能發揮AngularJS的長處。可是像遊戲開發之類對DOM進行大量操縱、又或者單純須要 極高運行速度的應用，就不是AngularJS的用武之地了。

7、使用Angular

　　1.新建一個名爲index的網頁。

<!DOCTYPE html>
<head>
     <title>Learning AngularJS</title>
</head>
<body>

</body>
</html>

　　2.引入Angular.js文件

<!DOCTYPE html>
<head>
     <title>Learning AngularJS</title>
      <script src="./angular.min.js"></script>
</head>
<body>

</body>
</html>

　　也能夠使用谷歌的cdn

　　https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js

　　3.使用ng-app來聲明Angular的邊界，使用ng-controller來聲明其使用的控制器

<!DOCTYPE html>
<html>
<head>
    <title>Learning AngularJS</title>
    <script src="./angular.min.js"></script>
    </head>
<body>
   <div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
   
   </div>
</body>
</html>

 　　4.在index.html文件同目錄下新建app.js，並寫入如下內容。

 

//module方法傳入做用域和初始化的模塊數組（此處爲空數組）
var app = angular.module('MyTutorialApp',[]);

 

　　5.在index.html同目錄下新建maincontroller.js並寫入如下內容

app.controller("MainController", function($scope){　　//傳入的$scope表示變量的做用域
　　
});

　　

　　6.將app.js和maincontroller.js分別引入到index.js目錄中。App.js要先於maincontroller.js引入

<!DOCTYPE html>
<html>
<head>
    <title>Learning AngularJS</title>
    <script src="./angular.min.js"></script>
    <script src="app.js" type="text/javascript"></script>
    <script src="maincontroller.js" type="text/javascript"></script>
</head>
<body>
<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
   
</div>
</body>
</html>

　

　　7.在maincontroller.js中添加$scope的變量

app.controller("MainController", function($scope){
//爲做用域內的understand變量賦值，這樣頁面上的{{understand}}就獲得相應的值了
$scope.understand = "I now understand how the scope works!";　　 
});

　　

　　 

　　8.在index.js頁面中寫上要訪問的變量

<!DOCTYPE html>
<html>
<head>
    <title>Learning AngularJS</title>
    <script src="./angular.min.js"></script>
    <script src="app.js" type="text/javascript"></script>
    <script src="maincontroller.js" type="text/javascript"></script>
</head>
<body>
<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
    {{understand}}
</div>
</body>
</html>

　　{{}}雙大括號，這是ng的模板中用於書寫表達式的標記，ng成功運行起來後，{{}}內的表達式會生效

　　9.效果

　　

　　{{understand}}變成了I now understand how the scope works!了

8、模板與數據的雙向綁定

　　例一：

　　　　1.修改maincontroller.js文件以下

app.controller("MainController", function($scope){
     $scope.inputValue = "";
});

　　　　2.修改index.html文件以下:

　　　　

<!DOCTYPE html>
<head>
	<title>Learning AngularJS</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
	<script src="app.js" type="text/javascript"></script>
	<script src="maincontroller.js" type="text/javascript"></script>
</head>
<body>
	<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
		<input type='text' ng-model='inputValue' />
		{{inputValue}}
	</div>
</body>
</html>

　　　　3.效果

　　　　

　　　　

　　　　這裏咱們使用了ng-modle這個指令，咱們使用它分別爲輸入框中的值和$scope中的變量inputValue進行了雙向綁定，這樣當輸入框內的值發生變化時，函數中的變量也會跟隨變化，它的變化會實時反饋在後面的區域中

　　

　　例二:二級select聯動

　　　　1.修改maincontroller.js文件內容以下：

app.controller("MainController", function($scope){
	$scope.selectedPerson = 0;
	$scope.selectedGenre = null;
	$scope.people = [
		{
			id: 0,
			name: 'Leon',
			music: [
				'Rock',
				'Metal',
				'Dubstep',
				'Electro'
			]
		},
		{
			id: 1,
			name: 'Chris',
			music: [
				'Indie',
				'Drumstep',
				'Dubstep',
				'Electro'
			]
		},
		{
			id: 2,
			name: 'Harry',
			music: [
				'Rock',
				'Metal',
				'Thrash Metal',
				'Heavy Metal'
			]
		},
		{
			id: 3,
			name: 'Allyce',
			music: [
				'Pop',
				'RnB',
				'Hip Hop'
			]
		}
	];
});

　　　　2.修改index.html文件的內容以下：

　　

<!DOCTYPE html>
<head>
	<title>Learning AngularJS</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
	<script src="app.js" type="text/javascript"></script>
	<script src="maincontroller.js" type="text/javascript"></script>
</head>
<body>
	<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
		<select ng-model='selectedPerson' ng-options='obj.name for obj in people'></select>
		<select ng-model='selectedGenre'>
			<option ng-repeat='label in people[selectedPerson.id].music'>{{label}}</option>
		</select>
	</div>
</body>
</html>
　　　　ng-repeat表示循環輸出

　　　　3.效果

　　　　

 　　　　這個例子實現了二級聯動的效果

9、Angular的數據過濾

　　1.修改index.html文件內容以下:

　　

<!DOCTYPE html>
<html>
<head>
    <title>Learning AngularJS</title>
    <script src="./angular.min.js"></script>
    <script src="app.js" type="text/javascript"></script>
    <script src="maincontroller.js" type="text/javascript"></script>
</head>
<body>
<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
    <input type='text' ng-model='searchText' />
    <ul>
        <li ng-repeat='person in people | filter:searchText'>#{{person.id}} {{person.name}}</li>
    </ul>
</div>
</body>
</html>

　　2.效果

　　

 　　當在輸入框中輸入文字時，下面的列表就會根據輸入的文字進行過濾

10、使用Angular顯示或隱藏元素

　　1.修改maincontroller.js文件以下：

　　

app.controller("MainController", function($scope){
  $scope.people = [
        {
            id: 0,
            name: 'Leon',
            music: [
                'Rock',
                'Metal',
                'Dubstep',
                'Electro'
            ],
            live: true
        },
        {
            id: 1,
            name: 'Chris',
            music: [
                'Indie',
                'Drumstep',
                'Dubstep',
                'Electro'
            ],
            live: true
        },
        {
            id: 2,
            name: 'Harry',
            music: [
                'Rock',
                'Metal',
                'Thrash Metal',
                'Heavy Metal'
            ],
            live: false
        },
        {
            id: 3,
            name: 'Allyce',
            music: [
                'Pop',
                'RnB',
                'Hip Hop'
            ],
            live: true
        }
    ];
});

　　2.修改index.html文件以下

<!DOCTYPE html>
<html>
<head>
    <title>Learning AngularJS</title>
    <script src="./angular.min.js"></script>
    <script src="app.js" type="text/javascript"></script>
    <script src="maincontroller.js" type="text/javascript"></script>
</head>
<body>
<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
    <input type='text' ng-model='searchText' />
    <ul>
        <li ng-repeat='person in people | filter:searchText' ng-show='person.live == true'>#{{person.id}} {{person.name}}</li>
    </ul>
    <ul>
        <li ng-repeat='person in people | filter:searchText' ng-hide='person.live == false'>#{{person.id}} {{person.name}}</li>
    </ul>
</div>
</body>
</html>

　　ng-show與ng-hide，用於控制元素的顯示和隱藏

　　3.效果

　　

　　能夠看出，live=false的#2被隱藏了

11、事件綁定

　　1.修改index.html內容以下：

<!DOCTYPE html>
<head>
  <title>Learning AngularJS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
    <script src="app.js" type="text/javascript"></script>
    <script src="maincontroller.js" type="text/javascript"></script>
</head>
<body>
    <div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
        <input type='text' ng-model='searchText' />
        <ul>
            <li ng-repeat='person in people | filter:searchText' ng-show='person.live == true'>#{{person.id}} {{person.name}}</li>
        </ul>
        <input type='text' ng-model='newPerson' />
        <button ng-click='addNew()'>Add</button>
    </div>
</body>
</html>

　　2.修改maincontroller.js文件內容以下

　　

app.controller("MainController", function($scope){
  $scope.people = [
        {
            id: 0,
            name: 'Leon',
            music: [
                'Rock',
                'Metal',
                'Dubstep',
                'Electro'
            ],
            live: true
        },
        {
            id: 1,
            name: 'Chris',
            music: [
                'Indie',
                'Drumstep',
                'Dubstep',
                'Electro'
            ],
            live: true
        },
        {
            id: 2,
            name: 'Harry',
            music: [
                'Rock',
                'Metal',
                'Thrash Metal',
                'Heavy Metal'
            ],
            live: false
        },
        {
            id: 3,
            name: 'Allyce',
            music: [
                'Pop',
                'RnB',
                'Hip Hop'
            ],
            live: true
        }
    ];
    $scope.newPerson = null;
    $scope.addNew = function() {
        if ($scope.newPerson != null && $scope.newPerson != "") {
            $scope.people.push({
                id: $scope.people.length,
                name: $scope.newPerson,
                live: true,
                music: []
            });
        }
    }
});

　　3.效果

　　

　　點擊add按鈕的時候，people數組會新增一個元素，而後模板中的變量會自動的更新，而後頁面跟着改變

12、優勢與缺點

　　優勢：

　　1. 模板功能強大豐富，而且是聲明式的，自帶了豐富的Angular指令；
　　2. 是一個比較完善的前端MVC框架，包含模板，數據雙向綁定，路由，模塊化，服務，依賴注入等全部功能；
　　3. 自定義Directive，比JQuery插件還靈活，可是須要深刻了解Directive的一些特性，簡單的封裝容易，複雜一點官方沒有提供詳細的介紹文檔，咱們能夠經過閱讀源代碼來找到某些咱們須要的東西，如：在directive使用 $parse；
　　4. ng模塊化比較大膽的引入了Java的一些東西（依賴注入），可以很容易的寫出可複用的代碼，對於敏捷開發的團隊來講很是有幫助。

　　

　　缺點：

　　1.angular 入門很容易 但深刻後概念不少, 學習中較難理解.

　　2.中文教程很是少, 官方的文檔基本只寫了api, 一個例子都沒有, 不少時候具體怎麼用都是google來的, 或直接問misko,angular的做者.

　　3.對IE6/7 兼容不算特別好, 就是能夠用jQuery本身手寫代碼解決一些.

　　4.不利於seo.(SEO目前也有了prerender解決方案) https//prerender.io

　　5.不適合交互頻繁的，如遊戲之類交互體驗網站。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程