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. .net DropDownList静态联动

    1.前台 <span id="spnClient" style="margin-left: 30px; margin-top: 10px"> < ...

  2. Hyper-V 2012 R2 故障转移群集

    和终端用户相比,企业用户对于业务的连续性和可靠性更为在意.相对而言,企业一般不会将追逐单一硬件的性能排在第一位. 如何衡量业务是否持续可用,一般使用"x 个 9"这种方式来定义.如 ...

  3. PHP访问带密码的Redis

    1. 设置Redis密码,以提供远程登陆打开redis.conf配置文件,找到requirepass,然后修改如下: requirepass yourpassword yourpassword就是re ...

  4. SpringSecurity操作指南-基于Spring、SpringMVC和MyBatis自定义SpringSecurity权限认证规则

  5. 使用NUGet自动下载(还原)项目中使用的包

    签出完整项目后,在解决方案名称上点右键,选择"启用NuGet程序包还原",如下图: 出现询问,当然要点是:是 当完成后,会发现在解决方案中,多出".nuget" ...

  6. ios - block循环引用Demo示例

    当实例变量中有了block属性,并且用copy来修饰,但是当调用block中的代码的时候,如果block中运用了self.属性的时候回造成循环引用. // // ViewController.h // ...

  7. lua拾遗之lua中冒号(:)与点号(.)的区别和来由

    参考资料 1.https://my.oschina.net/lonewolf/blog/173065 其结论为: 1.定义的时候:Class:test()与 Class.test(self)是等价的, ...

  8. 003-常用的Meta标签写法和作用

    页面关键词<meta name="keywords" content="your,tags"/> 页面描述<meta name="d ...

  9. eclipse进行编译时总是有javascript validator错误提示

    右击工程项目的properties——builders——去掉对javascript的验证就ok啦

  10. 2.6 C#的标识符命名规则

    C#标识符的命名规则 程序中的变量名.常量名.类名.方法名,都叫做标识符.C#有一套标识符的命名规则,如果命名时不遵守规则,就会出错.这套规则简单说有下面三条: ①标识符只能由英文字母.数字和下划线组 ...