AngularJS基于MVC的复杂操作案例

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>AngularJS基于MVC的复杂操作案例</title>

         <script type="text/javascript" src="../js/angular.min.js"></script>

     </head>

     <body>

         <!--ng-app="myapp"定义了一个模块-->

         <div ng-app="myapp" ng-controller="myctrl">

             <div>

                 <!--ng-model模型作用-->

                 <input type="text" name="name" ng-model="name" />

                 <!--提供按钮-->

                 <input type="button" value="清空" ng-click="clearVal()" />

             </div>

             <div>

                 <!--{{}}等价于ng-bind用于数据显示-->

                 hello,{{name}}

             </div>

         </div>

     </body>

     <script type="text/javascript">

         //初始化myapp模块

         var myapp = angular.module("myapp",[]);

         //定义模块的控制器

         //依赖注入，$scope作用域对象，操作当前作用域视图

         myapp.controller("myctrl",["$scope",function($scope){

             //对模型进行初始化赋值

             $scope.name = "你我他学习吧";

             //在作用域提供clearVal点击事件

             $scope.clearVal = function(){

                 //模型设置为空

                 $scope.name = "";//清空输入框内容

             }

         }]);

     </script>

 </html>

AngularJS基于MVC的复杂操作案例的更多相关文章

  1. Spring MVC -- MVC设计模式(演示4个基于MVC框架的案例)

    对于简单的Java Web项目,我们的项目仅仅包含几个jsp页面,由于项目比较小,我们通常可以通过链接方式进行jsp页面间的跳转. 但是如果是一个中型或者大型的项目,上面那种方式就会带来许多维护困难, ...

  2. 【JAVA】基于MVC架构Java技术荟萃案例演练

    基于JAVA-MVC技术的顾客管理项目案例总结 作者 白宁超 2016年6月9日22:47:08 阅读前瞻:本文源于对javaweb相关技术和资料汇总,涉及大量javaweb基础技术诸如:Servle ...

  3. AngularJS基于模块化的MVC实现

    AngularJS基于模块化的MVC实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  4. 【转】asp.net mvc webapi+angular.js案例

    参考地址:http://www.mamicode.com/info-detail-892383.html 大家好,本文用一个简单的demo演示AngularJS在MVC中的使用,在学习这个demo之前 ...

  5. CRUD，分页，排序，搜索与AngularJS在MVC

    下载source - 53.1 MB 介绍 在选择最新的技术时,有几个因素会起作用,包括这些技术将如何与我们的项目集成.这篇文章解决了开始使用AngularJS和MVC的乞丐的问题.这篇文章告诉使用语 ...

  6. iOS基于MVC的项目重构总结

    关于MVC的争论 关于MVC的争论已经有很多,对此我的观点是:对于iOS开发中的绝大部分场景来说,MVC本身是没有问题的,你认为的MVC的问题,一定是你自己理解的问题(资深架构师请自动忽略本文). 行 ...

  7. 转：iOS基于MVC的项目重构总结

    转:http://www.cocoachina.com/ios/20160519/16346.html 关于MVC的争论 关于MVC的争论已经有很多,对此我的观点是:对于iOS开发中的绝大部分场景来说 ...

  8. [转]Asp.Net大型项目实践(11)-基于MVC Action粒度的权限管理【续】【源码在这里】（在线demo，全部源码）

    本文转自:http://www.cnblogs.com/legendxian/archive/2010/01/25/1655551.html 接上篇Asp.Net大型项目实践(10)-基于MVC Ac ...

  9. 【Unity】基于MVC模式的背包系统 UGUI实现

    前言 本文基于MVC模式,用UGUI初步实现了背包系统. Control层包括了点击和拖拽两种逻辑. 博文首发:http://blog.csdn.net/duzixi 下载地址:https://git ...

随机推荐

  1. 关于LVS负载均衡tcp长连接分发的解决思路

    虽然应用keepalived搞定了后端服务负载均衡和高可用性问题,但是在具体应用的时候,还是要注意很多问题.很多应用都用tcp或者http的长连接,因为建立tcp连接或者http连接开销比较大,而应用 ...

  2. 简单理解Vue中的nextTick

    Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一. ...

  3. Ant Design Pro的dva-loading

    loading为dva的插件,全局可用,它里面维护了一些布尔值,用于控制loading动画效果的显示与隐藏,通过@connect()来注入使用 官网介绍如下: https://dvajs.com/ 在 ...

  4. docker学习笔记（四）-持久化数据，安装docker-compose

    Docker 持久化数据 实战 compose 安装docker-compose

  5. springboot 服务工程，前端服务调用接口报跨域错误

    前后端分离,VUE.JS调用服务接口时,跨域错误.需要服务接口工程设置,如下: @SpringBootApplicationpublic class SpringCloudOpenapiApplica ...

  6. 自动化测试中依据元素实时截图，比较元素图片是否一致（selenium和appium通用）

    1.根据元素的上下左右的坐标进行截图 2.先安装pillow 3.下面是截图 4.下面是比较两张图片的值 5.截取两张图片,然后对两张图片比对,这种场景,可以在测试视频播放.图片显示页面做验证.

  7. linux内存源码分析 - SLUB分配器概述

    本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ SLUB和SLAB的区别 首先为什么要说slub分配器,内核里小内存分配一共有三种,SLAB/SLUB/SLOB ...

  8. 用ASP.NET MVC仿站糗事百科

    废话就不多说,直接来操作,有些细节问题就不一一解说了(没有几天几夜都说不完),主意是想让大家看完知道大概这个框架是怎么搭建的就可以了 一. 新建一个解决方案,搭建三层架构,分别为: DAL层  .DL ...

  9. GitHub Or Subversion

    上一次转载了介绍GitHub的博文点我,我想对于初学GitHub的同学们还是有不清楚的地方,毕竟有些概念的理解比较费力.我觉得作为一个对于配置库技术已经有一定基础的同学们,要学习GitHub,最快以及 ...

  10. 序列化与ArrayList 的elementData的修饰关键字transient

    transient用来表示一个域不是该对象序行化的一部分,当一个对象被序行化的时候,transient修饰的变量不会被序列化 ArrayList的动态数组elementData被transient  ...