1.前端MVC：

M:Model,数据库

V:HTML页面

C:Control控制器

比较很有名的前端MVC框架：ExtJs

2.angularJS的MVC框架搭建

index.html代码如下：

   <!DOCTYPE html>

          <html lang="en">

          <head>

                     <meta charset="UTF-8">

                     <title>Title</title>

                     <link rel="stylesheet" href="css/foundation.min.css">

          </head>

          <body style="padding:10px;" ng-app="app">

                 <div ng-controller="MyCtrol">

                     <input type="text" ng-model="msg">

                     <h1>{{msg}}</h1>

                 </div>

          </body>

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

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



       </html>

myCtrol.js的代码如下：

          angular.module('app', [])

          .controller('MyCtrol', function ($scope) {

                     $scope.msg = "Angular";

          });

ng-bind的使用：

   <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <title>Title</title>

          <link rel="stylesheet" href="css/foundation.min.css">

   </head>

   <body style="padding:10px;" ng-app="">

   <div>

              <input type="text" ng-model="msg">

              <h1 ng-clock class="ng-clock">{{msg}}</h1>

              <!--ng-clock的作用就是，在完全渲染之前不会让{{}}显示-->

              <h1 ng-bind="msg"></h1>

              <div class="{{msg}}">{{msg}}</div>

          </div>

   </body>

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

   </html>

controller的用法

index.html代码如下：

   <!DOCTYPE html>

          <html lang="en">

          <head>

              <meta charset="UTF-8">

              <title>Title</title>

       <link rel="stylesheet" href="css/foundation.min.css">

          </head>

          <body style="padding:10px;" ng-app="app">

              <div ng-controller="MyCtrol">

           <input type="text" ng-model="msg">

           <h1 ng-bind="msg"></h1>

       </div>

       <div ng-controller="MyCtrol2">

           <input type="text" ng-model="msg">

           <h1 ng-bind="msg"></h1>

       </div>

       </body>

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

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

   </html>

myCtrol.js的代码如下：

   angular.module('app', [])

   .controller('MyCtrol', function ($scope) {

       $scope.msg = "Hello angular";

   })

   .controller('MyCtrol2',function ($scope) {

       $scope.msg = "World angular";

   })

$scope中方法和变量的使用

   <!DOCTYPE html>

   <html lang="en">

   <head>

       <meta charset="UTF-8">

       <title>Title</title>

       <link rel="stylesheet" href="css/foundation.min.css">

   </head>

   <body style="padding:10px;" ng-app="app">

       <div ng-controller="MyCtrol">

           <input type="text" ng-model="user.uname">

           <input type="text" ng-model="user.pwd">

           <!--<h1>{{reverse()}}</h1>-->

           <div class="button" ng-click="login()">登录</div>

           <div ng-show="errormsg.length>0" class="alert-box">{{errormsg}}</div>

       </div>

   </body>

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

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

   </html>

   angular.module("app",[])

   .controller('MyCtrol',function ($scope) {

       $scope.msg = "";

       $scope.user = {uname:'',pwd:''};

       $scope.errormsg = "";

       $scope.reverse = function () {

           return $scope.msg.split(" ").reverse().join("");

       }

       $scope.login = function () {

           if($scope.user.uname == "admin" && $scope.user.pwd == "123"){

               alert("登录成功！");

           }else{

               $scope.errormsg = "用户名或密码错误";

           }

       }

   })

angularJS的MVC的用法的更多相关文章

  1. 完成AngularJS with MVC 5, Web API 2项目

    经过接近两个月的日夜奋战,完成AngularJS with MVC 5, Web API 2的项目,这也是进入公司以后最大的一个项目,从项目需求.用户Prototype/Demo,招人,开发完成,可谓 ...

  2. AngularJS select中ngOptions用法详解

    AngularJS select中ngOptions用法详解   一.用法 ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上. 数组: label for value in a ...

  3. ASP.NET MVC HtmlHelper用法集锦

    ASP.NET MVC HtmlHelper用法集锦 在写一个编辑数据的页面时,我们通常会写如下代码 1:<inputtype="text"value='<%=View ...

  4. MVC HtmlHelper用法大全

    MVC HtmlHelper用法大全HtmlHelper用来在视图中呈现 HTML 控件.以下列表显示了当前可用的一些 HTML 帮助器. 本主题演示所列出的带有星号 (*) 的帮助器. ·Actio ...

  5. AngularJS基于MVC的复杂操作案例

    AngularJS基于MVC的复杂操作案例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  6. AngularJs - Javascript MVC 框架

    在2012年6月google发布了AngularJs 1.0稳定版, 并宣称:AngularJS可以让你扩展HTML的语法,以便清晰.简洁地表示应用程序中的组件,并允许将标准的HTML作为你的模板语言 ...

  7. AngularJS中forEach的用法

    AngularJS中当我们需要遍历某个数组的时候,我们会用到forEach语法.AngularJS中forEach的用法如下: angular.forEach(array,function(obj,i ...

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

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

  9. indexedDB bootstrap angularjs 前端 MVC Demo

    前端之MVC应用 1.indexedDB(Model): 数据层,前端浏览器 HTML5 API 面向对象数据库,一般现在用的数据库都是关系型数据库. 那么indexeddb有什么特点呢: 首先,从字 ...

随机推荐

  1. 【单调队列】【P2627】 修剪草坪

    传送门 Wa这次竟然不是Uva的题 Description 在一年前赢得了小镇的最佳草坪比赛后,Farm John变得很懒,再也没有修剪过草坪.现在,新一轮的最佳草坪比赛又开始了,Farm John希 ...

  2. ucenter搭建

    使用xftp传到虚拟机.解压[root@ygy130 ~]# unzip -o -d ./Ucenter_1.6 UCenter_1.6.0_SC_UTF8.zip [root@ygy130 ~]# ...

  3. linux 下文件重命名/移动/复制命令（转）

    linux 下文件重命名/移动/复制命令(转) linux下重命名文件:使用mv命令就可以了, 例:要把名为:abc   重命名为:123 可以这样操作: 重命名:MV命令 1.进入你的文件目录,运行 ...

  4. 洛谷 P2800 又上锁妖塔

    https://www.luogu.org/problem/show?pid=2800 题目背景 小D在X星买完了想要的东西,在飞往下一个目的地的途中,正无聊的他转头看了看身边的小A,发现小A正在玩& ...

  5. Python随机选择Maya场景元素

    之前在公司参与的一个与国外合作的项目中,有一景需要动态.随机地选取场景中的一些物体,同时显示指定材质,当时是用Houdini的节点+Hscript 解决的: 今天用简洁优雅的Python在Maya中写 ...

  6. 【hdu1828/poj1177】线段树求矩形周长并

    题意如图 题解:这题非常类似与矩形面积并,也是维护一个被覆盖了一次以上的线段总长. 但是周长要算新出现的,所以每次都要和上一次做差求绝对值. x轴做一遍,y轴做一遍. 但是有个问题:矩形边界重合的时候 ...

  7. div+css实现表头固定内容滚动表格

    <div class="m-demo"> <table> <thead> <tr><th>定宽a</th>& ...

  8. CART算法(转)

    来源:http://www.cnblogs.com/pinard/p/6053344.html 作者:刘建平Pinard 对于C4.5算法,我们也提到了它的不足,比如模型是用较为复杂的熵来度量,使用了 ...

  9. 2017-2018-1 20179205《Linux内核原理与设计》第十周作业

    <Linux内核原理与设计>第十周作业 教材17.19.20章学习及收获 1.在Linux以及所有unix系统中,设备被分为以下三种:块设备(blkdev)以块为单位寻址,通过块设备节点来 ...

  10. 通过or注入py脚本

    代码思路 1.主要还是参考了别人的代码,确实自己写的和别人写的出路很大,主要归咎还是自己代码能力待提高吧. 2.将功能集合成一个函数,然后通过*args这个小技巧去调用.函数的参数不是argv的值,但 ...