代码

#未引入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. 牛客小白月赛12-C（欧拉筛解积性方程）

    题目链接:https://ac.nowcoder.com/acm/contest/392/C 题意:给定n,求: 思路:令res[i]=iN  (%MOD),因为xn是一个积性函数,即(x*y)n=x ...

  2. Luogu P3511 [POI2010]MOS-Bridges

    题目 二分答案然后混合图欧拉回路,因为没有SPJ所以就没写了,怕写了有锅.

  3. 从入门到自闭之Python序列化

    序列化(背) json :将数据类型转换成字符串(序列化),将字符串装换成原数据类型(反序列),支持dict,list,tuple等,序列后都变成了列表 dumps,loads ------ 用于网络 ...

  4. 用纯 CSS 创作一个在容器中反弹的小球

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/jKVbyE 可交互视频教 ...

  5. U盘重装系统

    一.准备工作 (1)8G以上空间的U盘一个: (2)将U盘制作好启动工具: 1.下载启动工具制作软件(常用的有:大白菜.电脑店.老毛桃.快启动等等一系列软件,直接百度这些软件的名称,或者百度U盘启动制 ...

  6. 梳理common-io工具包

    title: 梳理common-io工具包 comments: false date: 2019-08-28 14:21:58 description: 对common-io工具包中的常用类进行整理, ...

  7. 第一篇 HTML 认识HTML

    认识HTML 学习一门语言,我们要先了解它,可以不用太资深,但要做到别人问,你能回答得出来! 注:推荐大家去网址:www.w3school.com.cn 前端学习手册(免费的) HTML(超文本标记语 ...

  8. NLP采用Bert进行简单文本情感分类

    参照当Bert遇上Kerashttps://spaces.ac.cn/archives/6736此示例准确率达到95.5%+ https://github.com/CyberZHG/keras-ber ...

  9. vs2017的主题颜色的配置

    相信很多小伙伴开发的时候很怀念sublime的主题,我也特别的喜欢其中的mono主题,所以闲来无事在vs上调了一下色感觉好看多了.(其实也可以下载主题然后用“导入导出设置但是颜色有点奇葩,还是越简单越 ...

  10. 表单的 submit 和 onsubmit 的用法 与区别

    submit与onsubmit 发生顺序:onsubmit -> submit 1.阻止表单提单: <script>function submitFun(){    //逻辑判断   ...