正經的來啦

（MVC）

• View(視圖), 即 HTML。
• Model(模型), 當前視圖中可用的數據。
• Controller(控制器), 即 JavaScript 函數，可以添加或修改屬性。
  修改了視圖，模型和控制器也會相應更新。

<div ng-app="myApp" ng-controller="myCtrl"><input ng-model="name"><h1>我的名字是 {{name}}</h1>/*視圖*/</div><script> var app = angular.module('myApp', []);/*模型*/ /*控制器*/ app.controller('myCtrl', function($scope) {$scope.name = "John Dow"; }); </script>

---

AngularJS指令

ng-model

使用ng-model進行雙向數據綁定:就是將ng-model=“value”設置在輸入框中，實現與AngularJS的表達式{{變量名}}的數據綁定。ng-model的value值就是AngularJS表達式中的變量名。

數量： <input type="number" ng-model="quantity"> 價格： <input type="number" ng-model="price"><p><b>總價：</b> {{ quantity * price }}</p>

ng-repeat

ng-repeat就是重復html元素
通常用來循環數組
<li ng-repeat="x in names"> {{ x }} </li>
names是一個數組，輸出數組中的每個值，每個值對應一個li標簽。
通常用在數組對象上。

names=[ {name:'Jani',country:'Norway'}, {name:'Hege',country:'Sweden'}, {name:'Kai',country:'Denmark'}] <li ng-repeat="x in names">{{ x.name + ', ' + x.country }}</li>

ng-init 指令為 AngularJS 應用程序定義了 初始值。
ng-app 指令定義了 AngularJS 應用程序的 根元素,就是AngularJS的作用范圍。

---

Scope作用域

Scope的使用

scope是一個JavaScript對象，帶有屬性和方法。應用于變量和函數。

<div ng-app="myApp" ng-controller="personCtrl">名: <input type="text" ng-model="firstName"><br> 姓: <input type="text" ng-model="lastName"><br> <br> 姓名: {{fullName()}}</div> <script> var app = angular.module('myApp', []); app.controller('personCtrl', function($scope) {$scope.firstName = "John";$scope.lastName = "Doe";$scope.fullName = function() {return $scope.firstName + " " + $scope.lastName;} }); </script>

在構造控制器的時候，可以將$scope對象當做控制器函數的參數使用。

app.controller('myCtrl', function($scope) {$scope.carname = "Volvo"; });

在視圖（html）中獲取$scope對象的參數的時候，可以直接添加屬性名，不需要添加$scope前綴，如：{{carname}} 。

$rootScope 與$scope的作用域范圍。

app.controller('myCtrl', function($scope, $rootScope) {$scope.names = ["Emil", "Tobias", "Linus"];$rootScope.lastname = "Refsnes";

$scope作用在myCtrl這個控制器controller的范圍內
$rootScope作用在ng-app控制的范圍內，可以在各個controller中使用。

---

AngularJS過濾器

過濾器可以通過一個管道字符（|）和一個過濾器（currency,filter,lowercase,uppercase,orderBy）添加到表達式中。
用法：

<p>姓名為 {{ lastName | uppercase }}</p> <p>姓名為 {{ lastName | lowercase }}</p> <p>總價 = {{ (quantity * price) | currency }}</p> /*排列數組*/ <li ng-repeat="x in names | orderBy:'country'">{{ x.name + ', ' + x.country }} </li> /*過濾器綁定輸入：過濾器通過管道字符"|"與過濾器添加導致令中，然后過濾器之后跟一個冒號和一個模型的名字name(ng-model="name")*/ <li ng-repeat="x in names | filter:test | oderBy:'country'">{{x.name | uppercase}}+{{x.country}} </li>

---

AngularJS服務（service）

AngularJS服務是一個函數或者一個對象

$location服務

有一個$location服務可以返回當前頁面的url地址。

var app = angular.module('myApp',[]); app.controller('myCtrl',function($scope,$location){$scope.myUrl = $location.absUrl(); });

---

$http服務

AngularJS中的常用的服務，用來向服務器發送請求，響應服務器傳過來的數據。
例如，使用$http向服務器請求數據：

var app=angular.module("myApp",[]); app.controller("myCtrl",function($scope,$http){$http.get("welcome.html").then(function(response){$scope.welcome=response.data;}); });

AngularJS $http 是一個用于讀取web服務器上數據的服務。
$http.get(url) 是用于讀取服務器數據的函數。
請求讀取PHP數據,例子：

<script> var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $http) {$http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php").success(function(response) {$scope.names = response.records;}); }); </script>

---

$timeout服務

相當于js中的window.setTimeout。

var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $timeout) {$scope.myHeader = "Hello World!";$timeout(function () {$scope.myHeader = "How are you today?";}, 2000); });

2秒之后，myHeader的內容被替換為“How are you today ?”

---

$interval服務

相當于js當中的window.setInterval函數

var app = angular.module('myApp', []); app.controller('myCtrl', function($scope, $interval) {$scope.theTime = new Date().toLocaleTimeString();$interval(function () {$scope.theTime = new Date().toLocaleTimeString();}, 1000); });

顯示以1秒變化的時鐘。

---

AngularJS Select（選擇框）

ng-options創建下拉列表

ng-options指令選擇的是一個對象
例如:
數據源對象：使用對象作為數據源, x 為鍵(key), y 為值(value):

$scope.cars={ car01:{brand : "Ford", model : "Mustang", color : "red"}, car02 : {brand : "Fiat", model : "500", color : "white"}, car03 : {brand : "Volvo", model : "XC90", color : "black"} };

使用ng-options，選擇的為key-value鍵值對里面的value值，是通過鍵key來選擇，也可以將value看做一個對象。

<select ng-model="selectedCar" ng-options="x for (x, y) in cars"> </select><h1>你選擇的是: {{selectedCar.brand}}</h1> <h2>模型: {{selectedCar.model}}</h2> <h3>顏色: {{selectedCar.color}}</h3>

下拉列表中有car01 car02 car03.想，選擇car01 會出現相應的值的信息。

ng-repeat與ng-options的區別

數據源對象：

$scope.sites = [{site : "Google", url : "http://www.google.com"},{site : "Runoob", url : "http://www.runoob.com"},{site : "Taobao", url : "http://www.taobao.com"} ];

ng-repeat有局限性，它的選擇的值是一個字符串;

<select ng-model="selectedSite"> <option ng-repeat="x in sites" value="{{x.url}}">{{x.site}}</option> </select><h1>你選擇的是: {{selectedSite}}</h1>

使用 ng-options 指令，選擇的值是一個對象：

<select ng-model="selectedSite" ng-options="x.site for x in sites"> </select><h1>你選擇的是: {{selectedSite.site}}</h1> <p>網址為: {{selectedSite.url}}</p>

兩者同樣會出現，點擊下拉列表中的Google出現其url。

---

AngularJS模塊module

模塊介紹：

模塊是應用程序中不同部分的容器，常用作控制器的容器。
通常app.js中放置整個項目中使用的各個模塊，將控制器放在控制器的js文件中。
模塊中使用控制器的例子：

var app = angular.module("myApp",[]); app.controller("myCtrl",function($scope){$scope.firstname="Bi";$scope.lastname="Sha"; });

---

定義模塊：

var app=angular.module("myApp",[]);

其中，第一個參數"myApp"是模塊的名字，應用在html的作用范圍中ng-app="myApp"；
第二個參數[]定義模塊的依賴關系，如果有依賴，就將依賴的模塊名寫在"[]"內部。

---

AngularJS 路由

基本介紹

路由就是通過不同的url來訪問不同的內容，通過AngularJS可以實現多視圖的單頁weby應用。
通常我們的url格式為http://XX.com/first/page，在AngularJS當中，單頁的web應用通過#+標記。如：http://XX.com/#/first。
解釋：當點擊http://xx.com/#/page的時候，向服務器請求的地址都是http://xx.com/，#之后的內容會在向服務器發送請求的時候會被客戶端忽略掉，所以需要在客戶端實現#號后面的內容功能。

---

AngularJS 路由的用法

<html><head><meta charset="utf-8"><title>AngularJS 路由實例</title></head><body ng-app='routingDemoApp'><h2>AngularJS 路由應用</h2><ul><li><a href="#/">首頁</a></li><li><a href="#/computers">電腦</a></li><li><a href="#/printers">打印機</a></li><li><a href="#/blabla">其他</a></li></ul><div ng-view></div><script src="angular.min.js"></script><script src="angular-route.js"></script><script>angular.module('routingDemoApp',['ngRoute']).config(['$routeProvider', function($routeProvider){$routeProvider.when('/',{template:'這是首頁頁面'}).when('/computers',{template:'這是電腦分類頁面'}).when('/printers',{template:'這是打印機頁面'}).otherwise({redirectTo:'/'});}]);</script></body> </html>

實例代碼分析

1、要載入angular-route.js
2、注入ngRoute作為主模塊的依賴模塊
3、使用ng-view指令規定顯示視圖頁面的位置。
4.配置$routeProvider,用$routeProvider來定義路由規則。

module.config(['$routeProvider',function($routeProvider){$routeProvider.when('/',{template:'首頁'}).when('/computers',{template:'電腦分類頁'}).when('/printers',{template:'打印機頁'}).otherwise({redirectTo:'/'});//返回首頁。 }]);

使用config函數來配置路由規則：

• 通過使用configAPI，把$routeProvider注入到配置函數，并使用$routeProvide.whenAPI來定義路由規則。
• $routeProvider使用when(path,object)&otherwise(path,object)函數來按順序定義所有路由。兩個參數：
  + path：URL或者URL正則規則
  + object： 路由配置的對象：
  配置路由對象語法：

$routeProvider.when(url, {template: string,templateUrl: string,controller: string, function 或 array,controllerAs: string,redirectTo: string, function,resolve: object<key, function>}); template:在 ng-view 中插入簡單的 HTML 內容templateUrl:在 ng-view 中插入 HTML 模板文件 $routeProvider.when('/computers', {templateUrl: 'views/computers.html',}); controller:function、string或數組類型，在當前模板上執行的controller函數，生成新的scope。controllerAs:string類型，為controller指定別名。redirectTo:重定向的地址。resolve:指定當前controller所依賴的其他模塊。

轉載于:https://www.cnblogs.com/this-xiaoming/p/5807799.html

總結

以上是生活随笔為你收集整理的AngularJs详细的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。