angularjs简单demo（转载，原网址找不到了）

最新推荐文章于 2021-06-27 21:35:58 发布

爱吃炒饭的逗比小豆豆

最新推荐文章于 2021-06-27 21:35:58 发布

阅读量768

点赞数

分类专栏： angularjs 文章标签： angularjs

angularjs 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>

(2)list.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];
    })
}

5.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" }
]

爱吃炒饭的逗比小豆豆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs简单demo（转载，原网址找不到了）

1.效果图2.文件结构3.代码（1）index.html user info demo 用户管理demo loading... (2)list.html Title 用
复制链接

扫一扫