什么是Angularjs

AngularJS 最初由 Misko Hevery 和 Adam Abrons 于 2009 年開發(fā)，后來成為了
Google 公司的項目。 AngularJS 彌補(bǔ)了 HTML 在構(gòu)建應(yīng)用方面的不足，其通過使用標(biāo)識
符（ directives）結(jié)構(gòu)，來擴(kuò)展 Web 應(yīng)用中的 HTML 詞匯，使開發(fā)者可以使用 HTML 來聲
明動態(tài)內(nèi)容，從而使得 Web 開發(fā)和測試工作變得更加容易。
Misko Hevery
Angularjs版本簡介
https://github.com/angular/angular.js/releases/
AngularJS功能：
AngularJS 是專門為應(yīng)用程序設(shè)計的 HTML。
AngularJS 使得開發(fā)現(xiàn)代的單一頁面應(yīng)用程序（ SPAs： Single Page Applications）變得更加容易。
1 AngularJS 把應(yīng)用程序數(shù)據(jù)綁定到 HTML 元素。
2 AngularJS 可以克隆和重復(fù) HTML 元素。
3 AngularJS 可以隱藏和顯示 HTML 元素。
4 AngularJS 可以在 HTML 元素"背后"添加代碼。
5 AngularJS 支持輸入驗證
Angularjs號稱下一代 web應(yīng)用主要特性如下：
1.MVC
2.模塊化與依賴注入
3.雙向數(shù)據(jù)綁定
4.指令與 UI 控件

成都創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比景泰網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式景泰網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋景泰地區(qū)。費(fèi)用合理售后完善，10余年實體公司更值得信賴。

Angularjs資源：
http://Angularjs.org 官方網(wǎng)站正常打不開但是打不開大家都懂的
http://www.angularjs.cn/
http://docs.angularjs.cn/api
http://www.ngnice.com/
https://github.com/angular
Angularjs下載：
http://www.bootcdn.cn/angular.js/
通過 nodejs下載： npm install angular

為了使用 Angular，所有應(yīng)用都必須首先做兩件事情

1. 下載加載 angular.js 庫
2.使用 ng-app 指令告訴 angular 應(yīng)該管理 DOM 中的哪一些部分

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標(biāo)題文檔</title>
<script type="text/javascript" src="angular-1.3.0.js"></script>
</head>
<body>
<div ng-app="">
<p>在輸入框中嘗試輸入： </p>
<p>姓名： <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>

Angularjs中常用名詞也就是所說的常用指令
HTML5 允許擴(kuò)展的（自制的）屬性，以 data-開頭。
AngularJS 屬性以 ng-開頭，但是您可以使用 data-ng-來讓網(wǎng)頁對 HTML5 有效
俗話說下面的指令可以在開頭加上 data- 例如 ng_app 等同于 data_ng_app

什么是 Angularjs

1. ng_app ng_bind ng_model {{}}案例演示
ng_app：
ng-app指令定義了 AngularJS 應(yīng)用程序的根元素。
ng-app 指令在網(wǎng)頁加載完畢時會自動引導(dǎo)（自動初始化）應(yīng)用程序。
稍后您將學(xué)習(xí)到 ng-app 如何通過一個值（比如 ng-app="myModule"）連接到代碼模塊。
ng-model指令：
ng-model 指令綁定 HTML 元素到應(yīng)用程序數(shù)據(jù)。
ng-model 指令也可以：
為應(yīng)用程序數(shù)據(jù)提供類型驗證（ number、 email、 required）。
為應(yīng)用程序數(shù)據(jù)提供狀態(tài)（ invalid、 dirty、 touched、 error）。
為 HTML 元素提供 CSS 類。
綁定 HTML 元素到 HTML 表單。
ng_bind指令等同于{{}}
綁定 HTML 元素到應(yīng)用程序數(shù)據(jù).

示例 1：
<!DOCTYPE html>
<html>
<body>
<div ng-app="">
<p>在輸入框中嘗試輸入： </p>
<p>姓名： <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
</div>
<script src="angular.min.js"></script>
</body>
</html>

示例 2： {{}}等同于 ng_bind
<!DOCTYPE html>
<html>
<body>
<div ng-app="">
<p>在輸入框中嘗試輸入： </p>
<p>姓名： <input type="text" ng-model="name"></p>
<p>{{name}}</p>
</div>
<script src="angular.min.js"></script>
</body>
</html>
實例講解：
當(dāng)網(wǎng)頁加載完畢， AngularJS 自動開啟。
ng-app指令告訴 AngularJS， <div> 元素是 AngularJS 應(yīng)用程序的"所有者"。
ng-model指令把輸入域的值綁定到應(yīng)用程序變量 name。
ng-bind指令把應(yīng)用程序變量 name 綁定到某個段落的 innerHTML。
2. ng_init
ng-init指令
ng-init 指令為 AngularJS 應(yīng)用程序定義了初始值。
通常情況下，不使用 ng-init。您將使用一個控制器或模塊來代替它。
稍后您將學(xué)習(xí)更多有關(guān)控制器和模塊的知識。
<div ng-app="" ng-init="firstName='John'">
<p>姓名為 <span ng-bind="firstName"></span></p>
</div>

3.data-指令 data-ng-init 與 ng-init 等價
<div data-ng-app="" data-ng-init="firstName='John'">
<p>姓名為 <span data-ng-bind="firstName"></span></p>
</div>
6. Angularjs表達(dá)式
AngularJS 表達(dá)式寫在雙大括號內(nèi)： ` expression `。
AngularJS 表達(dá)式把數(shù)據(jù)綁定到 HTML，這與 ng-bind指令有異曲同工之妙。
AngularJS 將在表達(dá)式書寫的位置"輸出"數(shù)據(jù)。
AngularJS表達(dá)式很像 JavaScript表達(dá)式：它們可以包含文字、運(yùn)算符和變量。
實例 {{ 5 + 5 }} 或 {{ firstName + " " + lastName }}
<!DOCTYPE html>
<html>
<body>
<div ng-app="">
<p>我的第一個表達(dá)式： {{ 5 + 5 }}</p>
</div>
<script src="angular.min.js"></script>
</body>
</html>

AngularJS數(shù)字
<div ng-app="" ng-init="quantity=1;cost=5">
<p>總價： {{ quantity * cost }}</p>
</div>
AngularJS字符串
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>姓名： {{ firstName + " " + lastName }}</p>
</div>
AngularJS對象
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>姓為 ` person`.`lastName `</p>
</div>

AngularJS數(shù)組
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>第三個值為 {{ points[2] }}</p>
</div>
7. Angularjs控制器
AngularJS 控制器控制 AngularJS 應(yīng)用程序的數(shù)據(jù)。
AngularJS 控制器是常規(guī)的 JavaScript 對象。
AngularJS 應(yīng)用程序被控制器控制。
ng-controller 指令定義了應(yīng)用程序控制器。
控制器是 JavaScript 對象，由標(biāo)準(zhǔn)的 JavaScript 對象的構(gòu)造函數(shù) 創(chuàng)建。
控制器的 $scope 是控制器所指向的應(yīng)用程序 HTML 元素。
angular 中$scope 是連接 controllers(控制器)和 templates(模板 view/視圖)的主要膠合體。
我們可以把我們的 model 存放在 scope 上，來達(dá)到雙向你綁定。
<!DOCTYPE html>
<html>
<body>
<div ng-app="">
<div ng-controller="personController">
名: <input type="text" ng-model="person.firstName"><br>
姓: <input type="text" ng-model="person.lastName"><br>
<br>
姓名: {{person.firstName + " " + person.lastName}}
</div>
</div>
<script>
function personController($scope) { //不建議這樣寫
$scope.person = {
firstName: "John",
lastName: "Doe"
};
}
</script>
<script src="angular.min.js"></script>
</body>
</html>
實例講解：
AngularJS 應(yīng)用程序由 ng-app定義。應(yīng)用程序在 <div> 內(nèi)運(yùn)行。
ng-controller指令把控制器命名為 object。
函數(shù) personController是一個標(biāo)準(zhǔn)的 JavaScript 對象的構(gòu)造函數(shù)。
控制器對象有一個屬性： $scope.person。
person 對象有兩個屬性： firstName和 lastName。
ng-model指令綁定輸入域到控制器的屬性（ firstName 和 lastName）。
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-controller="personController">
名: <input type="text" ng-model="person.firstName"><br>
姓: <input type="text" ng-model="person.lastName"><br>
<br>
姓名: {{person.fullName()}}
</div>
<script>
function personController($scope) {
$scope.person = {
firstName: "John",
lastName: "Doe",
fullName: function() {
var x = $scope.person;
return x.firstName + " " + x.lastName;
}
};
}
</script>

8. Angularjs $http請求數(shù)據(jù)
1. get請求
<div ng-app="" ng-controller="customersController">
<ul>
<li ng-repeat="x in names">
{{ x.Name + ', ' + x.Country }}
</li>
</ul>
</div>
<script>
function customersController($scope,$http) {
$http.get("http://www.w3cschool.cc/try/angularjs/data/Customers_JSON.php")
.success(function(response) {$scope.names = response;});
}
</script>
$http get實例 1：
$http.get("http://www.w3cschool.cc/try/angularjs/data/Customers_JSON.php").success(function
(response) {$scope.names = response;});
$http get實例 2：
$http.get(url,{params:{id:'5'}}) .success(function(response) {
$scope.names = response;
}).error(function(data){
//錯誤代碼
});
$http post實例：
var postData={text:'這是 post 的內(nèi)容'};
var config={params:{id:'5'}}
$http.post(url,postData,config) .success(function(response) {
$scope.names = response;
}).error(function(data){
//錯誤代碼
});
$http Jsonp實例：
myUrl =
"http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSON_
CALLBACK";
$http.jsonp(myUrl).success(
function(data){
$scope.portalcate = data.result;
}
).error(function(){
alert('shibai');
});
9. Angularjs過濾器
AngularJS過濾器
AngularJS 過濾器可用于轉(zhuǎn)換數(shù)據(jù)：
過濾器描述
currency 格式化數(shù)字為貨幣格式。
filter 從數(shù)組項中選擇一個子集。
lowercase 格式化字符串為小寫。
orderBy 根據(jù)某個表達(dá)式排列數(shù)組。
uppercase 格式化字符串為大寫。
向表達(dá)式添加過濾器
過濾器可以通過一個管道字符（ |）和一個過濾器添加到表達(dá)式中。
（下面的兩個實例，我們將使用前面章節(jié)中提到的 person 控制器）
uppercase過濾器格式化字符串為大寫：
<div ng-app="" ng-controller="personController">
<p>姓名為 {{ person.lastName | uppercase }}</p>
</div>
lowercase過濾器格式化字符串為小寫：
<div ng-app="" ng-controller="personController"">
<p>姓名為 {{ person.lastName | lowercase }}</p>
</div>
currency過濾器
currency過濾器格式化數(shù)字為貨幣格式：
<div ng-app="" ng-controller="costController">
數(shù)量： <input type="number" ng-model="quantity">
價格： <input type="number" ng-model="price">
<p>總價 = {{ (quantity * price) | currency }}</p>
</div>
向指令添加過濾器
過濾器可以通過一個管道字符（ |）和一個過濾器添加到指令中。
orderBy 過濾器根據(jù)某個表達(dá)式排列數(shù)組：
<div ng-app="" ng-controller="namesController">
<p>循環(huán)對象： </p>
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
<div>
過濾輸入
輸入過濾器可以通過一個管道字符（ |）和一個過濾器添加到指令中，該過濾器后跟一個冒
號和一個模型名稱。
filter 過濾器從數(shù)組中選擇一個子集：
<div ng-app="" ng-controller="namesController">
<p>輸入過濾： </p>
<p><input type="text" ng-model="name"></p>
<ul>
<li ng-repeat="x in names | filter:name | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>
10.Angularjs模塊
1.為什么要使用模塊
控制器污染了全局命名空間
http://baike.baidu.com/view/4174721.htm
本教程中，截至目前為止的所有實例都使用了全局函數(shù)。
在所有的應(yīng)用程序中，都應(yīng)該盡量避免使用全局變量和全局函數(shù)。
全局值（變量或函數(shù)）可被其他腳本重寫或破壞。
為了解決這個問題， AngularJS 使用了模塊。
2.普通的控制器和 AngularJS模塊
AngularJS普通的控制器
<!DOCTYPE html>
<html>
<body>
<div ng-app="" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
function myCtrl($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
}
</script>
<script src="angular.min.js"></script>
</body>
</html>
使用一個由模塊替代的控制器：
<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
</script>
</body>
</html>
3.AngularJS應(yīng)用程序文件
現(xiàn)在您已經(jīng)知道模塊是什么以及它們是如何工作的，現(xiàn)在您可以嘗試創(chuàng)建您自己的應(yīng)用程序文件。
您的應(yīng)用程序至少應(yīng)該有一個模塊文件，一個控制器文件。
首先，創(chuàng)建模塊文件 "myApp.js"：
var app = angular.module("myApp", []);
然后，創(chuàng)建控制器文件。本實例中是 "myCtrl.js"：
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
最后，編輯 HTML 引入模塊：
<!DOCTYPE html>
<html>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="angular.min.js"></script>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>

什么是 Angularjs

當(dāng)前文章：什么是Angularjs
當(dāng)前URL：http://muchs.cn/article22/pipijc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、企業(yè)建站、品牌網(wǎng)站建設(shè)、全網(wǎng)營銷推廣、小程序開發(fā)、外貿(mào)網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容