学习了这么多天的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. [原创]mybatis中整合ehcache缓存框架的使用

    mybatis整合ehcache缓存框架的使用 mybaits的二级缓存是mapper范围级别,除了在SqlMapConfig.xml设置二级缓存的总开关,还要在具体的mapper.xml中开启二级缓 ...

  2. 【SQLServer】【恢复挂起的解决方案】附加文件时候的提示“无法重新生成日志，原因是数据库关闭时存在打开的事务/用户，该数据库没有检查点或者该数据库是只读的。 ”【数据库恢复】

    汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 先贴错误: 吐槽一下: 进入正题: 新建一个同名数据库 停止MSSQL服务 替换数据库文 ...

  3. System.FormatException: GUID 应包含带 4 个短划线的 32 位数(xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)。

    在NHibernate数据库查询中出现了这个错误,由于是数据库是mysql的,当定义的字段为char(36)的时候就会出现这个错误. [解决方法] 将char(36) 改成varchar(40)就行了 ...

  4. 代码的坏味道（18）——依恋情结(Feature Envy)

    坏味道--依恋情结(Feature Envy) 特征 一个函数访问其它对象的数据比访问自己的数据更多. 问题原因 这种气味可能发生在字段移动到数据类之后.如果是这种情况,你可能想将数据类的操作移动到这 ...

  5. AbpZero--1.如何开始

    1.加群 群号:104390185,下载这个文件并解压 用VS2015打开aspnet-zero-1.9.0.1 2.修改Web项目web.config连接字符串 <add name=" ...

  6. 根据ip判断返回城市名称查询当地天气

    <?phpheader("content-type:text/html;charset=utf-8");date_default_timezone_set("Asi ...

  7. Mysql基础代码（不断完善中）

    Mysql基础代码,不断完善中~ /* 启动MySQL */ net start mysql /* 连接与断开服务器 */ mysql -h 地址 -P 端口 -u 用户名 -p 密码 /* 跳过权限 ...

  8. iOS 后台处理

    iOS 后台处理的常见用途 1.进入后台时候删除资源:应用处于挂起状态的时候所占用的资源越少,该应用被iOS终止的风险就越低.通过从内存中清理那些易于重新创建的资源,可以增加应用驻留内存的机会,因此可 ...

  9. NSURLSession详解

    导语 现在NSURLConnection在开发中会使用的越来越少,iOS9已经将NSURLConnection废弃,现在最低版本一般适配iOS7,所以也可以使用. NSURLConnection相对于 ...

  10. SQL 提示介绍 hash/merge/concat union

    查询提示一直是个很有争议的东西,因为他影响了sql server 自己选择执行计划.很多人在问是否应该使用查询提示的时候一般会被告知慎用或不要使用...但是个人认为善用提示在不修改语句的条件下,是常用 ...