沒時間解釋了,快上車!AngularJs入門第一講:AngularJs入門。__Js

來源:互聯網
上載者:User

AngularJs第一車:AngularJs入門及第一個執行個體 AngularJs簡介 特性簡介 術語講解 文法講解

執行個體講解

    摘要:主要給大家介紹了AngularJS及其特性,並以3個執行個體來做說明。    本教程使用AngularJs版本:1.6.4    開發應用軟體博主推薦:WebStorm    AngularJs下載地址:http://docs.angularjs.org 
一、AngualrJs簡介

   AngularJS是由Google開發出來的,它是為了克服HTML在構建應用上的不足而設計的。   AngularJS使用了不同的方法,它嘗試去補足HTML本身在構建應用方面的缺陷。   AngularJS通過使用我們稱為標識符(directives)的結構,讓瀏覽器能夠識別新的文法。例如:        (1)使用雙大括弧{{}}文法進行資料繫結;        (2)使用DOM控制結構來實現迭代或者隱藏DOM片段;        (3)支援表單和表單的驗證;        (4)能將邏輯代碼關聯到相關的DOM元素上;        (5)能將HTML分組成可重用的組件。    AngularJS是一個基於MVC處理模式,實現了MVVM資料雙向繫結的用於開發動態web項目的架構。    以其資料和展現分離、MVVM、MVC、DI等強大的特性活躍於前端開發市場,是前端敏捷開發使用的主流的必須掌握的架構之一。
二、特性
 1. 資料繫結    資料繫結可能是AngularJS最酷最實用的特性。它能夠協助你避免書寫大量的初始代碼從而節約開發時間。    一個典型的web應用可能包含了80%的代碼用來處理,查詢和監聽DOM。資料繫結使得代碼更少,你可以專註於你的應用。    一方面,model變化驅動了DOM中元素變化,另一方面,DOM元素的變化也會影響到Model。     這個在使用者互動中更加複雜,因為開發人員需要處理和解析這些互動,然後融合到一個model中,並且更新View。    這是一個手動的複雜過程,當一個應用非常龐大的時候,將會是一件非常費勁的事情。2. 模板    在AngularJS中,一個模板就是一個HTML檔案。但是HTML的內容擴充了,包含了很多協助你映射model到view的內容。    HTML模板將會被瀏覽器解析到DOM中。DOM然後成為AngularJS編譯器的輸入。AngularJS將會遍曆DOM模板來產生一些指導,即,directive(指令)。     所有的指令都負責針對view來設定資料繫結。    資料繫結是DOM變化,不是字串的串連或者innerHTML變化。使用DOM作為輸入,而不是字串,是AngularJS區別於其它的架構的最大原因。    使用DOM允許你擴充指令詞彙並且可以建立你自己的指令,甚至開發可重用的組件。 3. MVC    針對用戶端應用開發AngularJS吸收了傳統的MVC基本原則。MVC或者Model-View-Controll設計模式針對不同的人可能意味不同的東西。     AngularJS並不執行傳統意義上的MVC,更接近於MVVM(Model-View-ViewModel)。其中MVC原理圖可以看看下面的圖片。4、依賴注入(Dependency Injection,即DI)    AngularJS擁有內建的依賴注入子系統,可以協助開發人員更容易的開發,理解和測試應用。    DI允許你請求你的依賴,而不是自己找尋它們。比如,我們需要一個東西,DI負責找建立並且提供給我們。5、Directives(指令)    指令是我個人最喜歡的特性。你是不是也希望瀏覽器可以做點兒有意思的事情。那麼AngularJS可以做到。    指令可以用來建立自訂的標籤。它們可以用來裝飾元素或者操作DOM屬性。
三、術語講解
    模板(template):                       包含了Angular特殊擴充標記的HTML代碼.      
    指令(directive):                    擴充的HTML代碼,自訂的標籤、屬性等等.
    模型(model):                       儲存在JS中,用來和使用者互動的資料.
    範圍(scope):                   模型資料在HTML頁面中產生作用的範圍.
    運算式(expression):                  AngularJS在HTML頁面中可以運算的文法.
    編譯器(compiler):                    被用來解釋HTML代碼中的Angular代碼.
    過濾器(filter):                對HTML頁面中輸出的資料進行指定格式展示.
    視圖(view):            統稱使用者看到的HTML視圖頁面.    
    資料繫結(data binding):             JS中特定的資料和HTML頁面上的資料的關聯關係.
    控制器(controller):                給視圖view提供功能支援的東東.
    依賴注入(dependency injection):             Angular自動建立對象並傳遞對象的一種方式.
    注入器(injector):            專門用來實現依賴注入(DI)的容器.  
    模組(module):             Angular用來對項目進行最高層次封裝的東東.    
    服務(service):                Angular用來對視圖view提供業務功能支援的東東.
    組件(component):              用於對網頁的公用部分進行封裝重用的Angular代碼通常會包含模板、指令、服務等等.   
四、文法講解
1.引導程式    任何應用程式,運行過程中都會有一個啟動並執行入口。    AngularJS應用程式也是一樣,正常情況下,引導Ag應用的入口程式有兩種:ng-app指令,bootstrap手工引導。    常規模式下,是通過ng-app指令引導Angular應用進行工作的。    網頁中引入Angular之後,程式運行時會自動尋找ng-app指令並從這個入口開始載入編譯並解釋執行。    代碼:通常,頁面中會定義ng-app熟悉來指定入口在script中通過angular的 module來載入ng-app指定的模組:   
    <html ng-app=”myApp”>    <script>       angular.module(“myApp”, []);    </script>    </html>
代碼:某些特殊情況下,也可以通過指令碼來動態控制載入啟動Angular應用通過angular.bootstrap(dom, module)來啟動應用:
<html><div id=”myDiv”></div><script>    angular.module(“myApp”, []);    var _div = document.getElementById(“myDiv”);    angular.bootstrap(_div, “myApp”);</script></html>

2.基礎文法結構

    1.開始深入學習AngularJS之前,先簡單認識AngularJS中的各個部分都是怎麼定義和使用的,方便解決後續學習過程中的一些困擾。
     ng-app  
    2.Angular應用啟動並執行入口指令,常規情況下,是寫在我們前端項目的入口檔案的跟標籤上的,用於在項目啟動的時候引導Angular應用
    angular.module(..)   
    3.Angular是通過模組來管理我們前端項目中的資料的,通常情況下一個項目中會包含各種各樣的資料,如管理員、新聞、公告等等.    模組時需要在應用啟動的時候就需要載入的,所以Angular在設計的過程中對於入口指令進行了改造可以綁定一個值,這個值就是系統的主模組

3.基本指令

    指令是Angular中使用比較多的一個部分,Angular中的內建指令都是ng-開頭的一種特殊的文法結構,    如:ng-app等,常見的基本指令如下:    ng-app=”myApp”:程式啟動並執行入口,通過名稱綁定一個模組    ng-init:用於在程式啟動並執行過程中,初始化一些變數的資料的操作    ng-model=”param”:資料繫結的指令,主要用於表單元素上的資料繫結    ng-bind:資料繫結的指令,用於將變數的資料顯示到頁面上,用於替代mustache文法的    ng-controller:控制器指令,用於在頁面中指定控制器作用範圍,通常作為屬性出現    ng-[event]:事件指令,用於在頁面中發生某些事件時調用指令的函數

4.基本文法

    var app = angular.module(“name”, []):用於定義一個angular的模組    name是模組的名稱    []中可以添加其他的模組    app.controller(“name”, function() {}):用於定義一個angular的控制器    name是控制器的名稱    function(){}是這個控制器要處理功能的函數    $scope範圍       $scope是放在控制器函數中的一個參數。這個參數不需要傳值,而是angular自動賦值.    在操作的過程中$scope就相當於一個容器,可以在$scope上聲明變數或者函數,      $scope上的變數和函數會自動和視圖頁面中的變數進行綁定,稱為$scope掛載資料。    $rootScope範圍       $rootScope是AngularJS的根範圍,也是全域範圍,放在控制器函數中的一個參數,     參數不需要傳值,angular會自動賦值,掛載在$rootScope上的資料,會被Angular應用中的所有模組下的子模組和控制器公用。    run()函數          配合$rootScope使用,用於聲明和初始化全域資料    app.run(function($rootScope) { // 處理代碼})    $scope.$watch()         掛載在$scope上,用於監控資料的變化    監控單個變數:$scope.$watch(“name”, function() {// 處理代碼})    監控多個變數:$scope.$watch(“name1 + name2 + ..” + function() {})

5.angular事件處理

    AngularJS中的事件操作,由於它自己虛擬DOM結構所以不支援普通事件,     通常通過它自己的事件指令來調用通過$scope掛在到控制器中的函數執行完成,     事件指令其實就是對於常見事件的封裝,以ng-開頭,加上事件名稱即可,如按一下滑鼠事件ng-click。
五、執行個體講解
(1)入門執行個體一
<!DOCTYPE html>  <html lang="en" ng-app="">  <head>      <meta charset="UTF-8">      <title>AngularJS入門學習</title>      <script type="text/javascript"  src="./1.5.3/angular.min.js"></script>  </head>  <body>      <p><input  type="text" ng-model = "inputValue">請輸入內容</p>      <h1>您輸入的內容為:{{inputValue}}</h1>  </body>  </html> 
注意事項:    文本輸入指令<input ng-model="inputValue" />綁定到一個叫inputValue的模型變數。    雙大括弧標記將yourname模型變數添加到問候語文本。    你不需要為該應用另外註冊一個事件接聽程式或添加事件處理常式。    這個頁面非常簡潔,如果用Jquery寫,那麼就得設定input框的chang中事件,    然後更新內容。這一過程比AngularJS來得繁瑣多了。
(2)入門執行個體2    
<!DOCTYPE html>  <html lang="en" ng-app="myApp">  <head>      <meta charset="UTF-8">      <title>AngularJS入門學習</title>      <script type="text/javascript"  src="./1.6.4/angular.min.js"></script>  </head>  <body ng-controller = "myController">      <p><input  type="text" ng-model = "inputValue">請輸入內容</p>      <h1>您輸入的內容為:{{inputValue}}</h1>  </body>  <script type="text/javascript">  var app = angular.module('myApp', []);//獲得整個angularJS影響的html元素  //控制器  app.controller('myController', function($scope) {      $scope.inputValue = "離襯";  });  </script>  </html> 
    注意,ng-app="myApp",這個不能少,還有ng-controller=“”也不能少,    這兩個分別批明了AngularJS有效範圍和Controller層有效範圍。
(3)入門執行個體3      
<!DOCTYPE html>  <html lang="en" ng-app="myApp">  <head>      <meta charset="UTF-8">      <title>AngularJS入門學習</title>      <script type="text/javascript"  src="./1.6.4/angular.min.js"></script>  </head>  <body ng-controller = "myController">      <button ng-click= "myClick()" ></button>      <h1 ng-if = "!flag"> 離襯</h1>  </body>  <script type="text/javascript">  var app = angular.module('myApp', []);//獲得整個angularJS影響的html元素  //控制器  app.controller('myController', function($scope) {      $scope.flag = false;      $scope.myClick = function(){          console.log($scope.flag);          $scope.flag  = !$scope.flag ;          console.log($scope.flag);      }  });  </script>  </html>
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.