angularJs入门第一篇：基础概念

最新推荐文章于 2020-12-20 17:17:59 发布

jiayq_jiars_changcy

最新推荐文章于 2020-12-20 17:17:59 发布

阅读量701

点赞数 1

分类专栏： js 文章标签： javascript angularjs

本文链接：https://blog.csdn.net/changcongying/article/details/51130989

版权

js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

随着移动互联网的发展，云服务的普及，数据服务和视图展示已经逐渐分离，传统的ASP,JSP,Freemarker等后台视图技术已经慢慢淡出人们的视线(在传统企业BS开发中还比较多)，原来使用原生开发的Android和IOS应用也可以部分使用html5来开发。

基于HTML的开发之前一直首选的是jquery之类的DOM操作类库，优点是入门门槛低，只要掌握ajax和操作dom的常用API就可以开发，缺点是代码编写较繁琐，代码量比较大，对于复杂的界面开发不同层次的开发人员编写的代码千差万别，很难维护。比如创建dom,有些人喜欢通过拼装HTML代码，有些人喜欢通过使用jqueryAPI来创建；绑定事件：有些人喜欢在html中拼接onclick事件，有些人喜欢在js代码中查询绑定。一直到最近接触了angularJS后，发现这才是前端开发的终极武器：数据双向绑定，模板技术(js平台)等特性大大减少了前台开发的代码量和复杂性。

关于angularjs的简介，大家可以看下百度百科的介绍:augularjs百度百科

下面列出几个angularJS中的几个常用概念：angularjs的版本使用1.5.3，官方API地址：angularjsAPI

1，模块(ngModule)

2，控制器(controller)

3，指令(directive)

4，过滤器(filter)

5，服务(service/factory)

掌握这几个概念对使用angularjs编程尤为重要。

下面是一个简单的例子来演示模块，控制器，以及无处不在的数据双向绑定特性的使用。

代码的目录结构使用如下所示结构：

说明：

1，angular和bootstrap存放的是angular类库和bootstrap类库的代码；

2，script存放的是我们编写的js脚本代码

3，style存放的是我们编写的css代码

4，template存放的是HTML视图模板

5，index.html是我们应用的入口

index.html的源代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"></meta>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
		<script type="text/javascript" src="angular/angular.js"></script>
		<style type="text/css">
			form{
				margin: 20px 400px
			}
		</style>
		<script type="text/javascript" src="script/app.js"></script>
	</head>
	<!--声明所加载的模块-->
	<body ng-app="practice1">
		<!--声明所使用的控制器-->
		<form ng-controller="userCtrl">
			<div class="form-group">
				<label for="userName">用户姓名</label>
				<!--声明绑定的数据模型-->
				<input type="text" class="form-control" id="userName" ng-model="user.userName"/>
			</div>
			<div class="form-group">
				<label for="userPhone">用户电话</label>
				<input type="text" class="form-control" id="userPhone" ng-model="user.userPhone"/>
			</div>
			<div class="form-group">
				<label for="userAge">用户年龄</label>
				<input type="text" class="form-control" id="userAge" ng-model="user.userAge"/>
			</div>
			<div class="form-group">
				<label for="userSex">用户性别</label>
				<input type="radio" ng-model="user.userSex" value="1"/>男
				<input type="radio" ng-model="user.userSex" value="0"/>女
			</div>
			<input class="btn btn-default" type="submit" value="Submit" ng-click="getData()">
			<div>
				<!--输出-->
				{{result|json}}
			</div>	
		</form>	
	</body>
</html>

对应的js代码如下，app.js:

//创建模块
var practice = angular.module("practice1", []);

//创建控制器
practice.controller("userCtrl", ["$scope", function(scope) {
	//向作用域中绑定user对象
	scope.user = {
			userName: "张三",
			userPhone: "12345678912",
			userAge: 11,
			userSex: 1
		}
		//向作用域中绑定getData函数
	scope.getData = function() {
		scope.result = scope.user;
	}
}]);

说明：

1，该demo中表单的数据和作用域中的user对象已经实现了双向绑定，改变任何一方，另外一方都将同步变化。

2，ng-app指令声明的是该应用所使用的模块名称，对应的模块定义由JS代码中的angular.module来定义。

3，ng-controller指令声明的是控制器名称，对应的控制器定义由JS代码中的practice.controller来定义。

3，只有绑定在作用域中的数据才能实现双向绑定的特性，比如result属性在页面初始化的时候没有绑定到scope中，所以页面中输入为空，当触发getData事件后，才将 result绑定到作用域中，在页面中会实时显示出来