手动初始化Angular的模块与控制器  更新时间:2016年12月26日 16:03:18   作者:小谢53   本文主要介绍了手动初始化Angular的模块与控制器的方法,具有一定的参考价值,下面跟着小编一起来看下吧 在上面的文章中,都是在html元素上绑定ng-app=”myApp”,然後使用angular.module(‘myApp’,[]);来初始化模块的操作,下面我们来用angular.bootstrap方法手动初始化模块。 DEMO {{name}} {{name}} 除了手动初始化模块外,还能使用run方法初始化控制器(但是数据必须是全局的)。 DEMO 这里没有使用ng-controller命令 {{name}} 在run下不能使用$scope局部,否侧会报错! 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家! 您可能感兴趣的文章: AngularJS初始化过程分析(引导程序) AngularJS初始化静态模板详解 Angularjs在初始化未完毕时出现闪烁问题的解决方法分析 Angular.js基础学习之初始化 AngularJS使用ng-Cloak阻止初始化闪烁问题的方法 Angular.js初始化之ng-app的自动绑定与手动绑定详解 Angular如何在应用初始化时运行代码详解 Angular 模块 控制器 相关文章 AngularJS中ng-class用法实例分析 这篇文章主要介绍了AngularJS中ng-class用法,结合实例形式分析了ng-class的功能、使用方法与相关注意事项,需要的朋友可以参考下 2017-07-07 Angular2 (RC4) 路由与导航详解 这篇文章主要介绍了Angular2 (RC4) 路由与导航的相关资料,需要的朋友可以参考下 2016-09-09 Angular ng-class详解及实例代码 这篇文章主要介绍了Angular ng-class的知识,并整理了相关资料,有兴趣的小伙伴可以参考下 2016-09-09 Angularjs中如何使用filterFilter函数过滤 这篇文章主要介绍了Angularjs中如何使用filterFilter函数过滤的相关资料,需要的朋友可以参考下 2016-02-02 angular5 子组件监听父组件传入值的变化方法 今天小编就为大家分享一篇angular5 子组件监听父组件传入值的变化方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-09-09 angularjs指令中的compile与link函数详解 这篇文章主要介绍了angularjs指令中的compile与link函数详解,本文同时诉大家complie,pre-link,post-link的用法与区别等内容,需要的朋友可以参考下 2014-12-12 Angular环境搭建及简单体验小结 Angular基于TypeScript和react、vue相比 Angular更适合中大型企业级项目,本文通过实例代码给大家分享Angular环境搭建及简单体验,感兴趣的朋友跟随小编一起学习吧 2021-05-05 Angular.js中数组操作的方法教程 AngularJS是google在维护,其在国外已经十分火热,可是国内的使用情况却有不小的差距,参考文献/网络文章也很匮乏。下面这篇文章主要给大家介绍了关于Angular.js中数组操作的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。 2017-07-07 angularjs ui-router中路由的二级嵌套 本篇文章主要介绍了angularjs ui-router中路由的二级嵌套,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。 2017-03-03 浅谈angularjs $http提交数据探索 这篇文章主要介绍了浅谈angularjs $http提交数据探索,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。 2017-01-01 最新评论

在上面的文章中,都是在html元素上绑定ng-app=”myApp”,然後使用angular.module(‘myApp’,[]);来初始化模块的操作,下面我们来用angular.bootstrap方法手动初始化模块。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>DEMO</title>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
</head>
<body>
<div ng-controller='Aaa'>
 <p>{{name}}</p>
</div>
<div ng-controller='Bbb'>
 <p>{{name}}</p>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp1',[]);
var m2 = angular.module('myApp2',[]);
m1.controller('Aaa',function($scope){
 $scope.name = 'hello AngularJs';
});
m2.controller('Bbb',function($scope){
 $scope.name = 'Hi';
});
//点击的时候初始化模块
document.onclick = function(){
 var aDiv = document.getElementsByTagName('div');
 //多次初始化操作
 angular.bootstrap(aDiv[0],['myApp1']);
 angular.bootstrap(aDiv[1],['myApp2']);
};
</script>
</body>
</html>

除了手动初始化模块外,还能使用run方法初始化控制器(但是数据必须是全局的)。

<!DOCTYPE HTML>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>DEMO</title>
<script type="text/javascript" src="https://code.angularjs.org/1.3.8/angular.min.js"></script>
</head>
<body>
<div>
 <p>这里没有使用ng-controller命令</p>
 <p>{{name}}</p>
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
//不需要创建控制器引用也可以更改数据
//rootScope是全局作用域
m1.run(['$rootScope',function($rootScope){
 $rootScope.name = 'hello';
}]);
</script>
</body>
</html>

在run下不能使用$scope局部,否侧会报错!

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

您可能感兴趣的文章:

  • AngularJS初始化过程分析(引导程序)
  • AngularJS初始化静态模板详解
  • Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
  • Angular.js基础学习之初始化
  • AngularJS使用ng-Cloak阻止初始化闪烁问题的方法
  • Angular.js初始化之ng-app的自动绑定与手动绑定详解
  • Angular如何在应用初始化时运行代码详解
张贴在3