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 相关文章推荐
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 Javascript
Bootstrap登陆注册页面开发教程
Jul 12 Javascript
浅析JavaScriptSerializer类的序列化与反序列化
Nov 22 Javascript
快速入门Vue
Dec 19 Javascript
Bootstrap缩略图的创建方法
Mar 22 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
解决vue v-for 遍历循环时key值报错的问题
Sep 06 Javascript
Vuex的实战使用详解
Oct 31 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 COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
PHP生成不重复标识符的方法
2014/11/21 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
屏蔽F1~F12的快捷键的js函数
2010/05/06 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
jQuery实现点击查看大图并以弹框的形式居中
2016/08/08 Javascript
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
浅析Angular2子模块以及异步加载
2017/04/24 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
Vue组件化开发思考
2018/02/02 Javascript
jQuery实现模糊搜索功能的方法分析
2018/06/29 jQuery
node.js中对Event Loop事件循环的理解与应用实例分析
2020/02/14 Javascript
JS实现放烟花效果
2020/03/10 Javascript
JavaScript DOM常用操作代码汇总
2020/07/03 Javascript
jQuery实现简单轮播图效果
2020/12/27 jQuery
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
使用python获取CPU和内存信息的思路与实现(linux系统)
2014/01/03 Python
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
Pandas 合并多个Dataframe(merge,concat)的方法
2018/06/08 Python
python找出一个列表中相同元素的多个索引实例
2019/06/11 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
优秀信贷员先进事迹
2014/01/31 职场文书
学生社团文化节开幕式主持词
2014/03/28 职场文书
一份恶作剧的检讨书
2014/09/13 职场文书
2015年世界无烟日演讲稿
2015/03/18 职场文书
行政申诉状范文
2015/05/20 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书
青年干部培训班学习心得体会
2016/01/06 职场文书
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python