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 相关文章推荐
动态加载iframe
Jun 16 Javascript
JavaScript方法和技巧大全
Dec 27 Javascript
js word表格动态添加代码
Jun 07 Javascript
jquery中ajax学习笔记3
Oct 16 Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
JS实现仿PS的调色板效果完整实例
Dec 21 Javascript
js实现的xml对象转json功能示例
Dec 24 Javascript
javascript 中null和undefined区分和比较
Apr 19 Javascript
微信小程序之分享页面如何返回首页的示例
Mar 28 Javascript
Node.js之删除文件夹(含递归删除)代码实例
Sep 09 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 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数组函数序列之array_sum() - 计算数组元素值之和
2011/10/29 PHP
php实现通用的信用卡验证类
2015/03/24 PHP
PHP中读取文件的几个方法总结(推荐)
2016/06/03 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
php的RSA加密解密算法原理与用法分析
2020/01/23 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
jQuery+CSS实现简单切换菜单示例
2016/07/27 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
2017/07/22 jQuery
JavaScript 异步调用
2017/10/25 Javascript
React实现轮播效果
2020/08/25 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
python实现斐波那契递归函数的方法
2014/09/08 Python
十个Python程序员易犯的错误
2015/12/15 Python
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
Python使用ctypes调用C/C++的方法
2019/01/29 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
html5仿支付宝密码框的实现代码
2017/09/06 HTML / CSS
个人简历自我评价八例
2013/10/31 职场文书
汽车专业毕业生自荐信
2013/11/03 职场文书
上班玩游戏检讨书
2014/02/07 职场文书
办公室主任主任岗位责任制
2014/02/11 职场文书
教师岗位职责
2015/02/03 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
Go语言并发编程 sync.Once
2021/10/16 Golang
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL