Angular介紹1

Angular簡介

• 什麼是AngularAngularJS 是比較新的技術，版本 1.0 是在 2012 年發佈的。 AngularJS 是由 Google 的員工 Miško Hevery 從 2009 年開始着手開發。這是一個很是好的構想，該項目目前已由 Google 正式支持，有一個全職的開發團隊繼續開發和維護他。 AngularJS的設計初衷是爲了克服HTML在構建應用上的不足而設計的。HTML是一門很好的爲靜態文本展現設計語言，但要構建WEB應用的話它就顯得乏力了。因此我作了一些工做（你也能夠以爲是小花招）來讓瀏覽器作我想要的事。 其核心就是經過指令擴展了 HTML，經過表達式綁定數據到 HTML。 Angular不推崇DOM操做，也就是說在Angular中幾乎不去使用DOM操做一般，咱們是經過如下技術來解決靜態網頁技術在構建動態應用上的不足：類庫和框架。

• 什麼是類庫和框架

  • 類庫 - 類庫是一些函數的集合，它能幫助你寫WEB應用。起主導做用的是你的代碼，由你來決定什麼時候使用類庫。類庫有：jQuery等

  • 框架 - 框架是一種特殊的、已經實現了的WEB應用，你只須要對它填充具體的業務邏輯。這裏框架是起主導做用的，由它來根據具體的應用邏輯來調用你的代碼。

• 爲何不介紹其餘的框架和庫

  • 公司背景

  • 維護能力

  • 中國企業使用範圍

  • 上手難易程度

• Angular網站

  • 官網

  • AngularJS 1.x 官方網站

    • AngularJS 2.x 官方網站

    • Google Material Design for Angular

  • Angular UI（Angular最大的第三方社區）

  • AngularJS中文社區

  • [AngularJS中文社區提供的文檔]

  • http://docs.angularjs.cn/api

  • http://www.apjs.net/

• 如何下載Angular

• 官網下載

• npm： npm install angular

• bower: bower install angular

• 如何學習Angular

• 打開使用 webstorm打開

• 淘寶購買書籍

• 多練

Angular使用

• 先來對比js、jquery、angular同時作一個加法計算器

• 程序員慣例 Hello World 的Angular版本

表達式

-什麼是表達式

• 表達式的形式有不少種都是經過｛｛｝｝包裹起來，最後將運算結果返回出去

  • 字符串 {{string}}

    • 數字 {{number}}

    • 布爾 {{boolean}}

    • 三元表達式 {{?:}}

    • 數組 {{arrary}}

    • 對象 {{object}}

指令

• 什麼是指令指令就是Angular對原有HTML的拓展屬性，而且以ng-開頭

• ng-app: 表示Angular程序從這裏開始，裏面全部與Angular有關的代碼將被執行

• ng-init：初始化參數

• ng-model：用來將參數綁定到value中

• ng-bind：至關於innerHTML綁定到標籤中

• ng-click：至關於click事件

Angular特性

• 指令

• 雙向數據綁定

Angular全局Api使用

• 數據比較API

  • angular.isArray() 判斷給定的對象是否爲數組。

    • angular.isDate()判斷給定的對象是否爲日期類型。

    • angular.isDefined()判斷給定的對象是否認義過。

    • angular.isElement()判斷給定的對象是否爲一個DOM元素。

    • angular.isFunction()判斷給定的對象是否爲一個函數。

    • angular.isNumber()判斷給定的對象是否爲數字。

    • angular.isObject()判斷給定的對象是否爲object類型。

    • angular.isString()判斷給定的對象是否爲字符串。

    • angular.isUndefined()判斷給定的對象是否沒有定義過（與angular.isDefined()相反）。

    • angular.equals()判斷給定的兩個對象是否相等。

• 其餘API使用

  • angular.lowercase() 將字符串轉換爲小寫形式。

    • angular.uppercase()將字符串轉換爲大寫形式。

    • angular.copy()深拷貝一個對象或數組。

    • angular.forEach()遍歷對象或數組中的每個元素並執行一個函數。

• 什麼是類庫和框架

  • 類庫 - 類庫是一些函數的集合，它能幫助你寫WEB應用。起主導做用的是你的代碼，由你來決定什麼時候使用類庫。類庫有：jQuery等

    • 框架 - 框架是一種特殊的、已經實現了的WEB應用，你只須要對它填充具體的業務邏輯。這裏框架是起主導做用的，由它來根據具體的應用邏輯來調用你的代碼。

    • 庫和框架最大的區別是 1.庫中的方法是由開發者調用，框架是由框架自己來調用開發者寫好的方法2.使用框架的時候須要對框架有必定認識才能使用

JqLite使用

• Angular的dom操做

  • 在Angular對於宏觀的dom處理很是不錯可是對於細小的操做Angular就須要藉助內置的JqLite進行操做

  • JqLite分兩種狀況

    • 有Jquery時，做爲Angular檢測到Jquery時候會將其引用過來

      • 無Jquery時，做爲Angular就會啓用自身的JqLite使用，使用方法基本同樣

雜項

• com 商業性質的網站

• org 非營利性質的網站

• edu 教育性質

• cn 中國的網站

 

 

angular的特性：

1.雙向數據綁定

解決angular閃一閃的問題解決辦法

+ 1.把angularjs的引用寫在上面（不推薦）
+ 2.添加ng-cloak隱藏代碼
+ 3.本身添加 
    [ng-cloak]{
        display:none
    }
	樣式
+ 4.經過指令的方式寫angular代碼，不考慮使用表達式的形式

之後寫angular代碼的順序

• 1.引用angularjs的包

• 2.建立模塊和控制器

  • 3.暴露參數和暴露行爲

  • 4.劃定angular的管理範圍須要配合指令ng-app加模塊的名稱，ng-controller加控制器的名稱

  • 5.將暴露的行爲或者參數綁定到對應的位置

angular的執行順序

• 1.若是沒有模塊，在angular內部會幫咱們建立模塊

• 2.若是由模塊就加載模塊中的內容和控制器中的內容

  • 3.將模塊中的內容加載到angular中去

  • 4.angular就會去尋找ng-app(能夠看做是angular的起點，同時也是angular的管理範圍)

  • 5.這時候angular纔回去解析ng-app中有關angular的代碼

模塊和控制器的注意：

• 1.若是在沒有特殊的狀況下angular處理模塊只會處理第一個，後面的將不會被執行

• 2.控制器須要放在指定的模塊範圍內纔會進行處理

  • 3.可以有多個控制器