学习了这么多天的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. Sublime Text3安装JsHint

    介绍 Sublime Text3使用jshint依赖Nodejs,SublimeLinter和Sublimelinter-jshint. NodeJs的安装省略. 安装SublimeLinter Su ...

  2. Microsoft Loves Linux

    微软新任CEO纳德拉提出的“Microsoft Loves Linux”,并且微软宣布.NET框架的开源,近期Microsoft不但宣布了Linux平台的SQL Server,还宣布了Microsof ...

  3. 猫哥网络编程系列：HTTP PEM 万能调试法

    注:本文内容较长且细节较多,建议先收藏再阅读,原文将在 Github 上维护与更新. 在 HTTP 接口开发与调试过程中,我们经常遇到以下类似的问题: 为什么本地环境接口可以调用成功,但放到手机上就跑 ...

  4. “不给力啊，老湿！”：RSA加密与破解

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 加密和解密是自古就有技术了.经常看到侦探电影的桥段,勇敢又机智的主角,拿着一长串毫 ...

  5. 80 端口被占用 pid=4

    80端口被pid=4的系统进程给占用的解决方法: 一般开发的时候我们都会安装sqlserver ,也会把Sql server Reporting Services 安装上去.原因就是这个服务占用了80 ...

  6. Yeoman 官网教学案例：使用 Yeoman 构建 WebApp

    STEP 1:设置开发环境 与yeoman的所有交互都是通过命令行.Mac系统使用terminal.app,Linux系统使用shell,windows系统可以使用cmder/PowerShell/c ...

  7. ntp

    一: 在一台可以连接外网的服务器A上配置ntp: 配置  /etc/ntp.conf  文件: server 202.120.2.101            # local clock (LCL) ...

  8. Spring（三）__aop编程

    aop( aspect oriented programming ) 面向切面编程,是对所有对象或者是一类对象编程 几个重要的概念: 1.切面(aspect):要实现的交叉功能,是系统模块化的一个切面 ...

  9. SharePoint2016安装的过程的”Microsoft.SharePoint.Upgrade.SPUpgradeException”错误解决方法

    前提 在windows server 2012的服务器上运行安装sharepoint2016出现如下错误: Could not load file or assembly ‘Microsoft.Dat ...

  10. 张高兴的 UWP 开发笔记：汉堡菜单进阶

    不同于Windows 8应用,Windows 10引入了"汉堡菜单"这一导航模式.说具体点,就拿官方的天气应用来说,左上角三条横杠的图标外加一个SplitView控件组成的这一导航 ...