欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

AngularJs 60分鐘入門基礎(chǔ)教程

 更新時(shí)間：2016年04月03日 11:14:20   作者：HK Zhang  
AngularJs是一個(gè)不錯(cuò)的用于開發(fā)SPA應(yīng)用（單頁Web應(yīng)用）的框架。通過本文給大家介紹angularjs基礎(chǔ)教程，需要的朋友要求學(xué)習(xí)吧

AngularJs是一個(gè)不錯(cuò)的用于開發(fā)SPA應(yīng)用（單頁Web應(yīng)用）的框架。單頁Web應(yīng)用（single page web application，SPA），就是只有一張Web頁面的應(yīng)用。瀏覽器一開始會(huì)加載必需的HTML、CSS和JavaScript，所有的操作都在這張頁面上完成，由JavaScript來控制不同view在這個(gè)頁面上的呈現(xiàn)。本文源于Youtube上一個(gè)不錯(cuò)的AngularJs的入門教程視頻：AngularJS Fundamentals In 60-ish Minutes，主要講解了AngularJs中Directive,Data Binding,Filter和Module的概念和用法。個(gè)人認(rèn)為這四個(gè)概念是AngularJs的核心，支撐起了AngularJs的骨架。掌握了他們對全局上把握AngularJs很有幫助。進(jìn)階則需要大量實(shí)踐和官網(wǎng)API文檔的閱讀。

看看下圖大致就可以了解AngularJs有何能耐。


首先從官網(wǎng)下載angular.min.js和angular-route.min.js。 可以從官網(wǎng)下載（https://angularjs.org/或https://code.angularjs.org/）

在VS中創(chuàng)建一個(gè)空的Empty Web項(xiàng)目。


Directive 和 Data Binding

AngularJs 中的Directive概念不是很容易理解，入門階段可暫且將其理解為用來擴(kuò)展HTML的一種tag. Angularjs會(huì)解析這些tag，以實(shí)現(xiàn)Angularjs的Magic.
下面代碼使用了兩個(gè)Directive：ng-app 和 ng-model.

ng-app: 用于auto-bootstrap 一個(gè)AngularJs應(yīng)用。這是必須的一個(gè)Directive，一般加在HTML的根對象上（如下代碼所示）。更詳細(xì)解釋，移步官網(wǎng)：https://docs.angularjs.org/api/ng/directive/ngApp

ngModel： 用于在property和HTML控件（input,select, textarea）之間建立雙向的Data Binding，也就是說HTML控件的值改變會(huì)反應(yīng)到property上，反過來也同樣成立。property就是通過{{}}創(chuàng)建的一個(gè)對象。

下面代碼展示了將文本控件和name之間建立了Data Binding.

<!DOCTYPE html>
<html ng-app>
<head>
<title>Using Directives and Data Binding Syntax</title>
</head>
<body>
<div class="container">
Name: <input type="text" ng-model="name" /> {{name}}
</div>
<script src="angular.min.js"></script>
</body>
</html>

Directive可以用“x-”或者“data-”作為前綴。Directive可以放置于元素名、屬性、class、注釋中。

<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Using Directives and Data Binding Syntax</title>
</head>
<body>
<div class="container">
Name: <input type="text" data-ng-model="name" /> {{name}}
</div>
<script src="angular.min.js"></script>
</body>
</html>

下面是HTML運(yùn)行以后的結(jié)果。

下面例子展示了通過ng-init和ng-repeat來遍歷操作一個(gè)數(shù)組的用法。

<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Iterating with the ng-repeat Directive</title>
</head>
<body>
<div class="container" data-ng-init="names = ['Terry','William','Robert','Henry']">
<h3>Looping with the ng-repeat Directive</h3>
<ul>
<li data-ng-repeat="name in names">{{name}}</li>
</ul>
</div>
<script src="angular.min.js"></script>
</body>
</html>

更多directve的用法，參考官網(wǎng)https://docs.angularjs.org/api

Filter

作用就是接收一個(gè)輸入，通過某個(gè)規(guī)則進(jìn)行處理，然后返回處理后的結(jié)果。主要用于對數(shù)組過濾，對數(shù)組中的元素進(jìn)行排序, 對數(shù)據(jù)做格式化處理等。

AngualrJS內(nèi)置了一些過濾器，它們是：currency(貨幣)、date(日期)、filter(子串匹配)、json(格式化json對象)、limitTo(限制個(gè)數(shù))、lowercase(小寫)、uppercase(大寫)、number(數(shù)字)、orderBy(排序)?？偣簿欧N。除此之外還可以自定義過濾器，這個(gè)就強(qiáng)大了，可以滿足任何要求的數(shù)據(jù)處理。

下面代碼展示了數(shù)據(jù)過濾，排序和大小寫轉(zhuǎn)換的實(shí)現(xiàn)。每個(gè)Filter跟在數(shù)據(jù)后，并有|隔開。

<!DOCTYPE html>
<html data-ng-app="">
<head>
<title>Using Filter</title>
</head>
<body>
<div class="container" data-ng-init="customers = [{name:'Terry Wu',city:'Phoenix'},
{name:'Terry Song',city:'NewYork'},{name:'Terry Dow',city:'NewYork'},
{name:'Henry Dow',city:'NewYork'}]">
Names:
<br />
<input type="text" data-ng-model="name" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
</ul>
</div>
<script src="angular.min.js"></script>
</body>
</html>

運(yùn)行的結(jié)果：


Module

Module就是一個(gè)容器，用于管理一個(gè)AngularJS應(yīng)用的各個(gè)部分，是AngularJS中很重要的概念。一個(gè)AngularJS應(yīng)用就是一個(gè)Module，其作用和C#應(yīng)用程序中Assembly作用類似。C#中我們通過main函數(shù)來bootstrap應(yīng)用程序。而AngularJS則通過na-app="moduleName"的方式來bootstrap一個(gè)AngularJS應(yīng)用。moduleName就是Module對象的name.

下圖是一個(gè)Module有哪些常見部分組成。

Config/Route:用于配置AngularJS應(yīng)用的路由（AngularJS），作用類似于ASP.NET MVC應(yīng)用中的Config/Route。
Filter:對數(shù)據(jù)起過濾作用，上文有解釋。

Directive: 擴(kuò)展HTML,AngularJS中最重要的概念。沒有Directive就沒有AngularJS。

Controller: 作用類似于ASP.NET MVC應(yīng)用中的Controller。頁面邏輯就在Controller中實(shí)現(xiàn)，通過controller可以對model進(jìn)行操作。 AngularJS則通過內(nèi)建的Data-Binding機(jī)制將model綁定到view(HTML控件)

Factory/Service/Provider/Value: 提供對數(shù)據(jù)源的訪問。比如Restful API就是常見的數(shù)據(jù)源。 Controller通過Factory/Service/Provider/Value訪問數(shù)據(jù)源完成數(shù)據(jù)的CRUD操作。

下面這段代碼實(shí)現(xiàn)了上面實(shí)例的相同的功能，差異就在于這個(gè)實(shí)例通過創(chuàng)建一個(gè)module（angularJS應(yīng)用），并在module下添加contorller來實(shí)現(xiàn)上面的功能。在SimpleController（Controller）中，我們創(chuàng)建了customers（Model）并進(jìn)行數(shù)據(jù)初始化， View(Html控件）則直接綁定到customers（Model）。Scope是一個(gè)AngualrJS中所有viewModule的容器對象。Controller需要通過Scope是一個(gè)AngualrJS中所有viewModule的容器對象。Controller需要通過Scope來訪問viewModule。

這個(gè)例子比上面例子更接近實(shí)際工程中的用法。

<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<title>Using module Controller</title>
</head>
<body>
<div data-ng-controller="SimpleController">
Names:
<br />
<input type="text" data-ng-model="name" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
</ul>
</div>
<script src="angular.min.js"></script>
<script>
var demoApp = angular.module("demoApp", []);
demoApp.controller("SimpleController", function ($scope) {
$scope.customers = [
{ name: 'Terry Wu', city: 'Phoenix' },
{ name: 'Terry Song', city: 'NewYork' },
{ name: 'Terry Dow', city: 'NewYork' },
{ name: 'Henry Dow', city: 'NewYork' }
];
});
</script>
</body>
</html>
<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<title>Using Controller</title>
</head>
<body>
<div data-ng-controller="SimpleController">
Names:
<br />
<input type="text" data-ng-model="name" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
</ul>
</div>
<script src="angular.min.js"></script>
<script>
var demoApp = angular.module("demoApp", []);
var controllers = {};
controllers.SimpleController = function ($scope) {
$scope.customers = [
{ name: 'Terry Wu', city: 'Phoenix' },
{ name: 'Terry Song', city: 'NewYork' },
{ name: 'Terry Dow', city: 'NewYork' },
{ name: 'Henry Dow', city: 'NewYork' }
];
}
demoApp.controller(controllers);
</script>
</body>
</html>
<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<title>Using Controller</title>
</head>
<body>
<div>
<div data-ng-view=""></div>
</div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script>
var demoApp = angular.module('demoApp', ['ngRoute']);
demoApp.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'SimpleController',
templateUrl: 'Partials/View1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateUrl: 'Partials/View2.html'
})
.otherwise({redirectTo:'/'});
});
var controllers = {};
controllers.SimpleController = function ($scope) {
$scope.customers = [
{ name: 'Terry Wu', city: 'Phoenix' },
{ name: 'Terry Song', city: 'NewYork' },
{ name: 'Terry Dow', city: 'NewYork' },
{ name: 'Henry Dow', city: 'NewYork' }
];
$scope.addCustomer = function () {
$scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city });
};
}
demoApp.controller(controllers);
</script>
</body>
</html>

下圖展示了Module及其各個(gè)組成部分的關(guān)系。

下面實(shí)例通過config配置module的route實(shí)現(xiàn)一個(gè)SPA實(shí)例。首先創(chuàng)建View1.html 和View2.html。 目錄結(jié)構(gòu)如下圖.

<div>
<h2>View1</h2>
Names:
<br />
<input type="text" data-ng-model="filter.name" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:filter.name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
</ul>
<br />
Customer Names:<br />
<input type="text" data-ng-model="newCustomer.name" />
<br />
Customer City:<br />
<input type="text" data-ng-model="newCustomer.city" />
<br />
<button data-ng-click="addCustomer()">Add Customer </button>
<br />
<a href="#/view2">View 2</a>
</div>
<div>
<h2>View2</h2>
City:
<br />
<input type="text" data-ng-model="city" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter:city | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
</ul>
</div>

通過$routeProvider來配置當(dāng)前頁面中view1 和view2 的路由，已經(jīng)每個(gè)view所對應(yīng)的controller。 view1和view2會(huì)顯示在當(dāng)前頁面標(biāo)注了ng-view的位置。

同時(shí)通過config我們解耦了controller和HTML標(biāo)簽。 上面的例子，我們需要給html標(biāo)簽添加ng-controller tag來使用controller。這邊直接通過config完成這樣的配置。

<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<title>View</title>
</head>
<body>
<div>
<div data-ng-view=""></div>
</div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script>
var demoApp = angular.module('demoApp', ['ngRoute']);
demoApp.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'SimpleController',
templateUrl: 'Partials/View1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateUrl: 'Partials/View2.html'
})
.otherwise({redirectTo:'/'});
});
var controllers = {};
controllers.SimpleController = function ($scope) {
$scope.customers = [
{ name: 'Terry Wu', city: 'Phoenix' },
{ name: 'Terry Song', city: 'NewYork' },
{ name: 'Terry Dow', city: 'NewYork' },
{ name: 'Henry Dow', city: 'NewYork' }
];
$scope.addCustomer = function () {
$scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city });
};
}
demoApp.controller(controllers);
</script>
</body>
</html>

效果如下圖。

最后一個(gè)實(shí)例更接近實(shí)際工程中的用法，我們引入了Factory來初始化數(shù)據(jù)（實(shí)際工程中,在這里可訪問webAPI獲取數(shù)據(jù)完成初始化），Controller中則通過Factory獲得數(shù)據(jù)。

<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<title>Using Factory</title>
</head>
<body>
<div>
<div data-ng-view=""></div>
</div>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script>
var demoApp = angular.module('demoApp', ['ngRoute']);
demoApp.config(function ($routeProvider) {
$routeProvider
.when('/',
{
controller: 'SimpleController',
templateUrl: 'Partials/View1.html'
})
.when('/view2',
{
controller: 'SimpleController',
templateUrl: 'Partials/View2.html'
})
.otherwise({ redirectTo: '/' });
});
demoApp.factory('simpleFactory', function () {
var customers = [
{ name: 'Terry Wu', city: 'Phoenix' },
{ name: 'Terry Song', city: 'NewYork' },
{ name: 'Terry Dow', city: 'NewYork' },
{ name: 'Henry Dow', city: 'NewYork' }
];
var factory = {};
factory.getCustomers = function ()
{
return customers;
}
return factory;
});
var controllers = {};
controllers.SimpleController = function ($scope, simpleFactory) {
$scope.customers = [];
init();
function init() {
$scope.customers = simpleFactory.getCustomers();
}
$scope.addCustomer = function () {
$scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city });
};
}
demoApp.controller(controllers);
</script>
</body>
</html>

以上內(nèi)容是小編給大家介紹的AngularJs 60分鐘入門基礎(chǔ)教程，希望對大家以上幫助！

相關(guān)文章

最新評論