代码

#未引入MVC框架之前的代码

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>AngualrJS进阶</title>

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

</head>

<body style="padding:10px;">

</body>

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

<script type="text/javascript">

</script>

</html>　
#引入MVC框架后的代码

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>AngualrJS进阶</title>

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

</head>

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

<!--既然这里使用了一个变量名app，绑定AngularJS管理边界，表示AngularJS的作用域，我们就需要在js中声明一个变量，这里采用模块定义方法，注意这里是Module模块，而不是Model模型，即这里的Module不是MVC中的M-->

<div ng-contrller="myCtrl">

<!--这里使用我们js中定义的控制器，这个控制器的管理边界就是该div-->

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

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

<!--将msg变量绑定到h1标签-->

</div>

</body>

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

<script type="text/javascript">

angular.module("app",[])

<!--app是我们定义的模块变量，不是模型，[]是引入AngularJS之前定义的其他模块-->

.controller("myCtrl",function($scope){

<!--这里利用controller定义一个控制器变量myCtrl，$scope是我们的应用程序所指向的html的元素，也就是模型Model-->

$scope.msg="angular";

});

<!--这个controller就是一个小型的MVC，controller就是C，$scope就是M，通过$scope.msg将Model双向绑定到View上，

即将$scope这个Module的msg绑定到h1这个View元素-->

</script>

<!--建议将AngularJS文件放入一个单独的JS文件，如下：<script src="js/myctrl.js"></script>，以后就可以在myctrl.js中编写控制代码-->

</html>

　　

AngularJS 前端 MVC 的设计与搭建的更多相关文章

  1. indexedDB bootstrap angularjs 前端 MVC Demo

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

  2. Web前端MVC框架的意义分析

    前言: Web前端开发是Web技术发展中的一个重要组成部分,在传统的前端开发中由于外界因素的影响导致其开发形式呈现出简单化的特点,即以页面为主体来展示界面中的信息.然而随着科学技术的不断进步,Web前 ...

  3. 【blade的UI设计】理解前端MVC与分层思想

    前言 最近校招要来了,很多大三的同学一定按捺不住心中的焦躁,其中有期待也有彷徨,或许更多的是些许担忧,最近在开始疯狂的复习了吧 这里小钗有几点建议给各位: ① 不要看得太重,关心则乱,太紧张反而表现不 ...

  4. 前端MVC学习总结——AngularJS验证、过滤器

    前端MVC学习总结--AngularJS验证.过滤器 目录 一.验证 二.过滤器 2.1.内置过滤器 2.1.1.在模板中使用过滤器 2.1.2.在脚本中调用过滤函数 2.2.自定义过滤器 三.指令( ...

  5. Angularjs,WebAPI 搭建一个简易权限管理系统 —— Angularjs 前端主体结构(五)

    目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 6 Angularjs 前端主体结构 6.1 A ...

  6. Github+yeoman+gulp-angular初始化搭建angularjs前端项目框架

    在上篇文章里面我们说到了Github账号的申请与配置 那么当你有了Github账号并创建了一个自己的Github项目之后,首要的当然是搭建自己的项目框架啦! 本人对自己的定位是web前端狗,常用开发框 ...

  7. 前端MVC学习总结（一）——MVC概要与angular概要、模板与数据绑定

    一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...

  8. 前端MVC学习笔记（一）——MVC概要与angular概要、模板与数据绑定

    一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...

  9. 前端MVC Vue2学习总结（一）——MVC与vue2概要、模板、数据绑定与综合示例

    一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.Vue是框架而jQuery则是库. 1.2.AMD与CM ...

随机推荐

  1. GS7 安装使用Oracle19c 客户端的说明

    1. 最近Oracle放出了 windows版本的oracle19c的安装文件(具体时间不详, 自己知道的时候比较晚了) 2. 发现文件其实比较多如图示: 3. 经过自己测试实现发现 不能使用  如下 ...

  2. [转帖]influxdb和boltDB简介——MVCC+B+树，Go写成，Bolt类似于LMDB，这个被认为是在现代kye/value存储中最好的，influxdb后端存储有LevelDB换成了BoltDB

    influxdb和boltDB简介——MVCC+B+树,Go写成,Bolt类似于LMDB,这个被认为是在现代kye/value存储中最好的,influxdb后端存储有LevelDB换成了BoltDB ...

  3. Charles学习（三）之使用Map local代理本地静态资源以及配置网页代理在Mac模拟器调试iOS客户端

    前言 问题一:我们在App内嵌H5开发的过程中,肯定会遇到一个问题就是我不想在chrome的控制台中调试,我想要在手机上调试,那么如何解决这个问题呢? 问题二:我们期待调试时达到的效果就是和Charl ...

  4. 2018最新版 手机号、验证码正则表达式 jq + 小程序

    HTML: <!-- 表单 --> <input class="weui-input" id="tel" type="tel&quo ...

  5. css--内凹圆角

    <div class="box"></div> :root { --r: 2em; } .box { overflow: hidden; position: ...

  6. 使用 java 创建你的第一个区块链（第二部分）

    本系列教程的目的是帮助您了解如何开发区块链技术. 在这第二个教程中,我们将: 创建一个简单的钱包: 使用我们的区块链发送已签名的交易: 感觉更酷. 以上这些将使我们拥有自己的加密货币! 从上一个教程开 ...

  7. 标准C语言(9)

    C语言里所有文字信息必须记录在一组连续的字符类型存储区里所有文字信息必须以字符'\0'做结尾,这个字符的ASCII码就是0符合以上两个特征的内容叫字符串,它们可以用来在程序里记录文字信息.字符串里'\ ...

  8. kotlin项目开发基础之gradle初识

    在Android Studio推出之后默认的打包编译工具就变为gradle了,我想对于一名Android程序员而言没人不对它知晓,但是对于它里面的一些概念可能并不是每个人都了解,只知道这样配置就ok了 ...

  9. java8学习之Collector同一性与结合性分析

    继续沿着上一次[http://www.cnblogs.com/webor2006/p/8311074.html]Collector接口的javadoc进行阅读,在继续阅读之前,其中有个比较难理解的地方 ...

  10. 认识配置文件schema.xml（managed-schema）

    1.schema文件是在SolrConfig中的架构工厂定义,有两种定义模式: 1.1.默认的托管模式: solr默认使用的就是托管模式.也就是当在solrconfig.xml文件中没有显式声明< ...