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动态调整iframe高度的代码
Apr 10 Javascript
js表数据排序 sort table data
Feb 18 Javascript
javascript进行数组追加方法小结
Jun 16 Javascript
JavaScript数组常用操作技巧汇总
Nov 17 Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
create-react-app构建项目慢的解决方法
Mar 14 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 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计算到指定日期还有多少天的方法
2015/04/14 PHP
如何解决PHP无法实现多线程的问题
2015/09/25 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
javascript 全角转换实现代码
2009/07/17 Javascript
jQuery 一个图片切换的插件
2011/10/09 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
js获取当前页面的url网址信息
2014/06/12 Javascript
js实现简单的可切换选项卡效果
2015/04/10 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
node.js部署之启动后台运行forever的方法
2018/05/23 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
微信小程序webview实现长按点击识别二维码功能示例
2019/01/24 Javascript
在vue中获取wangeditor的html和text的操作
2020/10/23 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
2020/11/05 Javascript
[03:24]DOTA2超级联赛专访hao 大翻盘就是逆袭
2013/05/24 DOTA
python爬取51job中hr的邮箱
2016/05/14 Python
python中os模块详解
2016/10/14 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
详解python 模拟豆瓣登录(豆瓣6.0)
2019/04/18 Python
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
Python实现冒泡排序算法的完整实例
2020/11/04 Python
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
internal修饰符起什么作用
2013/12/16 面试题
公司营业员的自我评价
2014/03/04 职场文书
工业设计专业自荐书
2014/06/05 职场文书
社区服务标语
2014/07/01 职场文书
学风建设演讲稿
2014/09/12 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
医院党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
春季运动会开幕词
2015/01/28 职场文书
高中生自我评价范文2015
2015/03/03 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
新手入门Mysql--概念
2021/06/18 MySQL
vue如何使用模拟的json数据查看效果
2022/03/31 Vue.js