手动初始化Angular的模块与控制器
更新时间：2016年12月26日 16:03:18 作者：小谢53
本文主要介绍了手动初始化Angular的模块与控制器的方法，具有一定的参考价值，下面跟着小编一起来看下吧
在上面的文章中，都是在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局部，否侧会报错！
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于angular实现页面打印局部功能的思考与方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-04-04
这篇文章主要介绍了AngularJS中filter的使用实例详解的相关资料,这里提供实例帮助大家理解掌握，希望能帮助到大家，需要的朋友可以参考下2017-08-08
Angular 2+ 支持使用 [innerHTML] 属性绑定来渲染 HTML,如果你使用插值,它会被视为字符串,本文将介绍如何使用 [innerHTML] 以及一些注意事项,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了Angular4的输入属性与输出属性,结合实例形式详细分析了Angular4输入属性与输出属性的概念、功能及相关使用技巧,需要的朋友可以参考下2017-11-11
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
基于流的前端自动化构建工具，利用gulp可以提高前端开发效率，特别是在前后端分离的项目中。下面这篇文章主要给大家介绍了关于在Angular.js项目中使用gulp实现自动化构建以及压缩打包的相关资料，需要的朋友可以参考下。2017-07-07
本篇文章主要介绍了动手写一个angular版本的Message组件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
Angular作为目前最为流行的前端框架，受到了前端开发者的普遍欢迎。不论是初学Angular的新手，还是有一定Angular开发经验的开发者，了解本文中的12个经典面试问题，都将会是一个深入了解和学习Angular2的知识概念的绝佳途径。2021-05-05
本文给大家推荐的是使用angularjs实现整合微信新推出的UI（weui）的全部过程，有相同需求的小伙伴可以参考下2016-03-03
图片轮播在我们日常开发中是再熟悉不过的了，下面这篇文章主要给大家介绍了Ionic + Angular实现图片轮播的方法，文中给出了详细的示例代码供大家参考学习，需要的朋友们下面来一起看看吧。2017-05-05
这篇文章主要介绍了深入理解Angular4订阅(Subscribe)与取消，详细的介绍了订阅与取消的使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
最新评论