AngularJS bootstrap启动详解及实例代码


Posted in Javascript onSeptember 14, 2016

对于一般的使用者来说,AngularJS的ng-app都是手动绑定到某个dom元素。但是在一些应用中,这样就显得很不方便了。

绑定初始化

通过绑定来进行angular的初始化,会把js代码侵入到html中,但是对于新手使用来说,还是足够了!

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body ng-app="myApp">
  <div ng-controller="myCtrl">
    {{ hello }}
  </div>
  <script type="text/javascript">
    var myModule = angular.module("myApp",[]);
    myModule.controller("myCtrl",function($scope){
      $scope.hello = "hello,angular!";
    });
  </script>
</body>
</html>

运行后,会显示hello,angular!

手动初始化

Angular中也提供了手动绑定的api——bootstrap,它的使用方式如下:

angular.bootstrap(element, [modules], [config]);

其中第一个参数element:是绑定ng-app的dom元素;

modules:绑定的模块名字
config:附加的配置

简单的看一下代码:

<html>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
<body id="body">
  <div ng-controller="myCtrl">
    {{ hello }}
  </div>
  <script type="text/javascript">
    var app = angular.module("bootstrapTest",[]);
    app.controller("myCtrl",function($scope){
      $scope.hello = "hello,angular from bootstrap";
    });
    
    // angular.bootstrap(document.getElementById("body"),['bootstrapTest']);
    angular.bootstrap(document,['bootstrapTest']);
  </script>
</body>
</html>

值得注意的是:

angular.bootstrap只会绑定第一次加载的对象。

后面重复的绑定或者其他对象的绑定,都会在控制台输出错误提示。

以上就是对AngularJS bootstrap 的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
JS打印gridview实现原理及代码
Feb 05 Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
Jan 16 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
写一个移动端惯性滑动&amp;回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 Javascript
vue实现前端列表多条件筛选
Oct 26 Javascript
AngularJS equal比较对象实例详解
Sep 14 #Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 #Javascript
AngularJS $injector 依赖注入详解
Sep 14 #Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 #Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 #Javascript
AngularJs ng-route路由详解及实例代码
Sep 14 #Javascript
js实现文字截断功能
Sep 14 #Javascript
You might like
PHP在字符断点处截断文字的实现代码
2011/04/21 PHP
php字符串函数学习之strstr()
2015/03/27 PHP
ThinkPHP静态缓存简单配置和使用方法详解
2016/03/23 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
JavaScript中“+=”的应用
2007/02/02 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
AngularJS实现动态编译添加到dom中的方法
2016/11/04 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
[01:07:47]Secret vs Optic Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
Python中使用插入排序算法的简单分析与代码示例
2016/05/04 Python
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
简述Python2与Python3的不同点
2018/01/21 Python
python spyder中读取txt为图片的方法
2018/04/27 Python
python hook监听事件详解
2018/10/25 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
django框架模板语言使用方法详解
2019/07/18 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
英国著名书店:Foyles
2018/12/01 全球购物
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
关爱留守儿童标语
2014/06/18 职场文书
文明好少年事迹材料
2014/08/19 职场文书
党员批评与自我批评思想汇报(集锦)
2014/09/14 职场文书
工商局局长个人对照检查材料思想汇报
2014/09/23 职场文书
店铺转让协议书
2014/12/02 职场文书
销售2014年度工作总结
2014/12/08 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
安阳殷墟导游词
2015/02/10 职场文书
麦田里的守望者读书笔记
2015/06/30 职场文书
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
2021/11/27 Vue.js
Golang 并发下的问题定位及解决方案
2022/03/16 Golang
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android