MVC模式

模型(model)－视图(view)－控制器(controller)

Angular.js采用了MVC设计模式的开源js框架

1、如何在angular.js建立自己的模块(model)，控制器(controller)，操作模型数据。

　　

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script src="js/angular.js"></script>

    <!--这里我们需要引入一个angular.js -->

</head>

<!--④：在body中，声明执行myCtrl控制器-->

<body ng-controller="myCtrl">

<!--用双花括号括起来来引用，创建好的模型数据  -->

<p>{{name}}</p>

<script>

    //①：    模块的声明

   var app= angular.module("myApp",['ng']);

    //③： 控制器的声明

    app.controller('myCtrl',function($scope){

        console.log('in my contro function');

        //⑤：操作模型数据

        //$scope是建立模型数据和视图的桥梁

        $scope.name='web1608';

    });

</script>

</body>

</html>

2、ng指令

　　对于图像数据(ng-src)和(ng-click)的引用　

<button ng-click="add()">＋1</button>

<img ng-src="img/{{imgUrl}}"/>
<script>

    //模块的声明

    var app=angular.module('myApp',['ng']);

    //控制器的声明

    app.controller('myCtro',function($scope){

        $scope.num=10;

        $scope.imgUrl='1.jpg';

        $scope.add=function(){

            $scope.num++;

            console.log($scope.num);

        }

    })

</script>

需要使用img的src属性是同样 也要用ng指令中定义好的ng-src  来使用模型数据。否则浏览器显示后会提示有错误 .

　　使用(ng-repeat)来遍历数据：

 <!DOCTYPE html>

 <html ng-app="myApp">

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script src="js/angular.js"></script>

 </head>

 <body ng-controller="myCtro">

 <!--简易 添加 数据和 删除 数据  ng-repeat  -->

 <table>

     <thead>

     <tr>

         <th>单价</th>

         <th>数量</th>

         <th>小计</th>

         <th>删除</th>

     </tr>

     </thead>

     <tbody>

     <!--ng-repeat  遍历方式①  -->

     <tr ng-repeat="shop in cart track by $index">

     <!--shop in cart  是遍历数组对象cart 给shop(自己命名) 和 for in 类似 -->

     <!--track by $index  每个遍历过程的shop 都有一个下标 $index-->

         <td ng-repeat="(key,value) in shop">

         <!-- ng-repeat 遍历方式② -->

         <!--  遍历shop 关联数组 方式 ： 键对值-->

             {{value}}

         </td>

         <td>

             <button ng-click="delete($index)">删除</button>

         </td>

     </tr>

     </tbody>

 </table>

 <button ng-click="add()">添加</button>

 <script>

     var app=angular.module('myApp',['ng']);

     app.controller('myCtro',function($scope){

         $scope.cart=[

             {cname:'冰箱',price:1000,num:1},

             {cname:'烤箱',price:300,num:1},

             {cname:'保鲜箱',price:200,num:1},

         ];

         $scope.delete=function($index){

             //对cart进行删除操作

             $scope.cart.splice($index,1);

         }

         $scope.add=function(){

             //直接入栈 添加新数据

             $scope.cart.push({cname:'保鲜箱',price:200,num:1});

         }

     })

 </script>

 </body>

 </html>

　　显示结果:

Angular.js 的初步认识的更多相关文章

  1. angular 实现modal windows效果（即模态窗口，半透明的遮罩层），以及bootstrap(css,components,js)的初步学习

    废话不说,直接上代码.可直接看效果,对着分析..今天算是bootstrap 入门了,开心.. 突然居然很多事情就是那样,不要太多的畏惧,迈出第一步其实就成功了一半了. <html ng-app= ...

  2. 通过Web Api 和 Angular.js 构建单页面的web 程序

    通过Web Api 和 Angular.js 构建单页面的web 程序 在传统的web 应用程序中,浏览器端通过向服务器端发送请求,然后服务器端根据这个请求发送HTML到浏览器,这个响应将会影响整个的 ...

  3. 青出于蓝而胜于蓝 — Vue.js对Angular.js的那些进步

    Angular.js与Vue.js是非常有渊源的两款前端框架,据Vue.js的官方网站描述,在其早期开发时,灵感来源就是Angular.js.而在很多方面,Vue.js也正像是中国的那句古话,&quo ...

  4. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  5. angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testServe

    angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testSer ...

  6. (翻译)Angular.js为什么如此火呢？

    在本文中让我们来逐步发掘angular为什么如此火: Angular.js 是一个MV*(Model-View-Whatever,不管是MVC或者MVVM,统归MDV(model Drive View ...

  7. angular.js写法不规范导致错误

    以下写法:没有明确指定module和controller,写法不规范. 更改angular.js版本会出bug. <html ng-app> <head> <title& ...

  8. Angular.js实现折叠按钮的经典指令.

    var expanderModule=angular.module('expanderModule',[]) expanderModule.directive('expander',function( ...

  9. Angular.js通过bootstrap实现经典的表单提交

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel= ...

随机推荐

  1. sparksql udf的运用----scala及python版（2016年7月17日前完成）

    问:udf在sparksql 里面的作用是什么呢? 答:oracle的存储过程会有用到定义函数,那么现在udf就相当于一个在sparksql用到的函数定义: 第二个问题udf是怎么实现的呢? regi ...

  2. JSTL 自定义标签

    编写描述标签的tld文件,把这个文件放到web-inf/目录下,才能在jsp页面上调用自定义的标签 package test.yz; import java.io.IOException; impor ...

  3. AngularJS 2.0

    https://angular.io/docs/ts/latest/guide/learning-angular.html QuickStart: git clone https://github.c ...

  4. SqlServer数据库空间使用情况常用命令

    --最简单的办法就是使用SSM客户端,报表查看 --查询数据文件的空间情况 dbcc showfilestats --查询日志文件的空间情况 dbcc sqlperf(logspace) --查询te ...

  5. react lazyload

    思路: DOM加载时,<img> 标签里,添加data-src路径 = src 路径, src路径 = 本地默认图片路径, DOM加载完成后,监听页面可视区域,有data-src时,就将s ...

  6. Node.js Express 框架学习

    转载:http://JavaScript.ruanyifeng.com/nodejs/express.html#toc0 感觉很牛的样子,不过觉得对初学者没太大用,里面很多例子用的api都没有详细的说 ...

  7. Hive：Spark中如何实现将rdd结果插入到hive1.3.0表中

    DataFrame写入hive API: registerTempTable函数是创建spark临时表 insertInto函数是向表中写入数据,可以看出此函数不能指定数据库和分区等信息,不可以直接进 ...

  8. win10 pro 1511 激活成功

    slmgr /ipk W269N-WFGWX-YVC9B-4J6C9-T83GX slmgr /skms franklv.ddns.net slmgr /ato

  9. c++减法高精度算法

    c++高精度算法,对于新手来说还是一大挑战,只要克服它,你就开启了编程的新篇章,算法. 我发的这个代码并不是很好,占用内存很多而且运行时间很长(不超过0.02秒),但是很好理解,很适合新手 高精算法的 ...

  10. java中使用jxl导出Excel表格详细通用步骤

    该方法一般接收两个参数,response和要导出的表格内容的list. 一般我们将数据库的数据查询出来在页面进行展示,根据用户需求,可能需要对页面数据进行导出. 此时只要将展示之前查询所得的数据放入s ...