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

来源：互联网发布：学校机房网络拓扑结构编辑：程序博客网时间：2024/06/10 07:52

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">

阅读全文

0 0