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的更多相关文章

  1. [angularjs] MVC + Web API + AngularJs 搭建简单的 CURD 框架

    MVC + Web API + AngularJs 搭建简单的 CURD 框架 GitHub 地址:https://github.com/liqingwen2015/Wen.MvcSinglePage ...

  2. angularjs MVC、模块化、依赖注入详解

    一.MVC <!doctype html> <html ng-app> <head> <meta charset="utf-8"> ...

  3. 框架开发之——AngularJS+MVC+Routing开发步骤总结——5.14

    1.延续MVC的观念:包括路由映射的编写,Controller的内容,具体View页面js的分离. 2.结合AngularJS做前端,后端使用Node.Js的写法,引入MVC框架,进行快速的开发. 步 ...

  4. AngularJs MVC 详解

    为什么在前端也需要MVC 1.代码规模越来越大,切分职责是大势所趋 2.为了复用 3.为了后期维护方便 MVC的目的是为了模块化和复用 前端实现MVC的困难 1.操作DOM必须等整个页面加载完 2.多 ...

  5. angularJS MVC及$scope作用域

  6. 如何在 ASP.NET MVC 中集成 AngularJS（2）

    在如何在 ASP.NET MVC 中集成 AngularJS(1)中,我们介绍了 ASP.NET MVC 捆绑和压缩.应用程序版本自动刷新和工程构建等内容. 下面介绍如何在 ASP.NET MVC 中 ...

  7. MVC+angularjs

    angularjs可以解决开发人员不擅长HTML的问题,采用模块化配置,但是不支持样式的微调和修改 angularjs+MVC开发的协同办公平台,贴下图 编辑页面+附件 列表页 一个页面涉及另一个子表 ...

  8. angularjs笔记(一)

    简介 AngularJS API angularjs是javascript框架,通过指令(指令就是自定义的html标签属性)扩展了HTML,并且可以通过表达式(表达式使用)绑定数据到HTML. 1.a ...

  9. HTML5手机APP开发入(3)

    HTML5手机APP开发入(3) 课程内容: 按照AngularJs MVC框架进行代码重构,新建一个DataService服务类使用SQLite插件实现储存对通讯录的本地存储. 涉及的知识点: An ...

随机推荐

  1. 自然语言7_NLTK中文语料库sinica_treebank

    http://www.hankcs.com/program/python/nltk-chinese-corpus-sinica_treebank.html NLTK包含Sinica (中央研究院)提供 ...

  2. DOCKER windows安装

    DOCKER windows安装 1.下载程序包 2. 设置环境变量 3. 启动DOCKERT 4. 分析start.sh 5. 利用SSH工具管理 6. 下载镜像 6.1 下载地址 6.2 用FTP ...

  3. IIS发布WCF遇到的问题总结

    1.安装.NET Framework和VS以后才装的,ASP.NET也没装上,所以一般情况下,只需要运行那个众所周知的“aspnet_regiis -i”命令就行了.但是Windows 8上这个命令是 ...

  4. ecshop 后台【左侧新增菜单】

    模板文件admin/template/menu.htm admin/includes/inc_menu.php 菜单排序(链接) langagues/zh_cn/admin/common.php  语 ...

  5. pc端，自适应屏幕分辨率

    前端开发框架Bootstrap  网址:http://www.dnzs.com.cn/w3cschool/bootstrap/bootstrap-tutorial.html 需要加入代码 <sc ...

  6. 常用JS效果 不断进步贴 不停更新~ 纪念用~

    常用效果 JS  都是Jquery  没有特殊说明 1.选项卡  用的JQuery  以后学好点再来对比 看下 /* * @parent 最外层父级元素 * @EventElement 触发事件元素 ...

  7. Python之路【第十六篇续】Django进阶篇

    Django请求生命周期 首先:对于所有的web框架来说本质就是一个socket服务端,浏览器是socket客户端 路由系统 在Django的urls中我们可以根据一个URL对应一个函数名来定义路由规 ...

  8. Nginx负载均衡配置实例详解（转）

    负载均衡是我们大流量网站要做的一个东西,下面我来给大家介绍在Nginx服务器上进行负载均衡配置方法,希望对有需要的同学有所帮助哦. 负载均衡 先来简单了解一下什么是负载均衡,单从字面上的意思来理解就可 ...

  9. 分布式缓存之 memcache 实现分布式缓存

    最近想搞点分布式,但是不知道整点什么,来点简单的吧. 今天讲下memcache的分布式缓存 首先下载memcache的服务器端 百度下可以找到 然后执行安装和开启(关闭服务器)命令(还有其他的命令 可 ...

  10. AjaxAnywhere+struts用法

    AjaxAnywhere的用法 1,简介 AjaxAnywhere被设计成能够把任何一套现存的JSP组件转换成AJAX感知组件而不需要复杂的JavaScript编码.它利用标签把Web页面简单地划分成 ...