AngularJS的入门与应用

作者: zhaochenxi 分类: 前端 发布时间: 2016-12-15 00:09

AngularJs是谷歌的一个使用JS实现的前端开发框架,你可以使用它来构建你的web应用,这个框架的出现这前端开发同学来说是一个巨大的福利。它给前端开发带来了一种前后端完全分离的设计和高性能,前端要做的只是向服务器端发送请求,然后将请求返回的数据绑定到页面即可。框架使用JS实现,所以开发完全使用的是JS来进行,只需要学习这一个框架之后,前端你就无敌了。可以任意实现你想要的功能,再也不用担心数据和JS的互相绑定问题了,因为你使用的本来就是JS。
当初接触这个框架的时候总觉得这个框架怪怪的,但是在真正的将它应用到项目的开发中的时候才发现这个框架的颠覆式设计给前端开发带来了巨大的变革,不过这个框架的设计相对于其他前端框架来说可能有的同学会觉得有些复杂,所以写下这篇博客通过3个逐渐复杂的例子希望看过的同学能够直接上手开发。

angular的架构由以下8个块组成:
模块 (module)
组件 (component)
模板 (template)
元数据 (metadata)
数据绑定 (data binding)
指令 (directive)
服务 (service)
依赖注入 (dependency injection)

本篇文章主要是入门,所以只介绍:模块,模板,指令,数据绑定,通常使用这4个模块的内容,就可以实现我们前端开发的页面渲染了,所以本文主要介绍这8个模块,如果要深入研究可以通过这个网站学习:https://angular.cn/。

模块:每个 Angular 应用至少有一个模块,模块定义了一个应用程序,是应用程序中不同部分的容器,是应用控制器的容器,控制器通常属于一个模块。简单来说就是angular的应用,需要定义一个模块,然后通过模块来定义一个控制器,然后通过控制器来控制页面的渲染。

指令:
当AngularJs渲染页面时,它会根据指令提供的操作对DOM进行转换,可以理解为指令用于操作页面元素,但是指令还有个重要的作用,通过内置的指令来为应用添加功能,也就是说可以自定义指令来实现一些有趣的功能。

模板:
我们通过组件的自带的模板来定义组件视图。模板以HTML形式存在,告诉Angular如何渲染组件。

数据绑定:
数据绑定用于将数据绑定到html页面,数据绑定结合着指令和表达式使用,表达式可以将angular中生成的数据绑定到页面中渲染。
表达式的基本语法为:
{{ expression }}

下面我么来看看3个例子,通过这3个例子来开始你的angularJS之路。

一、hello world!

首先给一个hello world的例子感受一下AngularJs,这个例子使用了两个angularjs的指令ng-app和ng-model

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="angular.min.js"></script>
</head>
<body ng-app="">
	<form>
		<input type="text" name="helloworld" ng-model="name"/>
	</form>
	
	<h1>Hello {{name}}</h1>
</body>
</html>

以上代码的运行结果如下图,通过在输入框中输入字符,然后在输入的过程中将输入的内容显示出来。如果要通过js实现这样的功能,需要些的代码量是远远超过这些的,然而在AngularJs中只需要一个ng-model指令就可将数据绑定,然后通过表达式输出。

上面的例子极为简单,通过引用angular.min.js,然后使用angularJs的指令实现了一个数据绑定功能,数据绑定在前端的开发中极为重要,服务器端的数据都需要通过请求查询出来绑定在html页面中。其他前端开发框架也都有这样的功能,但是没有这么简单实用。

二、你的名字

下面我通过一个例子一步一步来介绍如何使用angularjs开发。这个例子中将包含使用angularJs中最常用也是最简单的工具来构建一个web应用。

1.引用JS库,使用angularjs开发首先需要引用官方提供的开发库,代码如下:

这个文件可以去官方网站下载,也可以直接使用cdn的,如:

2.创建一个模块
具体做法如下:
(1).我们首先创建一个页面,在页面中定义一个最外层的div或者直接在body中添加一个ng-app指令。
(2).在script标签中使用通过 AngularJS 的 angular.module 函数来使用ng-app中的内容指令内容定义模块

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="mainApp">
	<form>
		<input type="text" name="helloworld" ng-model="name"/>
	</form>
	<!--表达式输出表单中ng-model绑定的shu'j-->
	<h1>Hello {{name}}</h1>
</body>
</html>

<script type="text/javascript">
/*定义一个模块*/
var app = angular.module("mainApp", []); 

</script>

3.给模块添加控制器
使用ng-controller指令创建控制器
(1).在body标签中添加ng-controller=”mainCtrl”
(2).在JS中创建控制器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="angular.min.js"></script>
</head>
<body ng-app="mainApp" ng-controller="myCtrl">
	<form>
		firstName:<input type="text" name="firstName" ng-model="firstName"/>
		lastName:<input type="text" name="lastName" ng-model="lastName"/>
	</form>
</body>
</html>

<script type="text/javascript">

var app = angular.module("mainApp", []); 
app.controller("myCtrl", function($scope) {
    $scope.firstName = "John";
    $scope.lastName = "Doe";
});

</script>

如图是创建完控制器之后运行的结果,angularJs通过ng-app和ng-controller将页面的渲染交给控制器来处理,控制器中的有一个参数$scope,这个参数的作用是用于存储页面数据的,它的作用域为当前控制所控制的页面,我们将需要保存的数据存储在这个作用域中,然后页面中通过表达式直接引用或者通过指令引用,这里我们使用的是ng-model来绑定放在$scope中的变量。

那么我们总结一下这个例子,发现创建一个能够进行数据交换的angularJs的应用,首先我们需要使用ng-app指令在页面中定义一个模块,然后使用ng-controller定义一个控制器,最后在js中使用angularJs中引用指令和控制器,在控制器中编写代码来控制页面的渲染。

三、进阶应用篇

使用angularJs构建的应用具有高性能,这是angularjs的官方这样介绍的,为什么官方敢这样放话呢?其中的一个原因则是因为angularjs中的一个路由功能,使用路由来设计的应用有一个特点,在页面首次加载的时候需要把所有的JS,css文件从服务器端下载到浏览器中,一看到这里大家是不是觉得这样做反而降低了性能?但事实上相反,第一次加载之后,只要不结束本次会话,这些静态资源都不会加载,第二次访问的速度杠杠的,可是首次访问满了啊,这个倒是很好解决的,等介绍完了这个例子之后我们在来解决这个问题。

路由的设计其实就是根据不同的url,将相关的页面通过ng-view指令include到某一个页面中。一般的网页应用都是可以分为上中下结构或者其他结构,上和下都是不变的,中间部分的内容随着页面的变化不断变化,那么我们就用ng-view指令来include变化的页面。
下面我们通过实现一个登陆功能来介绍路由的用法:

1.编写一个main.html来装载页面
这个页面中有4个重要元素:
(1).引用angularjs和angular-route.js,后面一个是路由需要引用的文件
(2).定义一个ng-app和ng-controller
(3).在一个div中定义一个ng-view=””
页面通过ng-view引入。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width, initial-scale=0.8, maximum-scale=1">
<title>外星猫动漫</title>
<link rel="stylesheet"
	href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
</head>
<body ng-app="mainApp" ng-controller="mainCtrl">
	<div id="top"><h1>登陆实例</h1></div>

	<div ng-view>
		<!-- 在这里引用其他页面 -->
	</div>

	<div class="footer"></div>
	<script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
	<script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
	<script src="angular.min.js"></script>
	<script src="angular-route.js"></script>
	<script src="main.js"></script>


</body>
</html>

2.编写login.html页面
这个页面只需要编写需要需要的html就可以了,body,html,head等标签已经在main.html中有了

<div>

	<form role="form">
		<div class="form-group">
			<label for="exampleInputEmail1">Email address</label> <input
				type="email" name="email" class="form-control" id="exampleInputEmail1"
				placeholder="Enter email">
		</div>
		<div class="form-group">
			<label for="exampleInputPassword1">Password</label> <input
				type="password" name="password" class="form-control" id="exampleInputPassword1"
				placeholder="Password">
		</div>
      <button type="button" class="btn btn-default" ng-click="login()">登陆</button>
     </form>

</div>

3.编写angularJs文件main.js
代码如下,依旧是定义一个模块,然后在模块中添加路由配置$routeProvider,$routeProvider中是一个when…otherwise…语句,也就是一个if…else…,这个语句通过”中配置的路由来决定ng-view中加载哪一个模板html。

var mainApp = angular.module('mainApp', [ 'ngRoute' ]).config(
		[ '$routeProvider', function($routeProvider) {
			$routeProvider.when('/', {
				templateUrl : 'main.html',
				controller : 'mianCtrl'
			}).when('/login', {
				templateUrl : 'login.html',
				controller : 'loginCtrl'
			}).otherwise({
				redirectTo : '/'
			});
} ]);

mainApp.controller('mianCtrl', function($scope,$rootScope) {
		
});

mainApp.controller('loginCtrl', function($scope,$rootScope) {

var mainApp = angular.module('mainApp', [ 'ngRoute' ]).config(
		[ '$routeProvider', function($routeProvider) {
			$routeProvider.when('/', {
				templateUrl : 'main.html',
				controller : 'mianCtrl'
			}).when('/login', {
				templateUrl : 'login.html',
				controller : 'loginCtrl'
			}).otherwise({
				redirectTo : '/login'
			});
} ]);

mainApp.controller('mianCtrl', function($scope) {
		
});

mainApp.controller('loginCtrl', function($scope) {

	$scope.login = function(){
		login();
	}
	
	function login(){
		var email = $("input[name=email]").val();
		var pass = $("input[name=password]").val();
		if(email=='xxx@qq.com'&&pass=='123456'){
			alert("登陆成功");
		}else{
			alert("登陆失败");
		}
	}
});
});

经过这3个步骤之后我们来看看结果:
使用http://localhost:8080/htmlTest/view/main.html#/访问得到的结果

使用http://localhost:8080/htmlTest/view/main.html#/login访问得到如果所示结果

从上面的两个访问结果和访问路径我们可以看出url中有#/两个字符,没错路由就是根据这两个字符来解析连接的,直接使用#/的时候我们发现没有include任何页面,加载的只是main.html的内容,这是因为我们在路由中限定是/的时候访问的页面是main.html,这里的templateUrl就是指我们要引用的html文件,在angular中我把这个文件叫模板,ng-view引入的就是这个模板,这个模板中的DOM则可以通过mainCtrl来操作,使用#/login的时候则路由到login.html,使用控制器loginCtrl来操作模板中的DOM。

在login控制器中我们用js定义了一个方法,这个方法获取表单中的用户名和密码,然后验证然后又在$scope.login定义了一个方法,这样页面中就可以通过指令来调用这个方法了,$scope是用于页面和angularJs之间共同的桥梁。然后在按钮中使用ng-click指令添加一个点击事件引用$scope.login。点击的时候就执行login方法。

以上就是angularJS开发中常用的路由了,掌握了这个套路之后你就可以直接上手开发了。

之前说为什么angularJs使用路由能够提高性能,那么通过这个例子我们可以知道其实路由在这里的作用就是让angularJs根据不同的请求来决定在ng-view中应该使用什么html页面,这个时候其他的静态资源以及完成了加载,需要加载只是路由的模板,加载完成之后控制器负责渲染一下页面即可,如果觉得就算第一次加载那么多静态资源也很慢,那么就压缩静态资源,然后在服务端做缓存,或者使用CDN,这样就会更快了,用户体验更好。还有一种则是定义多个模块,每一个模块定义一个自己的路由,这样就可以每一个路由加载一部分JS和CSS了。问题也得到了响应的解决。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注