Angular 基礎入門
簡介
什麼是AngularJS
- 一個功能非常完備的前端框架，通過增強HTML的方式提供一種便捷開發Web應用程式的方式
- 其核心特點就是幾乎無任何DOM操作，讓開發人員的精力和時間全部集中於業務
- MVC的特性增強了程式碼的結構和可維護性，應對需求的變化做出最小的改動
為什麼使用AngularJS
- 更少的程式碼實現更強勁的功能
- 提供了很多在傳統後端開發中大量使用的思想和方式，提高前臺程式碼的結構和可維護性
使用AnuglarJS的流程
- 在HTML中引入Angular.js檔案
- 在自己的程式碼中定義一個AngularJS的模組
- 將模組作用到HTML中的某個節點
- 根據模組的功能定義控制器
- 根據當前頁面原型設計$scope的結構
- 通過$scope暴露資料和行為
- 將暴露出來的資料和行為通過特定的指令繫結到HTML節點中
MVC
- 一種應用程式的設計思想，其目的是為了對應用程式的組成進行劃分，讓結構更加清晰可維護性更高，確保每個原件都有明確的單一職責
模組
- 可以通過
angular.module()方法操作模組- 注意：該方法只有在傳入兩個引數時才會建立模組，否則為獲取已有模組
定義模組
// 第一個引數為模組名，第二個引數為當前這個模組所依賴的模組列表
angular.module('ModuleName', []);獲取已經定義過的模組
var existModule = angular.module('ExistModule');
如何劃分模組
1.根據當前需要開發的應用程式的組成劃分需要多少模組，
比如：
- 註冊模組
- 登入模組
- 使用者列表頁模組
- 使用者詳細頁模組
- etc.
2. 根據檔案型別的不同來劃分
比如：
- 所有的控制器
- 所有的服務
- 所有的指令
- etc.
控制器
當下的企業開發，如果使用Angular，主要就是開發對應的控制器和模型
定義控制器
定義控制器可以有三種方式，注意第一種已經被淘汰
傳統方式（不要再用了）
在最早期的 Angular 程式碼中可能會見到以全域性函式的方式定義的控制器：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>早期的控制器定義方式-全域性函式</title> </head> <body ng-app> <div ng-controller="FooController"> <input type="button" value="clicked me!" ng-click="say()"> </div> </body> </html>
function FooController($scope) {
$scope.say = function(){
console.log('hello angular');
};
}這種方式現在已經不被支援，就算沒有淘汰也不應該使用，太low（全域性作用域的問題）
常用方式（掛載在某個模組下）（必須掌握）
Angular中最常見的一種使用方式，通過模組中定義的controller方法定義控制器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用方式（掛載在某個模組下）</title>
</head>
<body ng-app="MyModule">
<div ng-controller="FooController">
<input type="button" value="clicked me!" ng-click="say()">
</div>
</body>
</html>angular.module('MyModule', [])
.controller('FooController', function($scope) {
$scope.say = function(){
console.log('hello angular');
};
});定義型別的方式（建構函式）
對於喜歡通過定義建構函式的方式編寫面向物件程式碼的同學可以使用建構函式的形式定義一個控制器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>面向物件的方式</title>
</head>
<body ng-app="MyModule">
<div ng-controller="FooController as context">
<input type="button" value="clicked me!" ng-click="context.say()">
</div>
</body>
</html>function FooController() {
this.message = 'hello angular';
}
FooController.prototype.say = function() {
console.log(this.message);
};
angular.module('MyModule', [])
.controller('FooController', FooController);注意事項
- 在以上的使用方式中，如果需要為控制器函式注入類似
$scope之類的引數，必須確保引數名為一個特定值 - 也就是說Angular會根據引數名稱自動注入對應的物件（與引數個數，出現順序無關），所以引數名一定不能寫錯
- 但是，我們對於寫完的JS程式碼經常會在上線之前對程式碼進行壓縮
- 壓縮的過程中如果啟用混淆壓縮的話，就會造成引數名變化
- 一旦變化了引數名，NG就無法為其注入對應的物件了
所以，最安全的寫法就是不要依賴引數名（依賴不會變化的東西）：
angular.module('MyModule', [])
.controller('FooController', ['$scope', function(whatever) {
whatever.say = function(){
console.log('hello angular');
};
}]);解決方式就是將建立控制器的第二個引數改為一個數組，陣列的最後一個成員就是以前的控制器函式，前面的成員就是控制器函式需要注入的物件列表，按照順序對應
擴充套件小知識：實現原理
如何根據引數名傳入特定物件？
function getFnParams(fn) {
if (typeof fn == 'function') {
var mathes = /.+\((.+)\)/.exec(Function.prototype.toString.call(fn));
if (mathes[1]) {
var args = mathes[1].replace(/\s/g, '').split(',');
return args;
}
}
}
function foo(id, name, a1ge) {}
console.log(getFnParams(foo));$scope
- 檢視和控制器之間的資料橋樑
- 用於在檢視和控制器之間傳遞資料
- 用來暴露資料模型（資料，行為）
ViewModel
- $scope 實際上就是MVVM中所謂的VM（檢視模型）
- 正是因為$scope在Angular中大量使用甚至蓋過了C（控制器）的概念，所以很多人（包括我）把Angular稱之為MVVM框架
- 這一點倒是無所謂，具體看怎麼用罷了
大家必須掌握的就是如何根據一個原型抽象出對應的檢視模型
表示式
類似於模版引擎的語法
作用：
使用表示式把資料繫結到 HTML。
語法：
- 表示式寫在雙大括號內：{{ expression }}。
- AngularJS 表示式很像 JavaScript 表示式
- 它們可以包含文字、運算子和變數
- 如 {{ 5 + 5 }} 或 {{ firstName + '-' + lastName }}
支援的型別
- 數字 {{ 100 + 100 }}
- 字串 {{ 'hello' + 'angular' }}
- 物件 {{ zhangsan.name }}
- 陣列 {{ students[10] }}
與JS的比較：
相同點：
- AngularJS 表示式可以包含字母，操作符，變數。
不同點：
- AngularJS 表示式可以寫在 HTML 中。
- AngularJS 表示式不支援條件判斷，迴圈及異常。
- AngularJS 表示式支援過濾器。
指令
- 在 AngularJS 中將字首為 ng- 這種屬性稱之為指令，其作用就是為 DOM 元素呼叫方法、定義行為繫結資料等
- 簡單說：當一個 Angular 應用啟動，Angular 就會遍歷 DOM 樹來解析 HTML，根據指令不同，完成不同操作
指令標準屬性的問題
- ng-xxx 的屬性本身並不是標準中定義的屬性
- 很多情況下語法校驗是無法通過的
- HTML5 允許擴充套件的（自制的）屬性，以 data- 開頭。
- 在 AngularJS 中可以使用 data-ng- 來讓網頁對 HTML5 有效。
- 二者效果相同。
內建指令
ng-app
- ng-app 指令用來標明一個 AngularJS 應用程式
- 標記在一個 AngularJS 的作用範圍的根物件上
- 系統執行時會自動的執行根物件範圍內的其他指令
- 可以在同一個頁面建立多個 ng-app 節點（不推薦）
- 建立多個ng-app時，預設只能執行第一個，後面的需要手動引導：angular.bootstrap()
- 標記的範圍儘可能小，效能
ng-model
- 用於建立介面上的元素到資料模型屬性的雙向資料繫結
- 一般情況繫結到元素的value屬性上
- 但是在checkbox之類的表單元素會有不同
ng-bind
ng-bind-html
ng-repeat
ng-class
ng-cloak
ng-show/ng-hide/ng-if
ng-src
ng-switch
其他常用指令
- ng-checked：
- 單選/複選是否選中，只是單向繫結資料
- ng-selected：
- 是否選中，只是單向繫結資料
- ng-disabled：
- 是否禁用
- ng-readonly：
- 是否只讀
常用事件指令
不同於以上的功能性指令，Angular還定義了一些用於和事件繫結的指令：
- ng-blur：
- 失去焦點
- ng-change：
- 發生改變
- ng-copy：
- 拷貝完成
- ng-click：
- 單擊
- ng-dblclick：
- 雙擊
- ng-focus：
- 得到焦點
- ng-blur：
- 失去焦點
- ng-submit：
- 表單提交
自定義指令
- 指令無外乎增強了 HTML，提供額外的功能
- 以上的指令基本上已經可以滿足我們的絕大多數需要了
- 少數情況下我們有一些特殊的需要，可以通過自定義指令的方式實現：
元件式指令Demo
myModule.directive('hello', function() {
return {
restrict: 'E',
template: '<h1>Hello world</h1>',
replace: true
};
});功能型指令Demo
myApp.directive("ngHover", function() {
return function(scope, element, attrs) {
element.bind("mouseenter", function() {
element.css("background", "yellow");
});
element.bind("mouseleave", function() {
element.css("background", "none");
});
}
});自定義指令的型別
- E：Element（元素）
- A：Attribute（屬性）
- C：Class（類名）
- M：Comment（註釋）
注意：
在定義指令應該使用駝峰命名法，使用指令時應該使用的是全小寫字母中劃線分割的方式
相關推薦
Angular 基礎入門
簡介 什麼是AngularJS 一個功能非常完備的前端框架，通過增強HTML的方式提供一種便捷開發Web應用程式的方式 其核心特點就是幾乎無任何DOM操作，讓開發人員的精力和時間全部集中於業務 MVC的特性增強了程式碼的結構和可維護性，應對需求的變化做出最小的改動 為什麼使用AngularJS 更少的程
angular.js入門基礎（一）
AngularJS簡介 AngularJS 誕生於 2009 年，由 Misko Hevery 等人建立，後為 Google 所收購。是一款優秀的前端 JS 框架，已經被用於 Google 的多款產品當中。AngularJS 有著諸多特性，最為核心的是：MVC、模組
python簡介及基礎入門 day1
blog 美女 顯示 中文 公開 wid 能開 程序 cnblogs 一、python介紹： Python是一種解釋型、面向對象、動態數據類型的高級程序設計語言。 Python由Guido van Rossum於1989年底發明，第一個公開發行版發行於1991年
【原創 Hadoop&Spark 動手實踐 5】Spark 基礎入門，集群搭建以及Spark Shell
min util man 操作 because tro txt library all Spark 基礎入門，集群搭建以及Spark Shell 主要借助Spark基礎的PPT，再加上實際的動手操作來加強概念的理解和實踐。
Angular Service入門
瀏覽器 chrome promise 開發者 filter 1.Angular內置serviceAngular為了方便開發者開發，本身提供了非常多的內置服務。可以通過https://docs.angularjs.org/api/ng/service查看AngularJS提供的內置服務。在企
python 基礎入門
兩個 快捷語法 字母 雙引號 ted perl 關鍵字 表達 pass Python 特點 1.易於學習：Python有相對較少的關鍵字，結構簡單，和一個明確定義的語法，學習起來更加簡單。 2.易於閱讀：Python代碼定義的更清晰。 3.易於維護：Pytho
Angular 基礎
orm lur service ont 標記 三層 utf-8 區別 nec 安裝 1.官網http://angularjs.org/下載安裝 2.開源庫http://www.bootcdn.cn/下載安裝 Angular除了提供一些需要最新瀏覽器支持的功能外，同時提供以下
Linux基礎入門--IO重定向及管道
linux_io重定向、管道IO重定向及管道 一直都提到，程序：指令+數據 其實程序也有IO，數據的來源有多個地方：文件、外部可用於輸入的設備：文件（linux一切皆文件） 鍵盤設備、文件系統上的常規文件加載內容、網卡等；可用於輸出的設備：文件（linux一切皆文件） 顯示器、文件系統
linux 基礎入門學習
基礎知識 二進制 配置文件 學習計算機 linux程序 上節課學習計算機基礎以及liunx起源和自由軟件協議的相關規定，今天學習相關linux入門的基礎知識： 一、首先講解了linux程序包的管理 1、程序包的組成：(1)二進制文件(2) 配置文件(3)庫文件(4)幫助文件
EasyUI基礎入門之Pagination(分頁)
比例 tab 由於 名稱 script idt 分隔符 jquery show 前言 對於一些企業級的應用來說(非站點),頁面上最為基本的內容也就是表格和form了。對於類似於ERP這類系統來說數據記錄比較大,前端表格展示的時候必需得實現分頁功能了。恰巧
angular 基礎router
改變 動態 參數數組 告訴 通用 切換 設置 顯示 tin anuglar中路由器設置按照具體路由到通用路由的設置。因為Angular使用先匹配者優先。 路由的出口在router-outlet標簽中顯示。<router-outlet></router-ou
Linux基礎入門--find（文件查找）
linux基礎find文件查找：在文件系統上查找符合條件的文件，條件是自己給出Linux系統上實現工具：locate，findlocate： 依賴於實現構建好的索引庫，系統自動實現，一旦文件發生變化需要一定的周期時間更新。也可以手動更新數據。在索引構建過程中需要遍歷整個文件系統，極消耗資源。 工作特點：
Hive 基礎入門
加載 http 基礎入門 沒有 運行 轉化 自定義 函數 images Hive的官方網站： https://hive.apache.org/ Hive簡介： Hive 是基於Hadoop 的一個數據倉庫工具，可以將結構化的數據文件映射成一張表，並提
mysql零基礎入門視頻教程免費分享！
mysql零基礎入門視頻教程免費分享！ MySQL是一個關系型數據庫管理系統，由瑞典MySQL AB 公司開發，目前屬於 Oracle 旗下產品。MySQL 是最流行的關系型數據庫管理系統之一，在 WEB 應用方面，MySQL是最好的 RDBMS (Relational Da
轉載8天學通MongoDB——第一天 基礎入門
綠色 lin items odi back 微博 comm replace middle 關於MongoDB的好處，優點之類的這裏就不說了，唯一要講的一點就是mongodb中有三元素：數據庫，集合，文檔，其中“集合” 就是對應關系數據庫中的“表”，“文檔”對應
mysql零基礎入門視頻教程免費分享！很簡單
mysql零基礎入門視頻教程免費分享！很簡單 MySQL是一個關系型數據庫管理系統，由瑞典MySQL AB 公司開發，目前屬於 Oracle 旗下產品。MySQL 是最流行的關系型數據庫管理系統之一，在 WEB 應用方面，MySQL是最好的 RDBMS (Relational
Angular基礎（二）
spa rip 函數 itl 利用 lin 作用域 eight res 雙向數據 利用angular把input框裏面的值和h3的值綁定在一起。在input裏輸入內容，內容會在h3標簽裏顯示出來。 具體效果請看下面代碼： <!DOCTYPE html>
Python基礎入門教程，Python學習路線圖
第一天 字符 語法 知識 國內 排序 inux 跟著 最好的 給大家整理的這套python學習路線圖，按照此教程一步步的學習來，肯定會對python有更深刻的認識。或許可以喜歡上python這個易學，精簡，開源的語言。此套教程，不但有視頻教程，還有源碼分享，讓大家能真正
python-基礎入門-3（對文件操作）
col 文件打開 hello cnblogs you write line div 打印 打開文件用open()函數 open（filename）默認為讀取模式 等價於open（filename，‘r‘） 1 txt=open(filename) 2 print txt.r
java基礎入門-建立能夠多client鏈接的ServerSocket
線程池 今天 asn puts str java.net run auto lock 承接上一篇文章，今天談論一下能夠多client鏈接的ServerSocket。 這裏面註意涉及到的技術點是： 1.ServerSocket 2.多線程 這次我們分成