您的位置：360文档中心› AngularJs60分钟入门基础教程

AngularJs60分钟入门基础教程

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

AngularJs60分钟⼊门基础教程
AngularJs是⼀个不错的⽤于开发SPA应⽤（单页Web应⽤）的框架。

单页Web应⽤（single page web
application，SPA），就是只有⼀张Web页⾯的应⽤。

浏览器⼀开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页⾯上完成，由JavaScript来控制不同view在这个页⾯上的呈现。

本⽂源于Youtube上⼀个不错的AngularJs的⼊门教程视频：AngularJS Fundamentals In 60-ish Minutes，主要讲解了AngularJs中Directive,Data Binding,Filter和Module的概念和⽤法。

个⼈认为这四个概念是AngularJs的核⼼，⽀撑起了AngularJs的⾻架。

掌握了他们对全局上把握AngularJs很有帮助。

进阶则需要⼤量实践和官⽹API⽂档的阅读。

看看下图⼤致就可以了解AngularJs有何能耐。

在VS中创建⼀个空的Empty Web项⽬。

Directive 和 Data Binding
AngularJs 中的Directive概念不是很容易理解，⼊门阶段可暂且将其理解为⽤来扩展HTML的⼀种tag. Angularjs会解析这些tag，以实现Angularjs的Magic.
下⾯代码使⽤了两个Directive：ng-app 和 ng-model.
ngModel：⽤于在property和HTML控件（input,select, textarea）之间建⽴双向的Data Binding，也就是说HTML控件的值改变会反应到property上，反过来也同样成⽴。

property就是通过{{}}创建的⼀个对象。

下⾯代码展⽰了将⽂本控件和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运⾏以后的结果。

下⾯例⼦展⽰了通过ng-init和ng-repeat来遍历操作⼀个数组的⽤法。

<!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>
Filter
作⽤就是接收⼀个输⼊，通过某个规则进⾏处理，然后返回处理后的结果。

主要⽤于对数组过滤，对数组中的元素进⾏排序,对数据做格式化处理等。

AngualrJS内置了⼀些过滤器，它们是：currency(货币)、date(⽇期)、filter(⼦串匹配)、json(格式化json对象)、limitTo(限制个数)、lowercase(⼩写)、uppercase(⼤写)、number(数字)、orderBy(排序)。

总共九种。

除此之外还可以⾃定义过滤器，这个就强⼤了，可以满⾜任何要求的数据处理。

下⾯代码展⽰了数据过滤，排序和⼤⼩写转换的实现。

每个Filter跟在数据后，并有|隔开。

<!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'">{{ | uppercase}} - {{cust.city | lowercase}}</li>
</ul>
</div>
<script src="angular.min.js"></script>
</body>
</html>
运⾏的结果：
Module
Module就是⼀个容器，⽤于管理⼀个AngularJS应⽤的各个部分，是AngularJS中很重要的概念。

⼀个AngularJS应⽤就是⼀个Module，其作⽤和C#应⽤程序中Assembly作⽤类似。

C#中我们通过main函数来bootstrap应⽤程序。

⽽AngularJS则通过na-app="moduleName"的⽅式来bootstrap⼀个AngularJS应⽤。

moduleName就是Module对象的name.
下图是⼀个Module有哪些常见部分组成。

Config/Route:⽤于配置AngularJS应⽤的路由（AngularJS），作⽤类似于 MVC应⽤中的Config/Route。

Filter:对数据起过滤作⽤，上⽂有解释。

Directive: 扩展HTML,AngularJS中最重要的概念。

没有Directive就没有AngularJS。

Controller: 作⽤类似于 MVC应⽤中的Controller。

页⾯逻辑就在Controller中实现，通过controller可以对model进⾏操作。

AngularJS则通过内建的Data-Binding机制将model绑定到view(HTML控件)
Factory/Service/Provider/Value: 提供对数据源的访问。

⽐如Restful API就是常见的数据源。

Controller通过
Factory/Service/Provider/Value访问数据源完成数据的CRUD操作。

下⾯这段代码实现了上⾯实例的相同的功能，差异就在于这个实例通过创建⼀个module（angularJS应⽤），并在module下添加contorller来实现上⾯的功能。

在SimpleController（Controller）中，我们创建了customers（Model）并进⾏数据初始
化， View(Html控件）则直接绑定到customers（Model）。

Scope是⼀个AngualrJS中所有viewModule的容器对象。

Controller需要通过Scope是⼀个AngualrJS中所有viewModule的容器对象。

Controller需要通过Scope来访问viewModule。

这个例⼦⽐上⾯例⼦更接近实际⼯程中的⽤法。

<!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'">{{ | 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'">{{ | 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: $, city: $scope.newCustomer.city }); };
}
demoApp.controller(controllers);
</script>
</body>
</html>
下图展⽰了Module及其各个组成部分的关系。

下⾯实例通过config配置module的route实现⼀个SPA实例。

⾸先创建View1.html 和View2.html。

⽬录结构如下图.
<div>
<h2>View1</h2>
Names:
<br />
<input type="text" data-ng-model="" />
<br />
<ul>
<li data-ng-repeat="cust in customers | filter: | orderBy:'city'">{{ | uppercase}} - {{cust.city | lowercase}}</li>
</ul>
<br />
Customer Names:<br />
<input type="text" data-ng-model="" />
<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'">{{ | uppercase}} - {{cust.city | lowercase}}</li>
</ul>
</div>
通过$routeProvider来配置当前页⾯中view1 和view2 的路由，已经每个view所对应的controller。

view1和view2会显⽰在当前页⾯标注了ng-view的位置。

同时通过config我们解耦了controller和HTML标签。

上⾯的例⼦，我们需要给html标签添加ng-controller tag来使⽤controller。

这边直接通过config完成这样的配置。

<!DOCTYPE html>
<html data-ng-app="demoApp">
<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: $, city: $scope.newCustomer.city });
};
}
demoApp.controller(controllers);
</script>
</body>
</html>
效果如下图。

最后⼀个实例更接近实际⼯程中的⽤法，我们引⼊了Factory来初始化数据（实际⼯程中,在这⾥可访问webAPI获取数据完成初始化），Controller中则通过Factory获得数据。

<!DOCTYPE html>
<html data-ng-app="demoApp">
<head>
<title>Using Factory</title>
</head>
<body>
<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: $, city: $scope.newCustomer.city });
};
}
demoApp.controller(controllers);
</script>
</body>
</html>
以上内容是⼩编给⼤家介绍的AngularJs 60分钟⼊门基础教程，希望对⼤家以上帮助！。

相关文档
最新文档