Angular 基礎
安裝
1.官網http://angularjs.org/下載安裝
2.開源庫http://www.bootcdn.cn/下載安裝
Angular除了提供一些需要最新瀏覽器支持的功能外，同時提供以下標準功能：
- 依賴註入
- 模板
- 路由（@angular/router）
- AJAX（@angular/http）
- 表單（@angular/forms）
- 組件化CSS封裝
- XSS保護
- 單元測試工具
功能豐富的好處就是你不需要額外費精力去挑選第三方的類庫，然而，這也同樣讓你沒得選擇，即使你並不需要這些功能（最新發布的Angular4貌似已經意識到了這個問題）
MVC
MVC即“模型 - 視圖 - 控制器”的簡稱，一種設計模式，MVC的從邏輯上將代碼清晰地分割為三層，這樣可以對每個部分進行獨立開發、測試和維護。
-
模型/Model - 服務層（service）負責維護數據
-
視圖/View - 展示層（diretive）負責將數據展現給用戶
-
控制器/Controller - 控制層（control）負責控制Model和View之間的交互
應用場景
開發環境 <script src="angular.js"></script>
angualr應用創建基本步驟
1 <!DOCTYPE html> 2 <html lang="en" ng-app="demo"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>demo</title> 6 <link rel="stylesheet" href="bootstrap.css"> 7 8 //link標記允許當前文檔和外部文檔之間建立連接，但是只能在head標簽裏面用 9 <script src="angular.js"></script> 10 </head> 11 <body> 12 {{1+1}} {{msg}} 13 <div id="box" ng-controller="oneCtrl"> 14 {{1+1}} {{msg}} 15 </div> 16 <script> 17 (function(){ 18 angular.module("demo",[]) 19 demo.controller("oneCtrl",function($scope){ 20 21 //學習中一般這樣用 當代碼上線壓縮後 這段代碼會有問題 22 23 demo.controller("myctrl"["$scope","$http"],function (scope,http) { 24 // 開發中要用的表達式 25 26 27 $scope.msg = "hello angular!" 28 }) 29 })() 30 </script>
從其他博客整理來的知識點
1.ng-app,ng-app="",ng-app="demo"三者的區別
答：ng-app有一個默認的模塊。如果有多個ng-app，默認是加載第一個，而且只加載第一個。ng-app=“自定義的模塊” 是一個使用了自定義的模塊，該自定義的模塊繼承了那個初始的默認的模塊，可以調用初始的默認的模塊的方法第二者是第三者的特例。
2.為什麽沒有ng-app,也可以啟動angular?
答：如果在當前的頁面中包含有ng-app這個指令，angular會自動啟動，如果不想在當前的頁面中顯示標識ng-app,我們可以代碼的方式手動啟動，即通過angular.bootstrap(document,["demo"])手動啟動，等價於ng-app="demo";
3.angular.bootstrap(document.getElementById("box"),["demo"])的作用？
答：angular.bootstrap(啟動位置,數組)，啟動位置：表示管理範圍，數組：表示把數組中的當成啟動模塊
控制器之間的繼承
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>demo</title> 6 <link rel="stylesheet" href="bootstrap.css"> 7 <script src="angular.js"></script> 8 </head> 9 <body> 10 {{1+1}} {{msg}} 11 <div id="box" ng-controller="oneCtrl"> 12 {{1+1}} {{msg}} 13 </div> 14 <script> 15 (function(){ 16 angular.module("demo",[]) 17 .controller("oneCtrl",function($scope){ 18 $scope.msg = "hello angular!" 19 }) 20 angular.bootstrap(document,["demo"]); 21 angular.bootstrap(document.getElementById("box"),["demo"]); 22 })() 23 </script> 24 </body> 25 </html>
bootstrap插件使用官網上 http://getbootstrap.com查閱使用
以後仔細學過再來做筆記
Angular控制器
控制angular應用程序的數據。
控制器是JavaScript對象，構造函數
Angular模塊
模塊對應執行應用的HTML元素
模塊可在angular 應用中添加控制器，指令，服務等。
Angular scope（作用域）
作用域是在應用在HTNL(視圖)和JS（控制器）之間
當angular創建控制器時可以將$scope對象當做參數傳遞
scope是一個對象，有可用方法和屬性
簡單的理解：$scope 局部作用域
$rootscope 全局作用域
Angular scope 事件
ng-click/dblclick 點擊/雙擊
ng-mouseover/out
ng-keydown/up
ng-focus/blur 獲取焦點
ng-submit
Angular 指令
指令 是擴展HTNL 為內置的指令來為應用添加功能 帶有前綴 ng-
ng-init 初始化應用程序數據
ng-model 綁定到應用程序（比如輸入的域的值）
ng-repeat 對於集合中（數組中）的每個項 克隆一次HTML元素（ 指令用於循環輸出指定次數的 HTML 元素）
1 <!doctype html> 2 <html lang="en" ng-app="zidingyi"> 3 <head> 4 <meta charset="utf-8"> 5 <title>repeat</title> 6 <meta name="keywords" content=""> 7 <meta name="description" content=""> 8 <script src="angular.min.js"></script> 9 </head> 10 <body> 11 <ul ng-controller="myctrl"> 12 <li ng-repeat="persen in data"> 13 <!-- 循環（for in 循環） --> 14 <span>年齡:{{persen.name}}</span> 15 <span>年齡:{{persen.age}}</span> 16 <span>年齡:{{persen.score}}</span> 17 </li> 18 </ul> 19 <script> 20 var app=angular.module("zidingyi",[]) 21 app.controller("myctrl",function ($scope) { 22 $scope.data=[ 23 {"name":"張三","age":22,"score":98}, 24 {"name":"李四","age":23,"score":70}, 25 {"name":"王五","age":28,"score":90}, 26 {"name":"趙六","age":31,"score":100} 27 ]; 28 }) 29 </script> 30 </body> 31 </html>
運行結果
Angular 基礎