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

AngularJS学习笔记（1）——MVC模式的清单列表效果的更多相关文章

  1. AngularJS学习笔记（2）——与用户交互的动态清单列表

    与用户交互的动态清单列表 以我之前写的一个清单列表页面作为例子(MVC模式的清单列表效果),优化前代码如下: <!DOCTYPE html> <html ng-app="t ...

  2. jsp学习笔记：mvc开发模式

    jsp学习笔记:mvc开发模式2017-10-12 22:17:33 model(javabe)与view层交互 view(视图层,html.jsp) controller(控制层,处理用户提交的信息 ...

  3. AngularJs学习笔记--expression

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/expression 表达式(Expressions)是类Javascript的代码片段,通常放置在绑定 ...

  4. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

  5. AngularJs学习笔记--Understanding the Model Component

    原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model 在angular文档讨论的上下文中,术语“model”可以 ...

  6. AngularJs学习笔记--Understanding the Controller Component

    原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model 在angular中,controller是一个javasc ...

  7. AngularJs学习笔记--Understanding Angular Templates

    原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model angular template是一个声明规范,与mode ...

  8. AngularJS 学习笔记--01

    学习 AngularJS 要先了解 MVC 模式 , 即 " 模型--视图--控制器 " . 模型: 包含了需要用到的数据 ; 有两种广义上的模型 : 视图模型 , 只表示从控制器 ...

  9. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

随机推荐

  1. 用pycharm提交代码，冲突之后文件丢失找回方法

    1: 更新代码时, 监测到本地代码改变,需要和合并,重启之后才可以, 选择No同时,代码会被冲掉,新增加的文件也会被冲掉, 但是pycharm有一个文件历史记忆,找到之后可以找到丢失的文件. 1: 选 ...

  2. TCP报文格式和三次握手——三次握手三个tcp包（header+data），此外，TCP 报文段中的数据部分是可选的，在一个连接建立和一个连接终止时，双方交换的报文段仅有 TCP 首部。

    from:https://blog.csdn.net/mary19920410/article/details/58030147 TCP报文是TCP层传输的数据单元,也叫报文段. 1.端口号:用来标识 ...

  3. 【hive】关于用户留存率的计算

    首先用户留存率一般是面向新增用户的概念,是指某一天注册后的几天还是否活跃,是以每天为单位进行计算的.一般收到的需求都是一个时间段内的新增用户的几天留存 (1)找到这个时间段内的新增用户(也可能含有地区 ...

  4. Hadoop的概念、版本、发展史

    Hadoop是什么?Hadoop的起源Hadoop发展史Hadoop的四大特性(优点)Hadoop的版本如何选择Hadoop版本 Hadoop是什么? Hadoop: 适合大数据的分布式存储和计算平台 ...

  5. ISE创建Microblaze软核（三）

    第七步 进入SDK开发环境 编译完成后弹出如下对话框,选择SDK的工作目录.在MicroblazeTutor中创建一个Workspace文件夹,并选择该文件夹为SDK的工作目录. 进入SDK主界面. ...

  6. 《转》深入理解Activity启动流程(三)–Activity启动的详细流程1

    本文原创作者:Cloud Chou. 出处:本文链接 本系列博客将详细阐述Activity的启动流程,这些博客基于Cm 10.1源码研究. 深入理解Activity启动流程(一)--Activity启 ...

  7. python的自省函数, 快速找出BUG的良器

    python内置的好多自省函数,  合理使用可快速查找相关提示, 快速找到问题点, 以下开始具体说明 1. dir()  列出对象的所有属性和方法 如:  dir(list)  可以列出列表的所有属性 ...

  8. mouseover、mouseout和mouseenter、mouseleave

    这里直接把<Javascript 高级程序设计(第三版)>中的解释贴出来: mouseover:在鼠标指针位于一个元素外部,然后用户将其首次移入另一个元素边界之内时触发.不能通过键盘触发这 ...

  9. 使用百度地图SDK出现的问题及解决方法

    1. 第一个错误信息如下: java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.baiduma ...

  10. php session目录找不到的错误 Error session_start(): open(/var/lib/php/session error

    问题来源 今天安装一个应用,发现提示 Error session_start(): open(/var/lib/php/session error,估计是找不到写不了啥啥啥. 于是我就去该路径下去看看 ...