2.AngularJS MVC
AngularJs的MVC全部借助于$scope(作用域)实现
1.ng指令
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
</head>
<body>
<div ng-controller="CommonController">
<div ng-controller="Controller1">
<p>{{greeting.text}},Angular</p>
<button ng-click="test1()">test1</button>
</div>
<div ng-controller="Controller2">
<p>{{greeting.text}},Angular</p>
<button ng-click="test2()">test2</button>
<button ng-click="commonFn()">通用</button>
</div>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="MVC3.js"></script>
</html>
通过$scope获取对象
function CommonController($scope){
$scope.commonFn=function(){
alert("这里是通用功能!");
};
} function Controller1($scope) {
$scope.greeting = {
text: 'Hello1'
};
$scope.test1=function(){
alert("test1");
};
} function Controller2($scope) {
$scope.greeting = {
text: 'Hello2'
};
$scope.test2=function(){
alert("test2");
}
}
2.实现Model
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
</head>
<body>
<div>
<input ng-model="greeting.text"/>
<p>{{greeting.text}},Angular</p>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
</html>
1.ng-app规定了作用域为AngularJs解析 ng-model可以形成greeting.text模型对象
3.实现view
<!doctype html>
<html ng-app="MyModule">
<head>
<meta charset="utf-8">
</head>
<body>
<hello></hello>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="HelloAngular_Directive.js"></script>
</html>
通过Directive实现View的复用 <hello></hello>
var myModule = angular.module("MyModule", []);
myModule.directive("hello", function() {
return {
restrict: 'E',
template: '<div>Hi everyone!</div>',
replace: true
}
});
$scope
- $scope是一个POJP(Plain Old JavaScript Object)
- $scope提供了一些工具方法$watch $apply
- $scope是表达式的执行环境(作用域)
- $scope是一个树型结构,与DOM标签平行
- 子$scope对象会继承父$scope上的属性和方法
- 每一个Angular应用只有一个根$scope对象(一般位于ng-app上)
- $scope可以传播事件,类似DOM事件,可以向上也可以向下
- $scope不仅是MVC的基础,也是后面实现双向数据绑定的基础
- 可以通过angular.element($0).scope()
- 调试插件:Inspect Angular Scope(chrome)
- 生命周期:Creation-Watcher registration-Model mutation-Mutation observation-Scope destruction
2.AngularJS MVC的更多相关文章
- [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 ...
随机推荐
- javaWeb加载Properties文件
public static Properties loadProps(String fileName) { Properties props = null; InputStream is = null ...
- Codeforces 719B Anatoly and Cockroaches(元素的交叉排列问题)
题目链接:http://codeforces.com/problemset/problem/719/B 题目大意: 有一队蟑螂用字符串表示,有黑色 ‘b’ 和红色 'r' 两种颜色,你想使这队蟑螂颜色 ...
- Unity3D SceneView Camera
http://forum.unity3d.com/threads/moving-scene-view-camera-from-editor-script.64920/
- Code First 关系 Fluent API
通过实体框架 Code First,可以使用您自己的域类表示 EF 执行查询.更改跟踪和更新函数所依赖的模型.Code First 利用称为“约定先于配置”的编程模式.这意味着 Code First ...
- Mount挂载命令使用方法
语法: mount -t 类型 -o 挂接方式 源路径 目标路径 -t 详细选项: 光盘或光盘镜像:iso9660 DOS fat16文件系统:msdos Windows 9x fat32文件 ...
- 弹出框二 之 bootbox.js
1.可以通过Nuget下载 2.引入 jquery bootstrap bootbox.js 3.使用 $(function () { //bootbox.alert("确认删除" ...
- C#多线程学习(一) 多线程的相关概念(转)
什么是进程?当一个程序开始运行时,它就是一个进程,进程包括运行中的程序和程序所使用到的内存和系统资源.而一个进程又是由多个线程所组成的. 什么是线程?线程是程序中的一个执行流,每个线程都有自己的专有寄 ...
- PHP 5.5 新特性
文章转自:http://wulijun.github.io/2013/07/17/whats-new-in-php-5-5.html http://www.cnblogs.com/yjf512/p/3 ...
- 正确使用Python logging
这篇文章主要参考: http://victorlin.me/posts/2012/08/26/good-logging-practice-in-python ===================== ...
- linq学习
最全的linq学习文章: http://www.cnblogs.com/heyuquan/p/Linq-to-Objects.html