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 相关文章推荐
js实时监听文本框状态的方法
Apr 26 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
基于JQuery制作可编辑的表格特效
Dec 23 Javascript
JavaScript中的Math.E属性使用详解
Jun 12 Javascript
jQuery实现向下滑出的二级菜单效果实例
Aug 22 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
你不知道的 javascript【推荐】
Jan 08 Javascript
jQuery插件之validation插件
Mar 29 jQuery
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
一百多行代码实现react拖拽hooks
Mar 23 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和ACCESS写聊天室(八)
2006/10/09 PHP
php实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
php使用标签替换的方式生成静态页面
2015/05/21 PHP
在PHP中使用FastCGI解析漏洞及修复方案
2015/11/10 PHP
使用JQuery和s3captche实现一个水果名字的验证
2009/08/14 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
JS字符串函数扩展代码
2011/09/13 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
2013/11/12 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
Express的路由详解
2015/12/10 Javascript
javascript中不易分清的slice,splice和split三个函数
2016/03/29 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
JS实现复制功能
2017/03/01 Javascript
Bootstrap模态框案例解析
2017/03/05 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
python使用urllib模块和pyquery实现阿里巴巴排名查询
2014/01/16 Python
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
python操作CouchDB的方法
2014/10/08 Python
部署Python的框架下的web app的详细教程
2015/04/30 Python
Python简单网络编程示例【客户端与服务端】
2017/05/26 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
国外的一些J2EE面试题一
2012/10/13 面试题
在校生党员自我评价
2013/09/25 职场文书
大学军训自我鉴定
2013/12/15 职场文书
汉语言文学毕业求职信
2014/07/17 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
员工工作能力评语
2014/12/31 职场文书