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 学习之旅 (3)
Feb 05 Javascript
javascript 带有滚动条的表格,标题固定,带排序功能.
Nov 13 Javascript
JavaScript 利用Cookie记录用户登录信息
Dec 08 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
jquery模拟LCD 时钟的html文件源代码
Jun 16 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
Sep 12 Javascript
跟我学习javascript解决异步编程异常方案
Nov 23 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 Javascript
vue+element-ui实现表格编辑的三种实现方式
Oct 31 Javascript
微信小程序如何调用json数据接口并解析
Jun 29 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 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
mysql5详细安装教程
2007/01/15 PHP
Php中使用Select 查询语句的实例
2014/02/19 PHP
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
来自qq的javascript面试题
2010/07/24 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
2015/08/21 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
JavaScript实现图像模糊化的方法实例
2017/01/15 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
简述vue中的config配置
2018/01/23 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
2019/06/12 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
[49:35]KG vs SECRET 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python实现同时给多个变量赋值的方法
2015/04/30 Python
Python缩进和冒号详解
2016/06/01 Python
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
Python 遍历列表里面序号和值的方法(三种)
2017/02/17 Python
python数字图像处理实现直方图与均衡化
2018/05/04 Python
解决Python下imread,imwrite不支持中文的问题
2018/12/05 Python
解决webdriver.Chrome()报错:Message:'chromedriver' executable needs to be in Path
2019/06/12 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
Python读取excel文件中带公式的值的实现
2020/04/17 Python
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
香港最大的洋酒零售连锁店:屈臣氏酒窖(Watson’s Wine)
2018/12/10 全球购物
可口可乐唇膏:Lip Smackers
2019/08/27 全球购物
拖鞋店创业计划书
2014/01/15 职场文书
森林防火工作方案
2014/02/14 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
Win11更新失败并提示0xc1900101
2022/04/19 数码科技