Angularjs MVC 以及 $scope 作用域 Angularjs 模块 的 run 方法 以及依赖注入中代码压缩问题
2015-09-22 16:56
1116 查看
Angularjs MVC 以及 $scope 作用域 Angularjs 模块
的 run 方法 以及依赖注入中代码压缩问题
1. Angularjs MVC
Model:数据模型层
View:视图层,负责展示
Controller:业务逻辑和控制逻辑
优点: 代码模块化 代码逻辑比较清晰、可移值性高,后期维护方便、代码复用,
代码规模越来越大的时候,切分职责是大势所趋
缺点:运行效率稍微低一些
2. Angularjs $scope 作用域
1. $scope 多控制器单独作用域
run 方法初始化全局的数据 ,只对全局作用域起作用 如$rootScope
的 run 方法 以及依赖注入中代码压缩问题
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" /> <title> 无标题文档 </title> <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" /> <title> 无标题文档 </title> <script type="text/javascript" src="../angular.min.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="firstController"> 姓名: `name` <br> 年龄: `age` </div> <div ng-controller="secondController"> 姓名: `name` 年龄: `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. 控制器继承
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 无标题文档 </title> <script type="text/javascript" src="../angular.min.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="firstController"> `name` `age` `sex` <div ng-controller="secondController"> `name` `age` `sex` </div> </div> </div> <script type="text/javascript"> var app = angular.module("myApp", []); app.controller('firstController',function($scope){ $scope.name=' 张三 '; $scope.age='40'; }); app.controller('secondController',function($scope){ $scope.name=' 李四 '; $scope.sex=' 男 '; }) </script> </body> </html>3. 依赖注入中代码压缩的问题
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 无标题文档 </title> <script type="text/javascript" src="../angular.min.js"></script> </head> <body> <div ng-app="myApp"> <div ng-controller="firstController"> `name` `age` `sex` <div ng-controller="secondController"> `name` `age` `sex` </div> </div> </div> <script type="text/javascript"> var app = angular.module("myApp", []); app.controller('firstController',['$scope',function($scope){ $scope.name=' 张三 '; $scope.age='40'; }]); app.controller('secondController',['$scope',function($scope){ $scope.name=' 李四 '; $scope.sex=' 男 '; }]) </script> </body> </html>4. Angularjs 模块的 run 方法
run 方法初始化全局的数据 ,只对全局作用域起作用 如$rootScope
<script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.run(['$rootScope',function($rootScope){ $rootScope.name = 'hello'; }]); console.log( m1 ); </script>
相关文章推荐
- angularJS 中$attrs方法使用指南
- 简述AngularJS相关的一些编程思想
- AngularJS的一些基本样式初窥
- 创建你的第一个AngularJS应用的方法
- 详解AngularJS中的作用域
- 简介AngularJS的视图功能应用
- AngularJS语法详解
- angularjs中的e2e测试实例
- 简介AngularJS中使用factory和service的方法
- AngularJS + Node.js + MongoDB开发的基于高德地图位置的通讯录
- 举例讲解AngularJS中的模块
- 使用AngularJS处理单选框和复选框的简单方法
- AngularJS+Node.js实现在线聊天室
- AngularJS的内置过滤器详解
- 详解AngularJS中自定义指令的使用
- 使用Raygun来自动追踪AngularJS中的异常
- angularJS结合canvas画图例子
- 教你用AngularJS框架一行JS代码实现控件验证效果
- AngularJS入门教程(零):引导程序
- AngularJS基础学习笔记之简单介绍