码迷,mamicode.com
首页 > Web开发 > 详细

2.angular MVC

时间:2016-11-02 23:16:50      阅读:237      评论:0      收藏:0      [点我收藏+]

标签:表达式   element   gis   doctype   set   ati   分享   调试   poj   

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.angular MVC

标签:表达式   element   gis   doctype   set   ati   分享   调试   poj   

原文地址:http://www.cnblogs.com/weizaiyes/p/6024716.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!