1.前端MVC：

M:Model,数据库

V:HTML页面

C:Control控制器

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

2.angularJS的MVC框架搭建

index.html代码如下：

  1.    <!DOCTYPE html>
  2.           <html lang="en">
  3.           <head>
  4.                      <meta charset="UTF-8">
  5.                      <title>Title</title>
  6.                      <link rel="stylesheet" href="css/foundation.min.css">
  7.           </head>
  8.           <body style="padding:10px;" ng-app="app">
  9.                  <div ng-controller="MyCtrol">
  10.                      <input type="text" ng-model="msg">
  11.                      <h1>{{msg}}</h1>
  12.                  </div>
  13.           </body>
  14.           <script src="js/angular.min.js"></script>
  15.           <script src="js/myCtrol.js"></script>

  1.        </html>

myCtrol.js的代码如下：

  1.           angular.module('app', [])
  2.           .controller('MyCtrol', function ($scope) {
  3.                      $scope.msg = "Angular";
  4.           });

ng-bind的使用：

  1.    <!DOCTYPE html>
  2.           <html lang="en">
  3.           <head>
  4.           <meta charset="UTF-8">
  5.           <title>Title</title>
  6.           <link rel="stylesheet" href="css/foundation.min.css">
  7.    </head>
  8.    <body style="padding:10px;" ng-app="">
  9.    <div>
  10.               <input type="text" ng-model="msg">
  11.               <h1 ng-clock class="ng-clock">{{msg}}</h1>
  12.               <!--ng-clock的作用就是，在完全渲染之前不会让{{}}显示-->
  13.               <h1 ng-bind="msg"></h1>
  14.               <div class="{{msg}}">{{msg}}</div>
  15.           </div>
  16.    </body>
  17.    <script src="js/angular.min.js"></script>
  18.    </html>

controller的用法

index.html代码如下：

  1.    <!DOCTYPE html>
  2.           <html lang="en">
  3.           <head>
  4.               <meta charset="UTF-8">
  5.               <title>Title</title>
  6.        <link rel="stylesheet" href="css/foundation.min.css">
  7.           </head>
  8.           <body style="padding:10px;" ng-app="app">
  9.               <div ng-controller="MyCtrol">
  10.            <input type="text" ng-model="msg">
  11.            <h1 ng-bind="msg"></h1>
  12.        </div>
  13.        <div ng-controller="MyCtrol2">
  14.            <input type="text" ng-model="msg">
  15.            <h1 ng-bind="msg"></h1>
  16.        </div>
  17.        </body>
  18.    <script src="js/angular.min.js"></script>
  19.    <script src="js/myCtrol.js"></script>
  20.    </html>

myCtrol.js的代码如下：

  1.    angular.module('app', [])
  2.    .controller('MyCtrol', function ($scope) {
  3.        $scope.msg = "Hello angular";
  4.    })
  5.    .controller('MyCtrol2',function ($scope) {
  6.        $scope.msg = "World angular";
  7.    })

$scope中方法和变量的使用

  1.    <!DOCTYPE html>
  2.    <html lang="en">
  3.    <head>
  4.        <meta charset="UTF-8">
  5.        <title>Title</title>
  6.        <link rel="stylesheet" href="css/foundation.min.css">
  7.    </head>
  8.    <body style="padding:10px;" ng-app="app">
  9.        <div ng-controller="MyCtrol">
  10.            <input type="text" ng-model="user.uname">
  11.            <input type="text" ng-model="user.pwd">
  12.            <!--<h1>{{reverse()}}</h1>-->
  13.            <div class="button" ng-click="login()">登录</div>
  14.            <div ng-show="errormsg.length>0" class="alert-box">{{errormsg}}</div>
  15.        </div>
  16.    </body>
  17.    <script src="js/angular.min.js"></script>
  18.    <script src="js/myCtrol.js"></script>
  19.    </html>
  21.    angular.module("app",[])
  22.    .controller('MyCtrol',function ($scope) {
  23.        $scope.msg = "";
  24.        $scope.user = {uname:'',pwd:''};
  25.        $scope.errormsg = "";
  26.        $scope.reverse = function () {
  27.            return $scope.msg.split(" ").reverse().join("");
  28.        }
  29.        $scope.login = function () {
  30.            if($scope.user.uname == "admin" && $scope.user.pwd == "123"){
  31.                alert("登录成功！");
  32.            }else{
  33.                $scope.errormsg = "用户名或密码错误";
  34.            }
  35.        }
  36.    })

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 Level 用 dlopen 使用 第三方的 Shared Library (.so)

    http://falldog7.blogspot.com/2013/10/android-c-level-dlopen-shared-library-so.html 在 Android 裡,撰寫 JN ...

  2. JavaScript去除空格trim()的原生实现

    W3C那帮人的脑袋被驴踢了,直到javascript1.8.1才支持trim函数(与trimLeft,trimRight),可惜现在只有firefox3.5支持.由于去除字符串两边的空白实在太常用,各 ...

  3. AIDL 简单实现

    实现步骤1.建立一个aidl文件,在里面定义好接口,注意里面不能写public修饰符,同接口一样,包名要一致. package com.systemset.aidl; interface ILight ...

  4. HDU 4303 树形DP

    Hourai Jeweled Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 163840/163840 K (Java/Others) ...

  5. Nginx的启动、停止、平滑重启

    转载自:http://www.xj123.info/2572.html 启动Nginx /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/ngi ...

  6. swiper 、css3制作移动端网站，折叠导航

    swiper .css3制作移动端网站,折叠导航 前几天公司要更新改版移动端的官网,由于网站本身没有多少内容,所以设计师就做成了整屏滑动的样子,起初我并没有看设计稿就一口答应了,拿到手后发现了几个问题 ...

  7. 【Android】Android之Copy and Paste

    Android为复制粘贴提供了一个强大的基于剪切板的框架,它支持简单和复杂的数据类型,包括纯文本,复杂的数据结构,二进制流,甚至app资源文件.简单的文本数据直接存储在剪切板中,而复杂的数据则存储的是 ...

  8. Hadoop window win10 基础环境搭建(2.8.1)

    下面运行步骤除了配置文件有部分改动,其他都是参照hadoop下载解压的share/doc/index.html. hadoop下载:http://apache.opencas.org/hadoop/c ...

  9. iOS 点击cell上的按钮获取行数

    -(void)btnClick:(UIButton *)button{ UITableViewCell *cell = (UITableViewCell *)[[button superview] s ...

  10. [BZOJ1087][SCOI2005]互不侵犯King解题报告|状压DP

    在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8个格子. 好像若干月前非常Naive地去写过DFS... ...