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. c++ linux 判断string是中文的 or 英文的 字符串。

    #include <iostream> #include <string.h> #include <stdio.h> #include <stdlib.h&g ...

  2. RobHess的SIFT源码分析：imgfeatures.h和imgfeatures.c文件

    SIFT源码分析系列文章的索引在这里:RobHess的SIFT源码分析:综述 imgfeatures.h中有SIFT特征点结构struct feature的定义,除此之外还有一些特征点的导入导出以及特 ...

  3. 初学VS的目录结构

    工程目录下各文件的含义 一般大部分的文章可能介绍到上面就算结束了,但我这还没有.创建工程产生的各个文件都你知道是什么用的吗? 如果你是一个初学者,你可能会不知道(老手请跳过本文).Ok,我就带你逐一了 ...

  4. Spring实战第一部分总结

                                                         Spring实战第一部分总结 第一章 综述 1. DI依赖注入让相互协作的组件保持松散耦合,而 ...

  5. [洛谷P3527] [POI2011]MET-Meteors

    洛谷题目链接:[POI2011]MET-Meteors 题意翻译 Byteotian Interstellar Union有N个成员国.现在它发现了一颗新的星球,这颗星球的轨道被分为M份(第M份和第1 ...

  6. linux sh脚本异常：/bin/sh^M:bad interpreter: No such file or directory

    在Linux中执行.sh脚本,异常/bin/sh^M: bad interpreter: No such file or directory.这是不同系统编码格式引起的:在windows系统中编辑的. ...

  7. RDLC - 后台代码直接导出Excel/PDF/Word格式

    最近做报表功能,用到了.net的报表组件rdlc. 其中有个功能就是后台代码直接输出Excel/PDF/Word格式的文件,网上看了些资源,做个总结: 参考地址 我直接贴出代码: //自动导出exce ...

  8. Item 8 覆盖equals时请遵守通用约定

    在覆盖equals方法的时候,你必须要遵守它的通用约定,不遵守,写出来的方法,会出现逻辑错误.下面是约定的内容:   equals方法实现了等价关系:   自反性.对于任何非null的引用值,x.eq ...

  9. POJ 2456 Aggressive cows （ 二分搜索）

    题目链接 Description Farmer John has built a new long barn, with N (2 <= N <= 100,000) stalls. The ...

  10. this的九种常用场景（转子jb51.net）

    [场景1]全局环境中的this指向全局对象 ; alert(a); b = ; alert( ; [场景2]对象内部函数的this指向调用函数的当前对象 ; var bar = { a: , test ...