学习了这么多天的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，代码如下所示

  1. <!DOCTYPE html>
  2. <!--定义AngularJS app-->
  3. <html ng-app="UserMgt">
  4. <head>
  5.     <meta charset="utf-8"/>
  6.     <title>user mgt demo </title>
  7. </head>
  8. <body>
  10. <h1>用户管理Demo</h1>
  11. <!--使用ng-show，表明我们使用路由控制来管理页面之间的跳转
  12. -->
  13. <div ng-view>
  14.     loading...
  15. </div><!--视图模板容器-->
  17. <!--引入ng-app所需的js文件-->
  18. <script type="text/javascript" src="../js/angular.js"></script>
  19. <script type="text/javascript" src="../js/angular-route.js"></script>
  20. <script type="text/javascript" src="../js/controller/mgt_controller.js"></script>
  21. </body>
  22. </html>

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

  1. <table border="1">
  2.     <tr>
  3.         <td>用户名</td>
  4.         <!--使用ng-model绑定item对象的username属性-->
  5.         <td><input type="text" ng-model="item.username"/></td>
  6.     </tr>
  7.     <tr>
  8.         <td>男</td>
  9.         <!--使用ng-model绑定item对象的gender属性-->
  10.         <td><input type="text" ng-model="item.gender"/></td>
  11.     </tr>
  12.     <tr>`
  13.         <td>邮箱</td>
  14.         <!--使用ng-model绑定item对象的email属性-->
  15.         <td><input type="text" ng-model="item.email"/></td>
  16.     </tr>
  17.     <tr>
  18.     </tr>
  19. </table>

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

  1. <table border="1">
  2. 	<tr>
  3. 	<!--设置表头-->
  4. 		<td>用户名</td>
  5. 		<td>性别</td>
  6. 		<td>邮箱</td>
  7. 	</tr>
  8. 	<!--使用ng-repeat，遍历所有的user-->
  9. 	<tr ng-repeat="user in users">
  10. 			<td>{{user.username}}</td>
  11. 		<td>{{user.gender}}</td>
  12. 		<td>{{user.email}}</td>
  13. 	</tr>
  14. </table>

4. mgt_controller.js，

  1. <!--定义UserMgt Ajs模块，模块依赖ngRoute-->
  2. var umService = angular.module('UserMgt', ['ngRoute']);
  4. <!--路由定义-->
  5. umService.config(
  6.     function ($routeProvider) {
  7.         $routeProvider
  8.             <!--项目打开默认调到list.html页面，绑定ListController进行相应的控制-->
  9.             .when('/', {
  10.                 controller: ListController,
  11.                 templateUrl: '../tml/list.html'
  12.             })
  13.             <!--定义访问url-->
  14.             .when('/get/:id', {
  15.                 <!--定义绑定的控制器-->
  16.                 controller: GetController,
  17.                 <!--定义跳转的页面-->
  18.                 templateUrl: "../tml/detail.html"
  19.             })
  20.             .otherwise({
  21.                 <!--其他情况，指定url跳转-->
  22.                 redirectTo: '/'
  23.             });
  24.     }
  25. )
  27. <!--ListController定义-->
  28. function ListController($scope, $http) {
  29.     <!--获取本地json资源文件-->
  30.     $http.get('../conf/user.json').success(function (data) {
  31.         <!--浏览器console端口打印读取的数据-->
  32.         console.log(data);
  33.         $scope.users = data;
  34.     });
  35. }
  37. <!--GetController控制器定义-->
  38. function GetController($scope, $http, $routeParams) {
  39.     var id = $routeParams.id;
  40.     <!--获取本地json资源文件-->
  41.     $http.get('../conf/user.json').success(function (data) {
  42.         console.log(data);
  43.         $scope.item = data[id];
  44.     });
  45. }

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

  1. [
  2. 	{ "id": 1, "username": "situ", "gender": "男", "email": "gao_st@126.com" },
  3. 	{ "id": 2, "username": "wb", "gender": "女", "email": "wb@126.com" },
  4. 	{ "id": 3, "username": "lml", "gender": "男", "email": "lml@126.com" },
  5. 	{ "id": 4, "username": "wjd", "gender": "女", "email": "wjd@126.com" },
  6. 	{ "id": 5, "username": "lyl", "gender": "男", "email": "lyl@126.com" },
  7. 	{ "id": 6, "username": "wjh", "gender": "女", "email": "wjh@126.com" }
  8. ]

Result

1. 展示所有用户信息

2. 获取某一用户信息

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

  1. angularJs项目实战！02：前端的页面分解与组装

    自从上一篇文章到现在已经有将近一个月的时间,我将精力放在了前端页面分解与组装,和angularjs如何与jquery.bootstrap.D3等一系列其他类库结合使用的经验总结上.由于公司新招了一些员 ...

  2. angularJs项目实战！01：模块划分和目录组织

    近日来我有幸主导了一个典型的web app开发.该项目从产品层次来说是个典型的CRUD应用,故而我毫不犹豫地采用了grunt + boilerplate + angularjs + bootstrap ...

  3. Mariadb/MySQL多实例实战

    Mariadb/MySQL多实例实战 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.安装MySQL程序 无论你喜欢哪种方式安装均可,关于源码安装,yum安装或者二进制安装,可以 ...

  4. 每R一点：层次聚类分析实例实战-dist、hclust、heatmap等（转）

    聚类分析:对样品或指标进行分类的一种分析方法,依据样本和指标已知特性进行分类.本节主要介绍层次聚类分析,一共包括3个部分,每个部分包括一个具体实战例子. 1.常规聚类过程: 一.首先用dist()函数 ...

  5. Flask+ Angularjs 实例： 创建博客

    允许任何用户注册 允许注册的用户登录 允许登录的用户创建博客 允许在首页展示博客 允许登录的用户退 后端 Flask-RESTful - Flask 的 RESTful 扩展 Flask-SQLAlc ...

  6. angularJs项目实战！03：angularjs与其他类库的协作(转)

    angularjs,在我看来是个中等重量级的框架.即不像backbone那么简单,也不像dojo和Yui那么包罗万象.很多时候,妄图包罗万象,往往会出现很多子模块的质量高不成低不就,并且修改起来较为困 ...

  7. angularJs项目实战！04：angularjs的性能问题

    上一篇文章中我花了很多口舌去介绍angularjs是一个中型框架,面对大型应用时少不了第三方类库的配合.而我的核心议题是:如何以angularjs的思路使用其他类库,这里jquery是最好的例子了,谁 ...

  8. angularJs项目实战！03：angularjs与其他类库的协作

    引言:angularjs是一个中等重量级的前端开发框架 HTML是一门很好的为静态文本设计的语言,但要构建动态的web应用它就显的乏力了.通常,我们使用以下技术来解决静态网页技术在构建动态应用上的不足 ...

  9. AngularJs 实例

    1.AngularJs 表单验证: 示例 .controller('signupController', ['$scope', function($scope) { $scope.submitted ...

随机推荐

  1. .Net中的AOP系列之构建一个汽车租赁应用

    返回<.Net中的AOP>系列学习总目录 本篇目录 开始一个新项目 没有AOP的生活 变更的代价 使用AOP重构 本系列的源码本人已托管于Coding上:点击查看. 本系列的实验环境:VS ...

  2. C#4.0泛型的协变，逆变深入剖析

    C#4.0中有一个新特性:协变与逆变.可能很多人在开发过程中不常用到,但是深入的了解他们,肯定是有好处的. 协变和逆变体现在泛型的接口和委托上面,也就是对泛型参数的声明,可以声明为协变,或者逆变.什么 ...

  3. hadoop 2.7.3本地环境运行官方wordcount-基于HDFS

    接上篇<hadoop 2.7.3本地环境运行官方wordcount>.继续在本地模式下测试,本次使用hdfs. 2 本地模式使用fs计数wodcount 上面是直接使用的是linux的文件 ...

  4. Pivot 和 Unpivot

    在TSQL中,使用Pivot和Unpivot运算符将一个关系表转换成另外一个关系表,两个命令实现的操作是“相反”的,但是,pivot之后,不能通过unpivot将数据还原.这两个运算符的操作数比较复杂 ...

  5. Linux上如何查看物理CPU个数，核数，线程数

    首先,看看什么是超线程概念 超线程技术就是利用特殊的硬件指令,把两个逻辑内核模拟成两个物理芯片,让单个处理器都能使用线程级并行计算,进而兼容多线程操作系统和软件,减少了CPU的闲置时间,提高的CPU的 ...

  6. EntityFramework的多种记录日志方式,记录错误并分析执行时间过长原因(系列4)

    前言 Entity Framework 延伸系列目录 今天我们来聊聊EF的日志记录. 一个好的数据库操作记录不仅仅可以帮你记录用户的操作, 更应该可以帮助你获得效率低下的语句来帮你提高运行效率 废话不 ...

  7. gRPC源码分析1-SSL/TLS

    引子 前几天看到微信后台团队分享了TLS相关文章,正好gRPC里TLS数据加密是很重要的一块,于是整理出了这篇文章. 在gRPC里,如果仅仅是用来做后端微服务,可以考虑不加密.本文太长,先给个大纲. ...

  8. 常用 meta 整理

    <!-- 针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓 --> <meta name="HandheldFriendly" con ...

  9. 图解DevExpress RichEditControl富文本的使用，附源码及官方API

    9点半了,刚写到1.2.   该回家了,明天继续写完. 大家还需要什么操作,留言说一下,没有的我明天继续加. 好久没有玩DevExpress了,今天下载了一个玩玩,发现竟然更新到14.2.5了..我去 ...

  10. centos6和centos7防火墙的关闭

    CentOS6.5查看防火墙的状态: [zh@localhost ~]$service iptable status 显示结果: [zh@localhost ~]$service iptable st ...