AngularJS的學習筆記（一）

標籤：[]   構建   class   hub   不同的   資料繫結   開始   情況   mic   

聲明：單純作為我自己的學習筆記，純是為了自己學習，上面的話都是從各處粘貼，如有冒犯，請原諒我這個小菜鳥~

 

AngularJS使用了不同的方法，它嘗試去補足HTML本身在構建應用方面的缺陷。

使用雙大括弧{{}}文法進行資料繫結；使用DOM控制結構來實現迭代或者隱藏DOM片段；支援表單和表單的驗證；能將邏輯代碼關聯到相關的DOM元素上；能將HTML分組成可重用的組件。 AngularJS主要考慮的是構建CRUD應用。（增加Create、查詢Retrieve、更新Update、刪除Delete）。幸運的是，至少90%的WEB應用都是CRUD應用。但是要瞭解什麼適合用AngularJS構建，就得瞭解什麼不適合用AngularJS構建。如遊戲，圖形介面編輯器，這種DOM操作很頻繁也很複雜的應用，和CRUD應用就有很大的不同，它們不適合用AngularJS來構建。像這種情況用一些更輕量、簡單的技術如jQuery可能會更好。 AngularJS的優點：1）移除回調。回調的使用會打亂你的代碼的可讀性，讓你的代碼變得支離破碎，很難看清本來的商務邏輯。大幅度地減少你因為JavaScript這門語言的設計而不得不寫的代碼，能讓你把自己應用的邏輯看得更清楚。2）用聲明的方式描述的UI介面可隨著應用狀態的改變而變化，能讓你從編寫低級的DOM作業碼中解脫出來。絕大部分用AngularJS寫的應用裡，開發人員都不用再自己去寫操作DOM的代碼，不過如果你想的話還是可以去寫。3）4）百度百科裡有，就不粘貼了。 以上是AngularJS的背景介紹，，那麼現在，要開始學習啦：）。 

AngularJS 通過新的屬性和運算式擴充了 HTML。

AngularJS 可以構建一個單一頁面應用程式

AngularJS 擴充了 HTML

AngularJS 通過 ng-directives 擴充了 HTML。

ng-app 指令定義一個 AngularJS 應用程式。

ng-model 指令把元素值（比如輸入欄位的值）綁定到應用程式。

ng-bind 指令把應用程式資料綁定到 HTML 視圖。

 

AngularJS 使得開發現代的單一頁面應用程式（SPAs：Single Page Applications）變得更加容易。

• AngularJS 把應用程式資料綁定到 HTML 元素。
• AngularJS 可以複製和重複 HTML 元素。
• AngularJS 可以隱藏和顯示 HTML 元素。
• AngularJS 可以在 HTML 元素"背後"添加代碼。
• AngularJS 支援輸入驗證。

第一步，想jQuery一樣，先把檔案引進來呀

<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

建議放在body的下面，原因你知道的。

各個 angular.js 版本下載： https://github.com/angular/angular.js/releases

在某一個div中加入ng-app=“”來開啟一個angularjs的一個應用程式

AngularJS 指令是以 ng 作為首碼的 HTML 屬性。

ng-init 指令初始化 AngularJS 應用程式變數。

HTML5 允許擴充的（自製的）屬性，以 data- 開頭。
AngularJS 屬性以 ng- 開頭，但是您可以使用 data-ng- 來讓網頁對 HTML5 有效。

AngularJS 運算式寫在雙大括弧內：{{ expression }}。

AngularJS 運算式 很像 JavaScript 運算式：它們可以包含文字、運算子和變數。

AngularJS 模組（Module） 定義了 AngularJS 應用。

AngularJS 控制器（Controller） 用於控制 AngularJS 應用。

ng-app指令定義了應用, ng-controller 定義了控制器。

 

AngularJS 模組var app = angular.module(‘myApp‘, []); AngularJS 控制器app.controller(‘myCtrl‘, function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});

 

 

AngularJS的學習筆記（一）