標籤：注釋 strong mouseover isa 標籤 console 分享 load mvc
一、介紹1、是前端MVC架構，由Google公司維護的。2、特點：模組化、雙向資料繫結、語義化標籤、依賴注入等。3、其實jQuery只是一個類庫，並不是一個架構。類庫只是一堆函數的集合體。4、Angular是一個架構，是一堆類庫的集合體。5、jquery是以DOM為驅動的，二Angular是以資料和邏輯來驅動的（核心）。6、與Angular類似的架構還有很多：BackBone、KnockoutJS、Vue、React等。7、本質上也是js檔案。二、下載1、官網2、npm下載3、bower下載三、體驗<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script></head><body ng-app> <input type="text" ng-model="msg"> <h3>{{msg}}</h3></body></html> 四、MVC概念1、分工明確：提高效率。將工作內容對員工進行分工。目的是可以使工作效率得到提升。（後端 處理資料（Model模型），前端 展示資料（View視圖），前端與後端之間個協調者，叫做（Controller控制器））。2、唯一的目的是為了提升開發效率。3、MVVM（model view viewmodel）這個是前端的MVC，他的核心思想是一樣的。MVW、MVP、MV*都是MVC的衍生版五、模組化1、模組化是一種思想。2、Angularjs也是模組的方式來組織代碼的。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script></head><body> <!-- 指定一個應用 （就是一堆功能的集合）（一個網站就是一個應用--> <!-- 通過一個屬性來指定一個應用 --> <!-- ng-app屬性所在標籤所包含的所有子內容，都屬於應用的一部分 --> <div class="box" ng-app="App"> <!-- 通過ng-controller可以定義視圖 --> <!-- ng-controller所對應的標籤所包含的所有子內容都屬於視圖的一部分 --> <div ng-controller="DemoCtrl"> <h1>{{name}}</h1> <span>{{age}}</span> </div> </div> <script> // 通過js邏輯來完成應用的具體功能 // js代碼使按著模組的形式組織的 // 所以開始邏輯前需要建立模組 // Angularjs有自己的一套建立模組的方法 // 當引入Angular以後，就會提供一個全域的對象叫App。並且在此對象下提供若干方法，其中一個方法叫module，通過此方法可以建立一個模組 // 需要兩個參數 // 第一個是模組名稱（一般對應應用程式名稱）,第二個參數依賴 var App=angular.module(‘App‘,[]); // 模組是以MVC的形式來組織代碼的，模組具備三個角色，分別是MVC // 模組想要工作，需要三個角色配合起來，對三個角色進行建立 // 先建立控制器 // 模組執行個體下有若干方法，其中controller方法用來建立一個控制器 // 需要兩個參數，第一個參數是控制器的名稱（一般有含義的名詞），第二個參數也是依賴 App.controller(‘DemoCtrl‘,[‘$scope‘,function($scope){ // $scope就認為是模型 M // $scope可以認為是一個Null 物件 $scope.name=‘香茗‘; $scope.age=12; }]); </script></body></html> <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script></head><body> <div class="box" ng-app="App"> <div ng-controller=‘DemoCtrl‘> <h1>{{name}}</h1> <span>{{age}}</span> </div> </div> <script> var App=angular.module(‘App‘,[]); App.controller(‘DemoCtrl‘,[‘$scope‘,function($scope){ $scope.name=‘xiaoyagn‘; $scope.age=‘123‘; }]); </script></body></html>兩個模組：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script></head><body> <div class="box" ng-app="App"> <div ng-controller=‘DemoCtrl‘> <h1>{{name}}</h1> <span>{{age}}</span> </div> <div ng-controller=‘DemoCtrl2‘> <h1>{{name}}</h1> <span>{{age}}</span> </div> </div> <script> var App=angular.module(‘App‘,[]); App.controller(‘DemoCtrl‘,[‘$scope‘,function($scope){ $scope.name=‘xiaoyagn‘; $scope.age=‘123‘; }]); // 建立第二個控制器 App.controller(‘DemoCtrl2‘,[‘$scope‘,function($scope){ $scope.name=‘舒見佳‘; $scope.age=‘(?ω?)(?_?) ┗( ▔, ▔ )┛‘; }]); </script></body></html>遍曆模組： <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script></head><body ng-app="App"> <div ng-controller="DemoCtrl"> <table> <tr> <td>姓名</td> <td>年齡</td> <td>性別</td> </tr> <!-- ng-repeat用來重複輸出。重複此屬性所在標籤所包含的所有子項目 --> <tr ng-repeat=‘val in lst‘> <td>{{val.name}}</td> <td>{{val.age}}</td> <td>{{val.gender}}</td> </tr> </table> </div> <script> var App = angular.module(‘App‘ , []); App.controller(‘DemoCtrl‘,[‘$scope‘ , function($scope){ $scope.lst=[ {name:‘123‘,age:50,gender:‘man‘}, {name:‘345‘,age:40,gender:‘female‘}, {name:‘567‘,age:30,gender:‘male‘} ]; }]); </script></body></html> 六、內建指令（就是屬性） ng-app 指定應用根項目，至少有一個元素指定了此屬性。ng-controller 指定控制器ng-show控制元素是否顯示，true顯示、false不顯示ng-hide控制元素是否隱藏，true隱藏、false不隱藏ng-if控制元素是否“存在”，true存在、false不存在ng-src增強圖片路徑ng-href增強地址ng-class控制類名ng-include引入模板ng-disabled表單禁用ng-readonly表單唯讀ng-checked單/複選框表單選中ng-selected下拉框表單選中注意：嵌套是不可以的。prop（）和attr（）區別 - 對於HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。- 對於HTML元素我們自己自訂的DOM屬性，在處理時，使用attr方法。 js是不能主動讀取本地檔案的。具體用法 <!DOCTYPE html><html lang="en" ng-app="App"><head ng-controller="DemoCtrl"> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" ng-href="{{href}}"> <script src="angular.js"></script></head><body > <div class="box" ng-controller="DemoCtrl"> <ul> <li ng-show=‘1‘>ng-show控制元素是否顯示，true顯示、false不顯示</li> <li ng-hide="false">ng-hide控制元素是否隱藏，true隱藏、false不隱藏</li> <li ng-if=‘true‘>ng-if控制元素是否“存在”，true存在、false不存在</li> <li> ng-src增強圖片路徑 <img ng-src="{{path}}" > </li> <li ng-class="{red:true, blue:true}">ng-class控制類名,屬性值為true，相對應的屬性名稱會被當成真實類名添加</li> <li> <input type="text" ng-disabled="false"> </li> <li> <input type="text" ng-readonly="true" value="123"> </li> <li> <input type="checkbox" ng-checked="true"> </li> <li> <select name="" id=""> <option value="">1</option> <option value="" ng-selected="0">2</option> <option value="">3</option> </select> </li> </ul> </div> <script> var App = angular.module(‘App‘, []); App.controller(‘DemoCtrl‘, [‘$scope‘, function ($scope) { $scope.path = ‘9919.png‘; $scope.href = ‘01.css‘; }]); </script></body></html>ng-include指令：必須在伺服器下運行ng-include 指令用於包含外部的 HTML 檔案。包含的內容將作為指定元素的子節點。 ng-include 屬性的值可以是一個運算式，返回一個檔案名稱。預設情況下，包含的檔案需要包含在同一個網域名稱下。屬性：filename 檔案名稱，可以使用運算式來返迴文件名。 onload 可選， 檔案載入後執行的運算式。 autoscroll 可選，包含的部分是否在指定視圖上可滾動。 <div ng-include="‘myFile.htm‘"></div> 七、自訂指令：核心知識點（Vue是重點，Angular過於複雜，所有學的是弱化的） <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script></head><body ng-app="App"> <div class="box" ng-controller="DemoCtrl"> <ul> <li demo></li> <demo></demo> </ul> </div> <script> var App=angular.module(‘App‘,[]); App.controller("DemoCtrl",[‘$scope‘,function($scope){ }]); // directive用來定義一個指令 // 需要兩個參數，第一個為指令的名稱，第二個為指令的邏輯 App.directive(‘demo‘,function(){ // 這裡寫一個邏輯 // console.log(1); // 必須返回一個值，可以是對象或者函數 // 對象有一定的要求 return { // A attritube表示此指令可以通過指令來使用 // E element表示此指令可以通過標籤來使用 、M是注釋（ <!-- directive:demo -->使用）、C是類名 // restrict: ‘A‘, restrict: ‘ECMA‘, template: ‘<h1>Hello Angularjs</h1>‘, replace: true,//li只是一個預留位置 // 引入一個外部檔案 templateUrl:‘07.html‘ } }); // 上述代碼定義了一個非常基本的指令，只滿足了文法，其使用方法與內建指令一樣 </script></body></html> 8、資料繫結： 所謂的資料繫結其實就是指的將特定的模型資料與視圖位置建立一種關聯關係，這種關係就是資料繫結。單向綁定：雙向繫結： 第一種寫法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src= "angular.js"></script></head><body ng-app=‘App‘> <div ng-controller="DemoCtrl"> <h1> {{name}} </h1> <ul> <li ng-repeat=‘val in courses‘>{{val}}</li> </ul> </div> <script> var App=angular.module(‘App‘,[]); App.controller(‘DemoCtrl‘,[‘$scope‘, function ($scope){ $scope.name=‘小明‘; $scope.courses=[‘html‘,‘js‘,‘css‘]; }]) </script></body></html>第二種寫法<!-- ng-bind 是用來實現資料繫結到模型上的指令,{{}}是ng-bind的簡寫入模式 --> <h1 ng-bind=‘name‘> </h1> <ul> <li ng-repeat=‘val in courses‘ ng-bind=‘val‘></li> </ul> ng-model用來將視圖資料繫結到模型上<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="angular.js"></script></head><body ng-app="App"> <div ng-controller=‘DemoCtrl‘> <input type="text" ng-model=‘msg‘> <h3>{{msg}}</h3> <button ng-click="show()">點擊</button> </div> <script> var App=angular.module(‘App‘,[]); App.controller(‘DemoCtrl‘,[‘$scope‘,function($scope){ $scope.show=function(){ alert($scope.msg) } }]); </script></body></html>ng-bind單向 ng-model（表單元素）雙向閃爍現象：利用ng-bind能夠避免閃爍。但是不能使用兩次，而{{}}可以使用多次在一個標籤之中，ng-bind不建議使用。閃爍現象可以解決（只要把Angularjs拿到前面去，在閃爍標籤加入ng-cloak） <p ng-cloak></p> 通過ng-init指令也可以定義模型資料<div ng-init="name=‘123‘;age=18"></div>區別：簡單的可以這麼寫 9、處理事件placeholder預留位置ng-click="click()"避免全域函數ng-mouseover="over()"ng-blur="blur()" 重複：ng-repeat <div ng-repeat="(key,val) in list">{{key}}{{val}}</div><div ng-repeat="val in list">{{$index}}{{val}}</div>找到遍曆結果是否是奇數項<div ng-repeat="val in list">{{$odd}}{{$index}}{{val}}</div>偶數項<div ng-repeat="val in list">{{$even}}{{$index}}{{val}}</div>第一個<div ng-repeat="val in list">{{$first}}{{$index}}{{val}}</div>最後一個<div ng-repeat="val in list">{{$last}}{{$index}}{{val}}</div>ng-switch on="val"ng-switch-when="html"`
AngularJS【初體驗】-01
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
