AngularJS學習筆記之一： AngularJS入門

時間 2019-12-06

原文原文鏈接

‍1、AngularJS是什麼？‍

AngularJS是由Misko Hevery 和 Adam Abrons 兩我的共同建立的，在2009年賣給了Google，它是一個構建動態Web應用的一個Javascript框架，目的是爲了克服HTML在構建Web應用程序上的不足而設計的。html

2、 AngularJS的四大核心特性

1） MVC
前端

2) 模塊化
瀏覽器

3）指令系統
前端框架

4）雙向數據綁定
app

其中指令系統和雙向數據綁定是AngularJS特有的，主要區別於其餘的前端MVC框架，如BackBone
框架

3、AngularJS四大核心特性解析

一、AngularJS的第一個核心特性：MVC

MVC是在1979年由Trygve Reenskaug第一次提出
模塊化

Model：數據模型層
spa

View：視圖層，負責展現，通常咱們能在頁面上看到的都是
設計

Controller：業務邏輯和控制邏輯
rest

MVC的好處是職責很清晰，代碼模塊化，下面咱們來看一段代碼

<!DOCTYPE html>
<html ng-app="MyAngular">
<head>
	<meta charset="UTF-8">
	<title>AngularJS MVC</title>
</head>
<body>
	<div ng-controller="HelloAngular">
		<p>{{greeting.text}}, AngularJS</p>
	</div>
</body>
<script src="js/angular-1.4.6.min.js"></script>
<script>
	angular.module('MyAngular', [])
	.controller('HelloAngular', function($scope){
		$scope.greeting = {
			text: 'Hello'
		}
	})
</script>
</html>

從上面代碼能夠看出，在html標籤裏，使用ng-app定義了AngularJS的管理邊界，也就是說，AngularJS能夠管理整個html。

在body中的div裏面定義了ng-controller，這就是MVC中的控制器，也就是C，而整個p標籤就是咱們的視圖層，也就是V。

在最下面的script裏，咱們首先定義了一個AngularJS的模塊MyAngular，而後在這個模塊上定了控制器HelloAngular，裏面的text：'Hello'，就是咱們的M層。

二、AngularJS的第二個核心特性：模塊化

其實在上面的代碼中，咱們已經使用了AngularJS的模塊化，下面咱們來用另一種方式來重寫上面的JS代碼部分

var myModule = angular.module('MyAngular', []);            //定義模塊

myModule.controller('HelloAngular', ['$scope',            //在模塊上定義一個控制器方法helloAngular
    function helloAngular($scope) {
        $scope.greeting = {
            text: 'Hello'        
        }
    }
]);

上面第一排的代碼爲咱們定義了一個模塊myModel，而後咱們利用該模塊的controller方法生成一個控制器。請注意，咱們在定義controller控制器時，第一個參數是控制器名稱，而第二個是在一個方括號裏，方括號裏的第一個成員是一個變量$scope，第二個成員是一個Function，這個Function的參數也叫$scope，也就是說，這裏的代碼告訴Angular，請把第一個成員$scope注入到下面的方法中，這裏也體現了Angular的依賴注入特性。

下面咱們用一張圖來講明下AngularJS的模塊化

在AngularJS中，一切都是從模塊開始的，建立了模塊，咱們就能夠在這個模塊上調用各類方法，如Filter、Directive、Controller等。

三、AngularJS的第三個核心特性：指令系統

首先咱們來看下下面的代碼

<!DOCTYPE html>
<html ng-app="MyModule">
    <head>
        <meta charset="utf-8" />
        <title>AngularJS - 指令系統</title>
    </head>
    
    <body>
        <hello></hello>
    </body>
    <script src="js/angular-1.4.6.min.js"></script>
    <script>
        var MyModule = angular.module('MyModule', []);
        MyModule.directive('hello', function(){
            return {
                restrict: 'E',
                template: '<div>Hi Everyone!</div>',
                replace: true
            }
        });
    </script>    
</html>

上面的HTML代碼中，咱們能夠看到<hello></hello>這樣的標籤，可是在HTML裏，沒有定義這楊的標籤，瀏覽器引擎是不認識它的，這時，瀏覽器會忽略掉這個標籤，Angular怎麼作呢？在下面的JS代碼中，Angular在已定義的模塊MyModule上，使用了directive方法，在這個方法中，第一個參數就定義了hello這個標識符，用來講明在HTML中，hello標籤的意義，在返回的屬性中有一個template，它的做用就是說明這個標籤會顯示什麼樣的內容。

四、AngularJS的第四個核心特性：雙向數據綁定

目前大多數的前端框架都是單向數據綁定，如jQueryUI、Backbone、Flex等。單向數據綁定是怎麼作的呢？通常的作法是咱們先生成模板（template），而後從後臺獲取數據（Model），經過綁定機制，將模板和數據結合起來生成HTML標籤插入到文檔流中（View）。

這樣的單向數據綁定有什麼問題嗎？若是咱們的數據有變化，那麼按照這種流程，咱們不得不從新將模板和新的數據再次生成HTML插入到文檔流中，也就是須要重構HMTL頁面。

那麼AngularJS中的雙向數據綁定又是怎麼回事呢？

雙向數據綁定認爲，視圖和數據是對應的，藉助事件機制，當視圖發生變化時，數據模型也會發生相應的變化，而當數據模型發生變化時，視圖會自動更新，這種場景應用最典型的就是咱們的表單，當用戶在表單中完成輸入後，數據模型就會馬上拿到用戶輸入，下面咱們用一段代碼來講明下

<!DOCTYPE html>
<html ng-app>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <div>
            <input type="text" ng-model="greeting.text">
            <p>{{greeting.text}}, AngularJS</p>
        </div>
    </body>
    <script src="js/angular-1.4.6.min.js"></script>
</html>

當咱們在表單中任意輸入後，下面的p標籤會立刻顯示出用戶輸入，代碼中的雙大括號（ {{}} ）表示一個取值表達式。