首页 > 代码库 > 2.angular MVC

2.angular MVC

2024-08-18 14:09:43   219人阅读

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="http://www.mamicode.com/js/angular-1.3.0.js"></script>
    <script src="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/js/angular-1.3.0.js"></script>
	<script src="http://www.mamicode.com/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


联系
我们