angular使用bootstrap方法手动启动的实例代码


Posted in Javascript onJuly 18, 2017

要启动一个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>

初始状态:

angular使用bootstrap方法手动启动的实例代码

点击按钮之后:

angular使用bootstrap方法手动启动的实例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
Javascript 浮点运算精度问题分析与解决
Mar 26 Javascript
JavaScript 学习笔记之操作符
Jan 14 Javascript
简介EasyUI datagrid editor combogrid搜索框的实现
Apr 01 Javascript
JS匿名函数实例分析
Nov 26 Javascript
angular双向绑定模拟探索
Dec 26 Javascript
Bootstrap警告(Alerts)的实现方法
Mar 22 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
jQuery选择器_动力节点Java学院整理
Jul 05 jQuery
VUE实现表单元素双向绑定(总结)
Aug 08 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
vue.js使用3DES加密的方法示例
May 18 Javascript
详解jQuery中关于Ajax的几个常用的函数
Jul 17 #jQuery
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 #Javascript
node.js中grunt和gulp的区别详解
Jul 17 #Javascript
js实现多张图片延迟加载效果
Jul 17 #Javascript
js指定步长实现单方向匀速运动
Jul 17 #Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 #Javascript
javascript 跨域问题以及解决办法
Jul 17 #Javascript
You might like
我整理的PHP 7.0主要新特性
2016/01/07 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
PHP小程序支付功能完整版【基于thinkPHP】
2019/03/26 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
php实现JWT(json web token)鉴权实例详解
2019/11/05 PHP
jQuery 1.3 和 Validation 验证插件1.5.1
2009/07/09 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
创建js对象和js类的方法汇总
2014/12/24 Javascript
javascript实现类似于新浪微博搜索框弹出效果的方法
2015/07/27 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
Javascript 获取鼠标当前的位置实现方法
2016/10/27 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
webpack4之SplitChunksPlugin使用指南
2018/06/12 Javascript
js array数组对象操作方法汇总
2019/03/18 Javascript
JS数据类型(基本数据类型、引用数据类型)及堆和栈的区别分析
2020/03/04 Javascript
Python文件处理
2016/02/29 Python
详解Python中最难理解的点-装饰器
2017/04/03 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
python 与服务器的共享文件夹交互方法
2018/12/27 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
Python中的延迟绑定原理详解
2019/10/11 Python
Django中密码的加密、验密、解密操作
2019/12/19 Python
Python调用.NET库的方法步骤
2019/12/27 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
护士的自我鉴定
2014/02/07 职场文书
超市国庆节促销方案
2014/02/20 职场文书
师德自我剖析材料范文
2014/10/06 职场文书
义卖募捐活动总结
2015/05/09 职场文书
2016入党积极分子党课学习心得体会
2015/10/09 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书