学习了这么多天的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实例实战的更多相关文章

  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. 阿里巴巴直播内容风险防控中的AI力量

    直播作为近来新兴的互动形态和今年阿里巴巴双十一的一大亮点,其内容风险监控是一个全新的课题,技术的挑战非常大,管控难点主要包括业界缺乏成熟方案和标准.主播行为.直播内容不可控.峰值期间数千路高并发处理. ...

  2. IE6/7下空div占用空间的问题

    最近注意力没在前端上面,工作碰到这样一个问题,下意识的写了句 font-size:0;line-height:0;哪知道引发了更大的bug.后来插入数据进去的时候都不显示了..再后来百度一番找到,原来 ...

  3. 用CIL写程序:你好,沃尔德

    前言: 项目紧赶慢赶总算在年前有了一些成绩,所以沉寂了几周之后,小匹夫也终于有时间写点东西了.以前匹夫写过一篇文章,对CIL做了一个简单地介绍,不过不知道各位看官看的是否过瘾,至少小匹夫觉得很不过瘾. ...

  4. 使用JSONObject.fromObject的时候出现“There is a cycle in the hierarchy”异常 的解决办法

    在使用JSONObject.fromObject的时候,出现“There is a cycle in the hierarchy”异常.   意思是出现了死循环,也就是Model之间有循环包含关系: ...

  5. C语言 · 字符转对比

    问题描述 给定两个仅由大写字母或小写字母组成的字符串(长度介于1到10之间),它们之间的关系是以下4中情况之一: 1:两个字符串长度不等.比如 Beijing 和 Hebei 2:两个字符串不仅长度相 ...

  6. 【翻译】MongoDB指南/CRUD操作(一)

    [原文地址]https://docs.mongodb.com/manual/ MongoDB CRUD操作(一) 主要内容:CRUD操作简介,插入文档,查询文档. CRUD操作包括创建.读取.更新和删 ...

  7. 6. ModelDriven拦截器、Preparable 拦截器

    1. 问题 Struts2 的 Action 我们将它定义为一个控制器,但是由于在 Action 中也可以来编写一些业务逻辑,也有人会在 Action 输入业务逻辑层. 但是在企业开发中,我们一般会将 ...

  8. IOS FMDB 获取数据库表和表中的数据

    ios开发中,经常会用到数据库sqlite的知识,除了增,删,改,查之外,我们说说如何获取数据库中有多少表和表相关的内容. 前言 跟数据库使用相关的一般的增删改查的语句,这里就不做解释了.在网上有很多 ...

  9. Angular源码分析之$compile

    @(Angular) $compile,在Angular中即"编译"服务,它涉及到Angular应用的"编译"和"链接"两个阶段,根据从DO ...

  10. 一个诡异的COOKIE问题

    今天下午,发现本地的测试环境突然跑不动了,thinkphp直接跑到异常页面,按照正常的排错思路,直接看thinkphp的log 有一条 [ error ] [2]setcookie() expects ...