Angular入門筆記

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

1、歷史html

  AngularJS最初由Misko HeveryAdam Abrons2009年開發,後來成爲了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.jsmaincontroller.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.不適合交互頻繁的,如遊戲之類交互體驗網站。

相關文章
相關標籤/搜索