对AngularJs的学习

AngularJS实战

最新推荐文章于 2025-06-27 09:07:31 发布

心宽何处不桃源

最新推荐文章于 2025-06-27 09:07:31 发布

阅读量398

点赞数

CC 4.0 BY-SA版权

分类专栏： AngularJS

本文链接：https://blog.youkuaiyun.com/Boom_Jia/article/details/52750450

AngularJS 专栏收录该内容

1 篇文章

订阅专栏

本文通过一个学生信息表的例子，展示了如何使用AngularJS实现数据绑定、筛选和排序等功能，并介绍了AngularJS解决HTML在构建应用上的不足之处。

AngualrJs有什么好处？

AngularJS是为了克服HTML在构建应用上的不足而设计的。

AngularJS使用了不同的方法，它尝试去补足HTML本身在构建应用方面的缺陷。

AngularJS通过使用我们称为标识符(directives)的结构，让浏览器能够识别新的语法。例如：

1.使用双大括号{{}}语法进行数据绑定；

2.使用DOM控制结构来实现迭代或者隐藏DOM片段；

3.支持表单和表单的验证；

4.能将逻辑代码关联到相关的DOM元素上；

5.能将HTML分组成可重用的组件。

构建一个CRUD应用可能用到的全部内容包括：

1.数据绑定、.

2.基本模板标识符、

3.表单验证、

4.路由、

5.深度链接、

6.组件重用、

7.依赖注入。

要用到的东西：

AngularJs下载地址：https://angularjs.org/

Bootstrap下载地址：http://v3.bootcss.com/getting-started/#download

Jquery下载地址：http://www.jq22.com/jquery-info122

接下来，看一下我自己写的一个例子，需要的东西有：

1.bootstrap.css文件

2.angualr.js文件

3.bootstrap.js文件

4.Jquery.js文件

5.studentInfo.js文件（自定义的模拟手机数据的）

我编写html的工具是Hbuilder 写起来比较方便 sublime也是款不错的软件

我们先来看看我的代码：

index.html

<span style="font-size:18px;"><!DOCTYPE html>
<html lang="zh-CN" ng-app>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title></title>
	
		<link href="css/bootstrap.min.css" />
		<script src="js/jquery.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/studentInfo.js"></script>
		<script src="js/angular.js"></script>
	</head>

	<body ng-controller="StudentCtrl">
		<h1>学生信息表   <small>class 1</small></h1>
		Serach:
		<input type="text" ng-model="query" placeholder="Alex" />
		Select
		<select ng-model="orderProp" class="form-control">
			<option value="name">Alex</option>
			<option value="age">21</option>
		</select>
		
		<hr />
		<div class="container-fluid">
			<table class="table table-bordered table-hover table-responsive">
			<tr>
				<th>姓名 </th>
				<th>年龄</th>
				<th>班級</th>
				<th>联系方式</th>
				<th>家庭住址</th>
			</tr>
			<tr ng-repeat="student in students | filter:query | orderBy:orderProp">
				<td>{{student.name}}</td>
				<td>{{student.age}}</td>
				<td>{{student.class}}</td>
				<td>{{student.phone}}</td>
				<td>{{student.adress}}</td>
			</tr>
	</table>
		</div>

	</body>

</html>
</span>

studentInfo.js文件

<span style="font-size:18px;">function StudentCtrl($scope){
$scope.students=[
{
	"name":"Frach",
	"age":23,
	"class":2,
	"phone":"15952855630",
	"adress":"无锡堰桥"
},{
	"name":"Tom",
	"age":21,
	"class":6,
	"phone":"15952855630",
	"adress":"无锡钱桥"
},{
	"name":"Jason",
	"age":22,
	"class":5,
	"phone":"15952855630",
	"adress":"无锡恒隆"
},{
	"name":"Flex",
	"age":19,
	"class":2,
	"phone":"15952855630",
	"adress":"无锡洛社"
},{
	"name":"Alex",
	"age":12,
	"class":12,
	"phone":"15952855630",
	"adress":"无锡钱桥"
}
]
};
</span>

让我们来逐步分析：

1.<html lang="zh-CN" ng-app>

lang="zh-CN" 这是用于Html5的

ng-app指令相当于作用域就是个范围我能放到<html>标签里，也能放到<div>的标签里，作用域的大小区别。

2. Serach:
<input type="text" ng-model="query" placeholder="Alex" />
Select
<select ng-model="orderProp" class="form-control">
<option value="name">Alex</option>
<option value="age">21</option>
</select>