学习了这么多天的AngularJS，今天想从实战的角度和大家分享一个简单的Demo--用户查询系统，以巩固之前所学知识。功能需求需要满足两点 1.查询所有用户信息，并在前端展示 2.根据id查询用户信息，展示在前端。Ok，需求很简单，那么我们就开始实现所提的功能需求。

代码框架

前端的代码通常包含三部分：html, css, 和JavaScript，我们使用html编写视图文件，css来进行视图样式控制，JS来实现控制器代码。本文的重点在于AngularJS的回顾学习，使用简单的html视图即可，不会涉及很炫的CSS代码编写。本例的代码的文件目录结构很简单，如下图所示，分为简单的两层目录，UserMgt为整个Demo的包名，JS目录用于存储第三方js代码如angular.js，controller用于存储我们的控制器代码，tml目录存储html前端文件， conf中用于存储配置文件。

----------UserMgt

-------------JS

-------------controller

-------------tml

-------------conf

Code

本例中我们引入angular.js和angular-route.js v1.2.20文件，放在我们的JS目录下。angularJS自身提供的route使用不够方便，我们使用第三方的angular-route框架进行路由分配。首先我们需要编写我们前端的显示界面。

1. index.html，代码如下所示

<!DOCTYPE html>

<!--定义AngularJS app-->

<html ng-app="UserMgt">

<head>

    <meta charset="utf-8"/>

    <title>user mgt demo </title>

</head>

<body>

<h1>用户管理Demo</h1>

<!--使用ng-show，表明我们使用路由控制来管理页面之间的跳转

-->

<div ng-view>

    loading...

</div><!--视图模板容器-->

<!--引入ng-app所需的js文件-->

<script type="text/javascript" src="../js/angular.js"></script>

<script type="text/javascript" src="../js/angular-route.js"></script>

<script type="text/javascript" src="../js/controller/mgt_controller.js"></script>

</body>

</html>

2.detail.html, 用于显示一条用户的数据信息，代码如下所示

<table border="1">

    <tr>

        <td>用户名</td>

        <!--使用ng-model绑定item对象的username属性-->

        <td><input type="text" ng-model="item.username"/></td>

    </tr>

    <tr>

        <td>男</td>

        <!--使用ng-model绑定item对象的gender属性-->

        <td><input type="text" ng-model="item.gender"/></td>

    </tr>

    <tr>`

        <td>邮箱</td>

        <!--使用ng-model绑定item对象的email属性-->

        <td><input type="text" ng-model="item.email"/></td>

    </tr>

    <tr>

    </tr>

</table>

3. list.html用于显示所有数据，code很简单如下所示

<table border="1">

	<tr>

	<!--设置表头-->

		<td>用户名</td>

		<td>性别</td>

		<td>邮箱</td>

	</tr>

	<!--使用ng-repeat，遍历所有的user-->

	<tr ng-repeat="user in users">

			<td>{{user.username}}</td>

		<td>{{user.gender}}</td>

		<td>{{user.email}}</td>

	</tr>

</table>

4. mgt_controller.js，

<!--定义UserMgt Ajs模块，模块依赖ngRoute-->

var umService = angular.module('UserMgt', ['ngRoute']);

<!--路由定义-->

umService.config(

    function ($routeProvider) {

        $routeProvider

            <!--项目打开默认调到list.html页面，绑定ListController进行相应的控制-->

            .when('/', {

                controller: ListController,

                templateUrl: '../tml/list.html'

            })

            <!--定义访问url-->

            .when('/get/:id', {

                <!--定义绑定的控制器-->

                controller: GetController,

                <!--定义跳转的页面-->

                templateUrl: "../tml/detail.html"

            })

            .otherwise({

                <!--其他情况，指定url跳转-->

                redirectTo: '/'

            });

    }

)

<!--ListController定义-->

function ListController($scope, $http) {

    <!--获取本地json资源文件-->

    $http.get('../conf/user.json').success(function (data) {

        <!--浏览器console端口打印读取的数据-->

        console.log(data);

        $scope.users = data;

    });

}

<!--GetController控制器定义-->

function GetController($scope, $http, $routeParams) {

    var id = $routeParams.id;

    <!--获取本地json资源文件-->

    $http.get('../conf/user.json').success(function (data) {

        console.log(data);

        $scope.item = data[id];

    });

}

5. user.json中json中存储如下的数据：

[

	{ "id": 1, "username": "situ", "gender": "男", "email": "gao_st@126.com" },

	{ "id": 2, "username": "wb", "gender": "女", "email": "wb@126.com" },

	{ "id": 3, "username": "lml", "gender": "男", "email": "lml@126.com" },

	{ "id": 4, "username": "wjd", "gender": "女", "email": "wjd@126.com" },

	{ "id": 5, "username": "lyl", "gender": "男", "email": "lyl@126.com" },

	{ "id": 6, "username": "wjh", "gender": "女", "email": "wjh@126.com" }

]

Result

1. 展示所有用户信息

2. 获取某一用户信息

AngularJS实例实战的更多相关文章

angularJs项目实战！02：前端的页面分解与组装
自从上一篇文章到现在已经有将近一个月的时间,我将精力放在了前端页面分解与组装,和angularjs如何与jquery.bootstrap.D3等一系列其他类库结合使用的经验总结上.由于公司新招了一些员 ...
angularJs项目实战！01：模块划分和目录组织
近日来我有幸主导了一个典型的web app开发.该项目从产品层次来说是个典型的CRUD应用,故而我毫不犹豫地采用了grunt + boilerplate + angularjs + bootstrap ...
Mariadb/MySQL多实例实战
Mariadb/MySQL多实例实战作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.安装MySQL程序无论你喜欢哪种方式安装均可,关于源码安装,yum安装或者二进制安装,可以 ...
每R一点：层次聚类分析实例实战-dist、hclust、heatmap等（转）
聚类分析:对样品或指标进行分类的一种分析方法,依据样本和指标已知特性进行分类.本节主要介绍层次聚类分析,一共包括3个部分,每个部分包括一个具体实战例子. 1.常规聚类过程: 一.首先用dist()函数 ...
Flask+ Angularjs 实例：创建博客
允许任何用户注册允许注册的用户登录允许登录的用户创建博客允许在首页展示博客允许登录的用户退后端 Flask-RESTful - Flask 的 RESTful 扩展 Flask-SQLAlc ...
angularJs项目实战！03：angularjs与其他类库的协作(转)
angularjs,在我看来是个中等重量级的框架.即不像backbone那么简单,也不像dojo和Yui那么包罗万象.很多时候,妄图包罗万象,往往会出现很多子模块的质量高不成低不就,并且修改起来较为困 ...
angularJs项目实战！04：angularjs的性能问题
上一篇文章中我花了很多口舌去介绍angularjs是一个中型框架,面对大型应用时少不了第三方类库的配合.而我的核心议题是:如何以angularjs的思路使用其他类库,这里jquery是最好的例子了,谁 ...
angularJs项目实战！03：angularjs与其他类库的协作
引言:angularjs是一个中等重量级的前端开发框架 HTML是一门很好的为静态文本设计的语言,但要构建动态的web应用它就显的乏力了.通常,我们使用以下技术来解决静态网页技术在构建动态应用上的不足 ...
AngularJs 实例
1.AngularJs 表单验证: 示例 .controller('signupController', ['$scope', function($scope) { $scope.submitted ...

随机推荐

学习AOP之深入一点Spring Aop
上一篇<学习AOP之认识一下SpringAOP>中大体的了解了代理.动态代理及SpringAop的知识.因为写的篇幅长了点所以还是再写一篇吧.接下来开始深入一点Spring aop的一些实 ...
java中文乱码解决之道（一）-----认识字符集
沉寂了许久(大概有三个多月了吧),LZ"按捺不住"开始写博了! java编码中的中文问题是一个老生常谈的问题了,每次遇到中文乱码LZ要么是按照以前的经验修改,要么则是baidu.c ...
【WCF】错误协定声明
在上一篇烂文中,老周给大伙伴们介绍了 IErrorHandler 接口的使用,今天,老周补充一个错误处理的知识点——错误协定. 错误协定与IErrorHandler接口不同,大伙伴们应该记得,上回我们 ...
input[tyle="file"]样式修改及上传文件名显示
默认的上传样式我们总觉得不太好看,根据需求总想改成和上下结构统一的风格…… 实现方法和思路: 1.在input元素外加a超链接标签 2.给a标签设置按钮样式 3.设置input[type='file' ...
《JavaScript设计模式张》整理
最近在研读另外一本关于设计模式的书<JavaScript设计模式>,这本书中描述了更多的设计模式. 一.创建型设计模式包括简单工厂.工厂方法.抽象工厂.建造者.原型和单例模式. 1)简单 ...
深入解析Sqlite的完美替代者，android数据库新王者——Realm
写在前面: 又到一年一度七夕虐狗节,看着大家忍受着各种朋友圈和QQ空间还有现实生活中的轮番轰炸,我实在不忍心再在这里给大家补刀,所以我觉得今天不虐狗,继续给大家分享有用的. 如果你比较关心androi ...
python基础
内容概要: 一.python2 or python3 目前大多使用python2.7,随着时间的推移,python3将会成为python爱好者的主流. python2和3区别: 1.PRINT IS ...
bzoj3208--记忆化搜索
题目大意: 花花山峰峦起伏,峰顶常年被雪,Memphis打算帮花花山风景区的人员开发一个滑雪项目. 我们可以把风景区看作一个n*n的地图,每个点有它的初始高度,滑雪只能从高处往低处滑[严格大于] ...
Kotlin类：功能更强、而更简洁（KAD 03）
作者:Antonio Leiva 时间:Dec 7, 2016 原文链接:http://antonioleiva.com/classes-kotlin/ Kotlin类尽可能简单,这样用较少的代码完成 ...
基于Ubuntu Hadoop的群集搭建Hive
Hive是Hadoop生态中的一个重要组成部分,主要用于数据仓库.前面的文章中我们已经搭建好了Hadoop的群集,下面我们在这个群集上再搭建Hive的群集. 1.安装MySQL 1.1安装MySQL ...

AngularJS实例实战