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 相关文章推荐
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
TBCompressor js代码压缩
Jan 05 Javascript
js弹出层之1:JQuery.Boxy (二)
Oct 06 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
Apr 11 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 Javascript
js实现坦克移动小游戏
Oct 28 Javascript
微信小程序封装多张图片上传api代码实例
Dec 30 Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 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
学习ExtJS form布局
2009/10/08 Javascript
理解Javascript_05_原型继承原理
2010/10/13 Javascript
js类型检查实现代码
2010/10/29 Javascript
js类型转换与引用类型详解(Boolean_Number_String)
2014/03/07 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
Jquery实现的简单轮播效果【附实例】
2016/04/19 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
详解nodejs爬虫程序解决gbk等中文编码问题
2017/04/06 NodeJs
从setTimeout看js函数执行过程
2017/12/19 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
2018/09/29 Javascript
一个因@click.stop引发的bug的解决
2019/01/08 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
深入理解Python 代码优化详解
2014/10/27 Python
python numpy数组的索引和切片的操作方法
2018/10/20 Python
对python PLT中的image和skimage处理图片方法详解
2019/01/10 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
PYQT5实现控制台显示功能的方法
2019/06/25 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
python使用PIL剪切和拼接图片
2020/03/23 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
Hotels.com中国区:好订网
2016/08/18 全球购物
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
高二地理教学反思
2014/01/24 职场文书
文明学生事迹材料
2014/01/29 职场文书
《小壁虎借尾巴》教学反思
2014/02/16 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
2014年电信员工工作总结
2014/12/19 职场文书
2015年后勤工作总结范文
2015/04/08 职场文书
2015年政教主任工作总结
2015/07/23 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书