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 相关文章推荐
[对联广告] JS脚本类
Aug 27 Javascript
innerHTML,outerHTML,innerTEXT三者之间的区别
Jan 28 Javascript
javascript英文日期(有时间)选择器
May 02 Javascript
Jquery 动态添加按钮实现代码
May 06 Javascript
jQuery 一个图片切换的插件
Oct 09 Javascript
jquery 面包屑导航 具体实现
Jun 05 Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 Javascript
javascript弹性运动效果简单实现方法
Jan 08 Javascript
Node.js 文件夹目录结构创建实例代码
Jul 08 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
Aug 10 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 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
类的另类用法--数据的封装
2006/10/09 PHP
PHP和XSS跨站攻击的防范
2007/04/17 PHP
php中关于普通表单多文件上传的处理方法
2011/03/25 PHP
php函数传值的引用传递注意事项分析
2016/06/25 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
laravel-admin select框默认选中的方法
2019/10/03 PHP
禁止直接访问php文件代码分享
2020/05/05 PHP
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
调试JavaScript中正则表达式中遇到的问题
2015/01/27 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
javascript日期计算实例分析
2015/06/29 Javascript
jquery+php实现滚动的数字特效
2015/11/29 Javascript
Javascript中this绑定的3种方法与比较
2016/10/13 Javascript
input输入框内容实时监测(附代码)
2017/08/15 Javascript
在Js页面通过POST传递参数跳转到新页面详解
2017/08/25 Javascript
详解javascript中的变量提升和函数提升
2018/05/24 Javascript
JS 实现获取验证码 倒计时功能
2018/10/29 Javascript
微信小程序+云开发实现欢迎登录注册
2019/05/24 Javascript
[01:22:42]2014 DOTA2华西杯精英邀请赛 5 24 DK VS LGD
2014/05/26 DOTA
Python实现分割文件及合并文件的方法
2015/07/10 Python
Python检测网站链接是否已存在
2016/04/07 Python
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
连接pandas以及数组转pandas的方法
2019/06/28 Python
python实现数据分析与建模
2019/07/11 Python
Django 实现xadmin后台菜单改为中文
2019/11/15 Python
解决Pycharm的项目目录突然消失的问题
2020/01/20 Python
《晏子使楚》教学反思
2014/02/08 职场文书
机关党总支领导班子整改方案
2014/09/20 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python
彩虹社八名人气艺人全新周边限时推出,性转女装男装一次拥有!
2022/04/01 日漫
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技