angular使用bootstrap方法手动启动的实例代码
更新时间：2017年07月18日 08:24:32 作者：shidaping
本篇文章主要介绍了angular使用bootstrap方法手动启动的实例代码，具有一定的参考价值，有兴趣的可以了解一下
要启动一个angular应用，可以使用ng-app指令，也可以调用bootstrap方法手动启动。先看一下angular的bootstrap方法。
angular.bootstrap(element, [modules], [config]);
element(必需)。要启动angular的根节点，一般为document，也可以是其他的的html的dom。
modules(数组，可选)。依赖的模块。
conifg(object,可选)。配置项，目前只有strictDi一个可配置项，默认为false,是否开启辅助debug。
看例子。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="//cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
</head>
<body>
<div ng-controller="ctrl1">
{{myString}}
</div>
<script>
var app = angular.module('app',[]);
app.controller('ctrl1',['$scope',function($scope){
$scope.myString='hello world';
}])
angular.bootstrap(document,['app'],{strictDi: true});
</script>
</body>
</html>
需要注意的是angular.bootstrap必须是在element参数所指向的dom树加载完毕后才能调用，所以通常我们会在$(document).ready()后执行。此处因为我们的script是放在body尾部，所以不存在问题。
实例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/angular.min.js"></script>
</head>
<body>
<div ng-app="myapp">
<div ng-controller="myctrl">
{{name}}
<button ng-click="start()">点击引导启动</button>
</div>
</div>
<div id="fir">
<div ng-controller="myctrl">
{{name}}
</div>
</div>
</body>
<script>
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope) {
$scope.name="tom";
$scope.start=function (){
var _f=document.getElementById("fir");
angular.bootstrap(_f,["myapp2"])
}
})
var app2=angular.module("myapp2",[]);
app2.controller("myctrl",function($scope) {
$scope.name="jquer";
})
</script>
</html>
初始状态：
点击按钮之后：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
本篇文章主要介绍了angular4实现tab栏切换的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
在Angular中,NgZone是一个服务,用于管理异步任务的执行,并提供一种在Angular区域内或外部显式运行代码的方式,NgZone.run方法是一种显式在Angular区域内运行函数的方式,本文介绍Angular中的NgZone.run()有什么用,感兴趣的朋友一起看看吧2024-01-01
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
这篇文章主要给大家介绍了关于Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。2018-03-03
Directive的概念在Angular 1.x就存在了，我对它的认识比较模糊，所以直接通过一些例子来说明。Angular提供的内置执行有很多，这次使用两个：ngFor、ngIf。2016-08-08
AngularJS+bootstrap实现动态选择商品功能示例
这篇文章主要介绍了AngularJS+bootstrap实现动态选择商品功能,涉及AngularJS指令、事件响应及页面元素动态操作相关技巧,需要的朋友可以参考下2017-05-05
使用AngularJS编写较为优美的JavaScript代码指南
这篇文章主要介绍了使用AngularJS编写较为优美的JavaScript代码指南,包括控制器和封装等进阶技巧上的编程建议,倾力推荐!需要的朋友可以参考下2015-06-06
本文主要介绍了angular十大常见问题，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
AngularJS中数据绑定相信大家应该都不陌生了,这篇文章主要给大家介绍了关于angular多选表单数据绑定的简单尝试,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
AngularJs bootstrap搭载前台框架——基础页面
本文主要介绍AngularJs bootstrap搭载前台框架基础页面的建设，这里整理饿了相关资料及实现实例代码，有兴趣的小伙伴可以参考下2016-09-09
这篇文章主要介绍了AngularJS 过滤与排序，这里整理了详细的资料及简单实例代码，有需要的小伙伴可以参考下2016-09-09
最新评论