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. CMake的一些使用

    1. 使用QT加载CMake工程 打开QT,"文件"->"打开文件或项目"->选中CMakeLists.txt文件,出现对话框,单击下一步,点击&q ...

  2. C++学习笔记 指针与引用

    指针与引用  1. 指针 (1) 指针是一个变量(实体),存储的是一个地址,指向内存的一个存储单元,指针可以为空 (2) 指针可以为空,在声明定义时可以不初始化 (3) 指针在初始化之后可以重新指向其 ...

  3. ios cell时间相同隐藏算法

  4. iOS真机运行 Xcode报错(libpng error: CgBI: unhandled critical chunk)问题已解决；

    Cocos2d-x加载图片资源出现libpng error: CgBI: unhandled critical chunk Xcode7.3 设置Remove Text Metadata From P ...

  5. CDN技术详解

    CDN,全称为Content DeliveryNetwork,中文意为"内容分发网络"".通过将网络内容发布到最靠近用户的『边缘节点』,使不同地区的用户在访问相同页面.图 ...

  6. JSP基本语法小结

    jsp表达式:<%=???%> 在jsp页面嵌入java代码<%Java代码%>可以用多个<% %>分割代码段 jsp声明:<%!用这样的方法可以声明java ...

  7. android adb命令

    adb查看logcat adb logcat <TAG>:* *:S 查看指定TAG的Log adb查看最上层activity:linux: adb shell dumpsys activ ...

  8. jQuery.serialize() 函数详解////////////z

    serialize()函数用于序列化一组表单元素,将表单内容编码为用于提交的字符串. serialize()函数常用于将表单内容序列化,以便用于AJAX提交. 该函数主要根据用于提交的有效表单控件的n ...

  9. URL跳转的几种方式

    1.HTML: ①. <head> <!-- 以下方式只是刷新不跳转到其他页面 --> <meta http-equiv="refresh" cont ...

  10. Wireshark工控协议

    Wireshark是一个强大开源流量与协议分析工具,除了传统网络协议解码外,还支持众多主流和标准工控协议的分析与解码. 序号 协议类型 源码下载 简介 1 Siemens S7 https://git ...