学习了这么多天的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. Http状态码之：301、302重定向

    概念 301 Moved Permanently 被请求的资源已永久移动到新位置,并且将来任何对此资源的引用都应该使用本响应返回的若干个URI之一.如果可能,拥有链接编辑功能的客户端应当自动把请求的地 ...

  2. UITextView 输入字数限制

    本文介绍了UITextView对中英文还有iOS自带表情输入的字数限制,由于中文输入会有联想导致字数限制不准确所以苦恼好久,所以参考一些大神的博客终于搞定,欢迎大家参考和指正. 对于限制UITextV ...

  3. JAVA for mac 的学习之路

    要学习一门新技术,首先得下载相关的工具. 一 . 下载相关工具 1. 下载 jdk formac 下载地址为:http://www.oracle.com/technetwork/java/javase ...

  4. Dapper扩展之~~~Dapper.Contrib

    平台之大势何人能挡? 带着你的Net飞奔吧!http://www.cnblogs.com/dunitian/p/4822808.html#skill 上一篇文章:Dapper逆天入门~强类型,动态类型 ...

  5. MVC Core 网站开发（Ninesky） 2.1、栏目的前台显示（补充）

    在2.1.栏目的前台显示中因右键没有添加视图把微软给鄙视了一下,后来有仔细研究了一下发现应该鄙视自己,其实这个功能是有的,是自己没搞清楚乱吐糟. 其实只要在NuGet中安装两个包(Microsoft. ...

  6. Android 5.0 到 Android 6.0 + 的深坑之一 之 .so 动态库的适配

    (原创:http://www.cnblogs.com/linguanh) 目录: 前序 一,问题描述 二,为何会如此"无情"? 三,目前存在该问题的知名SDK 四,解决方案,1 对 ...

  7. 马里奥AI实现方式探索 ——神经网络+增强学习

    [TOC] 马里奥AI实现方式探索 --神经网络+增强学习 儿时我们都曾有过一个经典游戏的体验,就是马里奥(顶蘑菇^v^),这次里约奥运会闭幕式,日本作为2020年东京奥运会的东道主,安倍最后也已经典 ...

  8. Jvm 内存浅析 及 GC个人学习总结

    从诞生至今,20多年过去,Java至今仍是使用最为广泛的语言.这仰赖于Java提供的各种技术和特性,让开发人员能优雅的编写高效的程序.今天我们就来说说Java的一项基本但非常重要的技术内存管理 了解C ...

  9. WebApi返回Json格式字符串

    WebApi返回json格式字符串, 在网上能找到好几种方法, 其中有三种普遍的方法, 但是感觉都不怎么好. 先贴一下, 网上给的常用方法吧. 方法一:(改配置法) 找到Global.asax文件,在 ...

  10. 注释生成Api文档

    1.开发背景 最近一直在写dubbo接口,以前总是用word文档写接口描述然后发给别人.现在太多了,而且跟别人对接联调的人家急着用,根本没时间去写word文档.那就想想怎么用doc文档注释自动生成接口 ...