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. android中如何在低版本（5.0之前）上使用tint（着色）属性

    1. 使用app前缀(app:backgroundTint,app:backgroundTintMode),如果使用android前缀,在低版本上是拿不到值的,因为这些属性是5.0以后才加入的. 2. ...

  2. 简单的oracle分页语句

    SELECT * FROM ( SELECT rownum rn,te.* FROM (SELECT * FROM  tb_enterprise) te  WHERE rownum <= 10) ...

  3. C# 实现函数回调

    public class Lib { public delegate void UserFunctionCB(); private static UserFunctionCB m_userFnCB; ...

  4. git操作的常用命令

    git remote show origin 查看git远程信息git remote set-url origin git@gitlab.staff.xdf.cn:woxue/woxueadmin.g ...

  5. delphi 环境问题

    这个编译时的警告该如何理解?[Warning] Unit 'Unit101' implicitly imported into package 'Package202'------解决方案------ ...

  6. ubuntu安装使用latex和texmaker--PC端

    参考文档 据说中文文献可能不识别,可能用到的参考资料

  7. LDAP的Schema

    Schema是LDAP的一个重要组成部分,类似于数据库的模式定义,LDAP的Schema定义了LDAP目录所应遵循的结构和规则,比如一个 objectclass会有哪些属性,这些属性又是什么结构等等, ...

  8. laravel5.3----------调度任务以及Artisan

    1.在使用的过程中会遇到有些函数不能用需要在php配置文件里面打开: disable_functions = exec,passthru,popen,proc_open,shell_exec,syst ...

  9. AIX UNIX 系统管理、维护与高可用集群建设——数据库结构设计

    在对数据库类应用进行优化的过程中我们了解到一个原则,即思想上要从结构设计抓起,按照下面的顺序: 1.数据库逻辑结构设计和物理设计. 2.数据库对象部署和SQL代码编写. 3.数据库实例性能调整和优化. ...

  10. 建模分析之机器学习算法（附python&R代码）

    0序 随着移动互联和大数据的拓展越发觉得算法以及模型在设计和开发中的重要性.不管是现在接触比较多的安全产品还是大互联网公司经常提到的人工智能产品(甚至人类2045的的智能拐点时代).都基于算法及建模来 ...