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的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
jquery 检测元素是否存在的实例代码
Nov 19 Javascript
一个判断抢购时间是否到达的简单的js函数
Jun 23 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 Javascript
jquery实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
ECMAScript6--解构
Mar 30 Javascript
详解vue-cli 3.0 build包太大导致首屏过长的解决方案
Nov 10 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 Javascript
JavaScript undefined及null区别实例解析
Jul 21 Javascript
el-form 多层级表单的实现示例
Sep 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 分页分组类
2009/12/10 PHP
深入PHP运行环境配置的详解
2013/06/04 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
Bookmarklet实现启动jQuery(模仿 云输入法)
2010/09/15 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
解析javascript 数组以及json元素的添加删除
2013/06/26 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
js仿网易表单及时验证功能
2017/03/07 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
Python3.0 实现决策树算法的流程
2019/08/08 Python
python list转置和前后反转的例子
2019/08/26 Python
python实现输入任意一个大写字母生成金字塔的示例
2019/10/27 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
德国机场停车位比较和预订网站:Ich-parke-billiger
2018/01/08 全球购物
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
英国行业制服供应商:Alexandra
2019/09/14 全球购物
留学自荐信写作方法
2014/01/27 职场文书
软件测试专业推荐信
2014/09/18 职场文书
见习报告怎么写
2014/10/31 职场文书
辞职信如何写
2015/02/27 职场文书
小人国观后感
2015/06/11 职场文书
Python djanjo之csrf防跨站攻击实验过程
2021/05/14 Python
【DOTA2】高能暴走TK秀!PSG LGD vs ASTER - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python