前端的MVC

最新推荐文章于 2023-11-30 15:05:43 发布

fishermanmax

最新推荐文章于 2023-11-30 15:05:43 发布

阅读量276

点赞数

分类专栏： AngularJs

本文链接：https://blog.csdn.net/fishermanmax/article/details/52081460

版权

AngularJs 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

为实现模块化和复用！

最简单的控制器：

view:

<!doctype html>
<html ng-app>
<head>
	<meta charset="utf-8">
	<title>ag_test</title>
</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>
	</div>
	<button ng-click="commonFn()">通用</button>
	</div>
</body>
<script src="js/angular.min.js"></script>
<script src="js/mvc.js"></script>
</html>

Controller：

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");
    }
}

主意：

不要复用Controller

不要使用DOM

不要在Controller做数据格式化，要使用ng表单控件

不要使用数据过滤，有$filter服务

Model方面：

最简单的model：

<input ng-model="greeting.text">
<p>{{ greeting.text }},Angular</p>

复用视图：

var myModule = angular.module("MyModule",[]);
myModule.directive("hello",function(){
    return {
        restrict:'E',
        template:'<div>Hello World!</div>',
        replace:true
    }
});

直接使用： <hello></hello> 可得到“Hello World”

作用域问题：

js：

function Ctrl($scope,$rootScope){
    $scope.name           = 'Hello';
    $rootScope.department = 'Angular';
}

function List($scope){
    $scope.name = ['xjh','czg','zaq','hsj'];
}

view:

<div ng-controller="Ctrl">
        	{{name}},world!
        </div>
        <div ng-controller="List">
        	<ul>
        		<li ng-repeat="infos in name">
        			{{infos}} from {{department}}
        		</li>
        	</ul>
        </div>

关于$scope:$watch()/$apply()

是POJO

是表达式(作用域)

是树形结构，与DOM标签平行

可以继承父作用域属性和方法

每个Angular应用只有一个根$scope对象(在ng-app上)

可以传播事件，向上或向下

是MVC基础，也是双向数据绑定的基础

调试：angular.element($0).scope()

scope生命周期：Creation-Watcher registration-Model mutation-Mutation observation-Scopedestruction

$watch()/$apply()

fishermanmax

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端的MVC

为实现模块化和复用！最简单的控制器：view: ag_test {{ greeting.text }},Angular test1 {{ greeting.text }},Angular test2 通用 Controller：function CommonController($scope){ $s
复制链接

扫一扫