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中常见陷阱小结
Apr 27 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
javascript时区函数介绍
Sep 14 Javascript
js+html5实现canvas绘制镂空字体文本的方法
Jun 05 Javascript
JavaScript检查数字是否为整数或浮点数的方法
Jun 09 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
详解AngularJS1.6版本中ui-router路由中/#!/的解决方法
May 22 Javascript
js实现轮播图的两种方式(构造函数、面向对象)
Sep 30 Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 Javascript
使用Angular自定义字段校验指令的方法示例
Feb 01 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 Javascript
五句话帮你轻松搞定js原型链
Dec 09 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
不支持fsockopen但支持culr环境下下ucenter与modoer通讯问题
2011/08/12 PHP
PHP中数组的分组排序实例
2014/06/01 PHP
php多线程并发实现方法
2016/09/30 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
PHP实现 APP端微信支付功能
2018/06/22 PHP
laravel实现于语言包的完美切换方法
2019/09/29 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
脚本收藏iframe
2006/07/21 Javascript
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
用Jquery.load载入页面实现局部刷新
2014/01/22 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
canvas绘制万花筒效果(代码分享)
2017/01/20 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
vue addRoutes实现动态权限路由菜单的示例
2018/05/15 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
2019/07/29 Javascript
react native 仿微信聊天室实例代码
2019/09/17 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
JavaScript中this函数使用实例解析
2020/02/21 Javascript
微信小程序 bindtap 传参的实例代码
2020/02/21 Javascript
javascript将16进制的字符串转换为10进制整数hex
2020/03/05 Javascript
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
python的中异常处理机制
2018/08/30 Python
pygame实现简易飞机大战
2018/09/11 Python
python实现简单日期工具类
2019/04/24 Python
Django+boostrap 美化admin后台的操作
2020/03/11 Python
Python如何测试stdout输出
2020/08/10 Python
妈妈的账单教学反思
2014/02/06 职场文书
岗位竞聘书范文
2014/03/31 职场文书
高中生国庆节演讲稿范文2014
2014/09/21 职场文书
网站文案策划岗位职责
2015/04/14 职场文书
python基础入门之字典和集合
2021/06/13 Python