AngularJS-MVC
前言:
编程是一个很苦恼的工作,因为需要我们不断的去学习,不断的去专研,我本身就不是一个很喜欢学习的孩子,要不然从小到大也没有成绩好过,但是,我从来没有缺少过勤奋,还是让我们言归正传来说下 我们这段时间学的东西吧,看着别人能够运转自如,自己连基础的都不知道是不是特傻。
1,MVC-V
<!doctype html>
<html ng-app="HelloAngular">
<head>
<meta charset="utf-8">
</head>
<body>
<div ng-controller="HelloAngularCtl">
<p>{{greeting.text}},world</p>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="HelloAngular_MVC.js"></script>
</html>
先看看这段代码,如果从来没有接触过angular的同学们,会觉得代码还可以这么写?
让我们看看在这段代码中我们遇到的新的写法有哪些?
1,ng-app="HelloAngular",这个是程序的入口(c#中的main()方法),表明<html></html>范围内所有标签归angular.js来管理,注意一个程序中只有一个 ng-app。
2,ng-controller="HelloAngularCtl",这个是本章讲的重点,也就是MVC中的C(controller),顾名思义就是控制器的意思,那么到底控制什么?根据我的理解,是控制下面的元素依据什么来显示,这里的什么等下后面会讲到。
3,{{greeting.text}},双括号是赋值属性。
2,MVC-C
好了,看完html代码,我们再看看js的吧,我们先引入 angularJS的库文件,否则上面的都不会生效。再引入我们自己的逻辑代码HelloAngular_MVC.js
// 定义一个模块
var HelloAngularModule = angular.module("HelloAngular",[]); // 模块中定一个控制器
HelloAngularModule.controller("HelloAngularCtl",function($scope){
$scope.greeting={
text:'Hello'
}
})
就像上面代码注释的一样,我们先用angular的语法,定义一个模块(注意:我们现在所有的代码都要模块化,不然MVC的就变得毫无用处,不然我们是用MVC也好还是MVVM也好,最终的目的是代码复用和模块化),然后呢,根据这个模块我们来定义一个 controller。
在此有些心细的同学看出来了,我们模块定的名称(HelloAngular)和Controller定义的名称(HelloAngularCtl)刚好是我们前面讲过的html代码中写的ng-app和ng-controller的名称一样的。没错,我们就是通过这个来指定angular的运行环境的。如果你写错了一个字母,可能整个程序就不能执行了。
3,MVC-M
我们再来讲一个比较重要的属性,那就是 控制器中 $scope,我们称之为作用域。这个$scope是很神奇的东西,可以说是整个angularjs的运行都是在这个上面的,是angularjs实现数据模型的方式,我们可以看到前面(html代码)中{{}}引用数据,就是$scope对象的属性。
好了,最后给展示下运行的效果:
4,疑问
我们如何在 控制器1调用控制2的属性或则方法?
AngularJS-MVC的更多相关文章
- 2.AngularJS MVC
AngularJs的MVC全部借助于$scope(作用域)实现 1.ng指令 <!doctype html> <html ng-app> <head> <me ...
- [angularjs] MVC + Web API + AngularJs 搭建简单的 CURD 框架
MVC + Web API + AngularJs 搭建简单的 CURD 框架 GitHub 地址:https://github.com/liqingwen2015/Wen.MvcSinglePage ...
- angularjs MVC、模块化、依赖注入详解
一.MVC <!doctype html> <html ng-app> <head> <meta charset="utf-8"> ...
- 框架开发之——AngularJS+MVC+Routing开发步骤总结——5.14
1.延续MVC的观念:包括路由映射的编写,Controller的内容,具体View页面js的分离. 2.结合AngularJS做前端,后端使用Node.Js的写法,引入MVC框架,进行快速的开发. 步 ...
- AngularJs MVC 详解
为什么在前端也需要MVC 1.代码规模越来越大,切分职责是大势所趋 2.为了复用 3.为了后期维护方便 MVC的目的是为了模块化和复用 前端实现MVC的困难 1.操作DOM必须等整个页面加载完 2.多 ...
- angularJS MVC及$scope作用域
- 如何在 ASP.NET MVC 中集成 AngularJS(2)
在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩.应用程序版本自动刷新和工程构建等内容. 下面介绍如何在 ASP.NET MVC 中 ...
- MVC+angularjs
angularjs可以解决开发人员不擅长HTML的问题,采用模块化配置,但是不支持样式的微调和修改 angularjs+MVC开发的协同办公平台,贴下图 编辑页面+附件 列表页 一个页面涉及另一个子表 ...
- angularjs笔记(一)
简介 AngularJS API angularjs是javascript框架,通过指令(指令就是自定义的html标签属性)扩展了HTML,并且可以通过表达式(表达式使用)绑定数据到HTML. 1.a ...
- HTML5手机APP开发入(3)
HTML5手机APP开发入(3) 课程内容: 按照AngularJs MVC框架进行代码重构,新建一个DataService服务类使用SQLite插件实现储存对通讯录的本地存储. 涉及的知识点: An ...
随机推荐
- c#发送http请求
直接代码,自己备用 /** * @method:生成验证码 */ [JSONMethod] [Description ( "生成验证码" )] [DomTemplate ( )] ...
- 利用模板在RM里部署VM
Refer to: https://www.azure.cn/documentation/articles/virtual-machines-windows-ps-template/ 过程中遇到的几个 ...
- three Sum
Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find all un ...
- 《互联网+:从IT到DT》:阿里公关稿,数据与案例不够全面客观,电商部分有一些生动的例子,三星
本书是阿里研究院的集体创作,当然要从阿里的视角写,因此其他的互联网巨头的信息很少涉及,对阿里不利的案例很少涉及. 关于“互联网+”,关于“互联网+”跟互联网的区别,书的开头有一点介绍.我感觉总体来说直 ...
- [转]Jquery easyui开启行编辑模式增删改操作
本文转自:http://www.cnblogs.com/nyzhai/archive/2013/05/14/3077152.html Jquery easyui开启行编辑模式增删改操作先上图 Html ...
- 匈牙利算法 codevs 2776 寻找代表元
codevs 2776 寻找代表元 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 黄金 Gold 题目描述 Description 广州二中苏元实验学校一共有n个社团,分别用 ...
- 2014 Super Training #8 A Gears --并查集
题意: 有N个齿轮,三种操作1.操作L x y:把齿轮x,y链接,若x,y已经属于某个齿轮组中,则这两组也会合并.2.操作Q x y:询问x,y旋转方向是否相同(等价于齿轮x,y的相对距离的奇偶性). ...
- java 15 -7 ListIterator 的特有方法
列表迭代器: ListIterator listIterator():List集合特有的迭代器 该迭代器继承了Iterator迭代器,所以,就可以直接使用hasNext()和next()方法. 特有 ...
- java 15 - 6 List的方法
List集合的特有功能: A:添加功能 void add(int index,Object element):在指定索引处添加元素 B:获取功能 Object get(int index):获取指定索 ...
- 024医疗项目-模块二:药品目录的导入导出-HSSF导入类的学习
我们之前学习了怎么把数据的数据导出来保存到Excle中,这篇文章我们学习怎么Excel数据导出然后插入到数据库中. 我们先学习HSSF怎么用来导出数据. 看官方教程步骤如下: 第一步: 创建一个wor ...