AngularJs 60分钟入门基础教程

程序员文章站 2022-05-14 17:39:21

angularjs是一个不错的用于开发spa应用（单页web应用）的框架。单页web应用（single page web application，spa），就是只有一张we...

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有何能耐。

首先从官网下载angular.min.js和angular-route.min.js。可以从官网下载（https://angularjs.org/或https://code.angularjs.org/）

在vs中创建一个空的empty web项目。

AngularJs 60分钟入门基础教程

directive 和 data binding

angularjs 中的directive概念不是很容易理解，入门阶段可暂且将其理解为用来扩展html的一种tag. angularjs会解析这些tag，以实现angularjs的magic.
下面代码使用了两个directive：ng-app 和 ng-model.

ng-app: 用于auto-bootstrap 一个angularjs应用。这是必须的一个directive，一般加在html的根对象上（如下代码所示）。更详细解释，移步官网：https://docs.angularjs.org/api/ng/directive/ngapp

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运行以后的结果。

AngularJs 60分钟入门基础教程

下面例子展示了通过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>

AngularJs 60分钟入门基础教程

更多directve的用法，参考官网

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'">{{cust.name | uppercase}} - {{cust.city | lowercase}}</li>
</ul>
</div>
<script src="angular.min.js"></script>
</body>
</html>

运行的结果：

AngularJs 60分钟入门基础教程

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），作用类似于asp.net mvc应用中的config/route。
filter:对数据起过滤作用，上文有解释。

directive: 扩展html,angularjs中最重要的概念。没有directive就没有angularjs。

controller: 作用类似于asp.net mvc应用中的controller。页面逻辑就在controller中实现，通过controller可以对model进行操作。 angularjs则通过内建的data-binding机制将model绑定到view(html控件)

factory/service/provider/value: 提供对数据源的访问。比如restful api就是常见的数据源。 controller通过factory/service/provider/value访问数据源完成数据的crud操作。

AngularJs 60分钟入门基础教程

下面这段代码实现了上面实例的相同的功能，差异就在于这个实例通过创建一个module（angularjs应用），并在module下添加contorller来实现上面的功能。在simplecontroller（controller）中，我们创建了customers（model）并进行数据初始化， view(html控件）则直接绑定到customers（model）。scope是一个angualrjs中所有viewmodule的容器对象。controller需要通过scope是一个angualrjs中所有viewmodule的容器对象。controller需要通过scope来访问viewmodule。

AngularJs 60分钟入门基础教程

这个例子比上面例子更接近实际工程中的用法。

<!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>

AngularJs 60分钟入门基础教程

下图展示了module及其各个组成部分的关系。

AngularJs 60分钟入门基础教程

下面实例通过config配置module的route实现一个spa实例。首先创建view1.html 和view2.html。目录结构如下图.

<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>

AngularJs 60分钟入门基础教程

通过$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">
<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>

效果如下图。

AngularJs 60分钟入门基础教程

最后一个实例更接近实际工程中的用法，我们引入了factory来初始化数据（实际工程中,在这里可访问webapi获取数据完成初始化），controller中则通过factory获得数据。

<!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>

以上内容是小编给大家介绍的angularjs 60分钟入门基础教程，希望对大家以上帮助！

上一篇：不能不知道的10个angularjs英文学习网站

下一篇：详解AngularJS 模态对话框

AngularJs 60分钟入门基础教程

AngularJS入门教程之数据绑定用法示例

入门:CorelDRAW10 矩形工具基础教程

AngularJs 60分钟入门基础教程

PowerShell 入门基础教程

AngularJS 2.0入门权威指南

photoshop入门基础教程：认识熟悉色阶

python基础教程之简单入门说明(变量和控制语言使用方法)

AngularJS入门教程之Hello World!

AngularJS实用基础知识_入门必备篇(推荐)

AngularJS入门心得之directive和controller通信过程