AngularJS 前端 MVC 的设计与搭建
代码
#未引入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 的设计与搭建的更多相关文章
- indexedDB bootstrap angularjs 前端 MVC Demo
前端之MVC应用 1.indexedDB(Model): 数据层,前端浏览器 HTML5 API 面向对象数据库,一般现在用的数据库都是关系型数据库. 那么indexeddb有什么特点呢: 首先,从字 ...
- Web前端MVC框架的意义分析
前言: Web前端开发是Web技术发展中的一个重要组成部分,在传统的前端开发中由于外界因素的影响导致其开发形式呈现出简单化的特点,即以页面为主体来展示界面中的信息.然而随着科学技术的不断进步,Web前 ...
- 【blade的UI设计】理解前端MVC与分层思想
前言 最近校招要来了,很多大三的同学一定按捺不住心中的焦躁,其中有期待也有彷徨,或许更多的是些许担忧,最近在开始疯狂的复习了吧 这里小钗有几点建议给各位: ① 不要看得太重,关心则乱,太紧张反而表现不 ...
- 前端MVC学习总结——AngularJS验证、过滤器
前端MVC学习总结--AngularJS验证.过滤器 目录 一.验证 二.过滤器 2.1.内置过滤器 2.1.1.在模板中使用过滤器 2.1.2.在脚本中调用过滤函数 2.2.自定义过滤器 三.指令( ...
- Angularjs,WebAPI 搭建一个简易权限管理系统 —— Angularjs 前端主体结构(五)
目录 前言 Angularjs名词与概念 Angularjs 基本功能演示 系统业务与实现 WebAPI项目主体结构 Angularjs 前端主体结构 6 Angularjs 前端主体结构 6.1 A ...
- Github+yeoman+gulp-angular初始化搭建angularjs前端项目框架
在上篇文章里面我们说到了Github账号的申请与配置 那么当你有了Github账号并创建了一个自己的Github项目之后,首要的当然是搭建自己的项目框架啦! 本人对自己的定位是web前端狗,常用开发框 ...
- 前端MVC学习总结（一）——MVC概要与angular概要、模板与数据绑定
一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...
- 前端MVC学习笔记（一）——MVC概要与angular概要、模板与数据绑定
一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...
- 前端MVC Vue2学习总结（一）——MVC与vue2概要、模板、数据绑定与综合示例
一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.Vue是框架而jQuery则是库. 1.2.AMD与CM ...
随机推荐
- 2019icpc南昌邀请赛B Polynomial （拉格朗日插值法）
题目链接:https://nanti.jisuanke.com/t/40254 题意: 思路: 这题要用到拉格朗日插值法,网上查了一下,找到一份讲得特别好的: -------------------- ...
- sts使用mybatis插件直接生成数据库表的mapper类及配置文件
首先点击help------>Eclipse Marketplace----->在find中搜索mybatis下面图片的第一个 点击installed 还需要一个配置文件generator ...
- vue-router和webpack懒加载，页面性能优化篇
在vue单页应用中,当项目不断完善丰富时,即使使用webpack打包,文件依然是非常大的,影响页面的加载.如果我们能把不同路由对应的组件分割成不同的代码块,当路由被访问时才加载对应的组件(也就是按需加 ...
- Web前端开发中的小错误
Web前端开发中的小错误 错误1:表单的label标签跟表单字段没有关联 利用“for”属性允许用户单击label也可以选中表单中的内容.这可以扩大复选框和单选框的点击区域,非常实用. 错误2:log ...
- golang（2）：基本数据类型和操作符
1). 文件名 & 关键字 & 标识符 . 所有go源码都以 .go 结尾 . 标识符以字母或下划线开头,大小写敏感 . _ 是特殊标识符,用来忽略结果 . 保留关键字 golang ...
- MySQL存储引擎MyISAM和InnoDB有哪些区别？
一.MyISAM和InnoDB的区别有哪些? 1.InnoDB支持事务,MyISAM不支持.对于InnoDB每一条SQL语言都默认封装成事务,自动提交,这样会影响速度,所以最好把多条SQL语言放在be ...
- U盘重装系统
一.准备工作 (1)8G以上空间的U盘一个: (2)将U盘制作好启动工具: 1.下载启动工具制作软件(常用的有:大白菜.电脑店.老毛桃.快启动等等一系列软件,直接百度这些软件的名称,或者百度U盘启动制 ...
- 使用HBuilder创建图表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- lambda表达式推导和使用
lambda λ希腊字母表中排序第十一位的字母,英语名称为 Lambda, 避免匿名内部类定义过多 其实质属于函数式编程的概念 (params) -> expression (params) - ...
- python-装饰（高阶函数）
python-装饰(高阶函数) 高阶函数 1.把一个函数名当做实参传给另外一个函数(在不修改被装饰函数源代码) 2.返回值 中包含函数名 高阶函数实现1的功能 def bar(): print(&qu ...