AngularJS学习笔记（1）——MVC模式的清单列表效果

MVC模式的清单列表效果

使用WebStorm新建todo.html并链入bootstrap.css、bootstrap-theme.css、angular.js。要链入的相关css和js文件预先准备好，文件目录如下：

使用MVC模式前的代码：

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="UTF-8">
    <title>TO DO List</title>
    <link href="./bootstrap/css/bootstrap.css" rel="stylesheet"/>
    <link href="./bootstrap/css/bootstrap-theme.css" rel="stylesheet"/>
</head>
<body>
    <div class="page-header">
        <h1>Yimi's TO DO List</h1>
    </div>
    <div class="panel">
        <div class="input-group">
            <input class="form-control"/>
            <span class="input-group-btn">
                <button class="btn btn-default">Add</button>
            </span>
        </div>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Description</th>
                    <th>Done</th>
                </tr>
            </thead>
            <tbody>
                <tr><td>练车</td><td>Yes</td></tr>
                <tr><td>看课外书</td><td>No</td></tr>
            </tbody>
    </table>
    </div>
</body>
</html>

使用MVC模式后代码如下：

<!DOCTYPE html>
<html ng-app="todoApp">
<head>
    <meta charset="UTF-8">
    <title>TO DO List</title>
    <link href="./bootstrap/css/bootstrap.css" rel="stylesheet"/>
    <link href="./bootstrap/css/bootstrap-theme.css" rel="stylesheet"/>
    <script src="./angularJs/angular.js"></script>
    <script>

        var model = {
            user:"Yimi",
            items:[{action:"练车",done:true},
                {action:"看课外书",done:false}]
        };

        var todoApp = angular.module("todoApp",[]);

        todoApp.controller("ToDoCtrl",function($scope){ //以$开头的变量名表示AngularJS的内置特性
            $scope.todo = model;
        });

    </script>
</head>
<body ng-controller="ToDoCtrl">
    <div class="page-header">
        <h1>{{todo.user}}'s TO DO List</h1>
        <span class="label label-default">{{todo.items.length}}</span>
    </div>
    <div class="panel">
        <div class="input-group">
            <input class="form-control"/>
            <span class="input-group-btn">
                <button class="btn btn-default">Add</button>
            </span>
        </div>
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Description</th>
                    <th>Done</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="item in todo.items">
                    <td>{{item.action}}</td>
                    <td>{{item.done}}</td>
                </tr>
            </tbody>
    </table>
    </div>
</body>
</html>

效果图如下：

使用Chrome浏览器查看
网页效果图

模型-视图-控制器(MVC)

M:模型。程序中的数据

......
var model = {
            user:"Yimi",
            items:[{action:"练车",done:true},
                {action:"看课外书",done:false}]
        };
......

V:视图。显示数据的逻辑
比如在间通过{{和}}调用之前定义的模型的值

......
<h1>{{todo.user}}'s TO DO List</h1>
        <span class="label label-default">{{todo.items.length}}</span>
......
<tr ng-repeat="item in todo.items">
         <td>{{item.action}}</td>
         <td>{{item.done}}</td>
</tr>
......

C:控制器。对数据进行操作的逻辑

var todoApp = angular.module("todoApp",[]);

        todoApp.controller("ToDoCtrl",function($scope){ //以$开头的变量名表示AngularJS的内置特性
            $scope.todo = model;
        });

<body ng-controller="ToDoCtrl">