大佬教程收集整理的这篇文章主要介绍了angularjs简单demo（转载，原网址找不到了），大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
1.效果图
2.文件结构
3.代码
（1）index.html
<!DOCTYPE html> <html lang="en" ng-app="useRMANage"> <head> <Meta charset="UTF-8"> <title>user info demo</title> </head> <body> <h1>用户管理demo</h1> <!--使用Ng-show,表明我们使用路由控制来管理页面--> <div ng-view> loading... </div><!--视图模块容器--> <script type="text/javascript" src="js/lib/angular.js"></script> <script type="text/javascript" src="js/lib/angular-route.js"></script> <script type="text/javascript" src="js/controller/IndexController.js"></script> </body> </html>
<!DOCTYPE html>
<html lang="en" ng-app="UserMgt">
<head>
<Meta charset="UTF-8">
<title>title</title>
<script type="text/javascript" src="js/lib/angular.js"></script>
<script type="text/javascript" src="js/lib/angular-route.js"></script>
<script type="text/javascript" src="js/controller/IndexController.js"></script>
</head>
<body>
<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>
</body>
</html>
(3)detail.html
<!DOCTYPE html>
<html lang="en" ng-app="UserMgt">
<head>
<Meta charset="UTF-8">
<title>title</title>
<script type="text/javascript" src="js/lib/angular.js"></script>
<script type="text/javascript" src="js/lib/angular-route.js"></script>
<script type="text/javascript" src="js/controller/IndexController.js"></script>
</head>
<body>
<table border="1">
<tr>
<td>用户名</td>
<!--使用Ng-model绑定item对象的username属性-->
<td><input type="text" ng-model="item.username"></td>
</tr>
<tr>
<td>男</td>
<td><input type="text" ng-model="item.gender"></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" ng-model="item.email"></td>
</tr>
</table>
</body>
</html>4.controller
/*定义UserController模块*/ var useRMANage=angular.module('useRMANage',['ngRoute']); /*路由定义*/ useRMANage.config( function ($routeProvider) { $routeProvider /*项目打开默认调到list.html页面，绑定ListController进行相应的控制*/ .when('/',{ controller:ListController,templateUrl:'./list.html' }) /*定义访问url*/ .when('/get/:id',{ /*定义绑定的控制器*/ controller:GetController,/*定义跳转的页面*/ templateUrl:'./detail.html' }) .otherwise({ /*其他情况，指定URL跳转*/ redirectTo:'/' }); } ) /*ListController 定义*/ function ListController($scope,$http){ /*获取本地的json文件*/ $http.get('./js/conf/user.json').success(function (data) { console.log(data); $scope.users=data; }); } /*GetController控制器定义*/ function GetController($scope,$http,$routeParams) { var id=$routeParams.id; /*获取本地json文件*/ $http.get('./js/conf/user.json').success(function (data){ console.log(data); $scope.item=data[id]; }) }
[ { "id": 1,"username": "situ","gender": "男","email": "gao_st@126.com" },{ "id": 2,"username": "wb","gender": "女","email": "wb@126.com" },{ "id": 3,"username": "lml","email": "lml@126.com" },{ "id": 4,"username": "wjd","email": "wjd@126.com" },{ "id": 5,"username": "lyl","email": "lyl@126.com" },{ "id": 6,"username": "wjh","email": "wjh@126.com" } ]
以上是大佬教程为你收集整理的angularjs简单demo（转载，原网址找不到了）全部内容，希望文章能够帮你解决angularjs简单demo（转载，原网址找不到了）所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。