美文网首页
Angularjs MVC 以及 $scope 作用域 Angu

Angularjs MVC 以及 $scope 作用域 Angu

作者: DY_108 | 来源:发表于2017-02-27 14:47 被阅读0次

1. Angularjs MVC



Model:数据模型层

View:视图层,负责展示

Controller:业务逻辑和控制逻辑

优点:代码模块化 代码逻辑比较清晰、可移值性高,后期维护方便、代码复用,

代码规模越来越大的时候,切分职责是大势所趋

缺点:运行效率稍微低一些

2.Angularjs $scope作用域

1.$scope多控制器单独作用域

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

无标题文档

无标题文档无标题文档

<script type="text/javascript" src="angular.min.js"></script>

</head>

<body>

<div ng-app="myApp">

<div ng-controller="firstController">{{name}}</div>

<div ng-controller="secondController">{{name}}</div>

</div>

<script type="text/javascript">

var app = angular.module("myApp", []);

app.controller('firstController',function($scope){$scope.name='张三'; });

app.controller('secondController',function($scope){ $scope.name='李四';});

</script>

</body>

</html>

无标题文档

2.$rootScope服务

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="../angular.min.js"/>

</head>

<body>

<div ng-app="myApp">

<div ng-controller="firstController">

姓名:{{name}} </br>
年龄:{{age}}

</div>

<div ng-controller="secondController">

姓名:{{name}}</br>

年龄:{{age}}

</div>

</div>

<script type="text/javascript">

var app = angular.module("myApp", []);

app.controller('firstController',function($scope,$rootScope){

$scope.name='张三';

$rootScope.age='30';

});

app.controller('secondController',function($scope){

$scope.name='李四';

})

</script>

</body>

</html>

3.Angularjs模块的run方法

run方法初始化全局的数据,只对全局作用域起作用 如$rootScope

<script type="text/javascript">

var test = angular.module('myApp',[]);

test.run(['$rootScope',function($rootScope){

$rootScope.name = 'hello world';

}]);

console.log(test);

</script>

相关文章

网友评论

      本文标题:Angularjs MVC 以及 $scope 作用域 Angu

      本文链接:https://www.haomeiwen.com/subject/wkyzwttx.html