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实现在小方框中浏览大图的代码
Aug 14 Javascript
table对象中的insertRow与deleteRow使用示例
Jan 26 Javascript
js输出阴历、阳历、年份、月份、周示例代码
Jan 29 Javascript
jquery scroll()区分横向纵向滚动条的方法
Apr 04 Javascript
jQuery插件pagination实现分页特效
Apr 12 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
javascript实现倒计时跳转页面
Jan 17 Javascript
js实现鼠标拖动功能
Mar 20 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
Vue分页插件的前后端配置与使用
Oct 09 Javascript
layui数据表格重载实现往后台传参
Nov 15 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
Apache设置虚拟WEB
2006/10/09 PHP
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
用jquery存取照片的具体实现方法
2013/06/30 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
JavaScript代码性能优化总结篇
2016/05/15 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
Vue 2中ref属性的使用方法及注意事项
2017/06/12 Javascript
详解AngularJS ng-class样式切换
2017/06/27 Javascript
js判断传入时间和当前时间大小实例(超简单)
2018/01/11 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
2020/09/09 Javascript
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
python 递归遍历文件夹,并打印满足条件的文件路径实例
2017/08/30 Python
Python实现两款计算器功能示例
2017/12/19 Python
python实现单链表中删除倒数第K个节点的方法
2018/09/28 Python
python简易实现任意位数的水仙花实例
2018/11/13 Python
解决python打开https出现certificate verify failed的问题
2020/09/03 Python
Django用户认证系统如何实现自定义
2020/11/12 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
html5中 media(播放器)的api使用指南
2014/12/26 HTML / CSS
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
介绍一下Java的事务处理
2012/12/07 面试题
车间副主任岗位职责
2013/12/24 职场文书
师德师风承诺书
2014/05/23 职场文书
师德师风建设整改措施思想汇报
2014/10/11 职场文书
见义勇为事迹材料
2014/12/24 职场文书
生日赠语
2015/06/23 职场文书
python 命令行传参方法总结
2021/05/25 Python
Python 键盘事件详解
2021/11/11 Python