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查找法实现当前栏目的高亮显示的代码
Nov 24 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 Javascript
关于JS变量和作用域详解
Jul 28 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
Aug 03 Javascript
Vue.js中用v-bind绑定class的注意事项
Dec 13 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 Javascript
js判断节假日实例代码
Dec 27 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 Javascript
基于Electron实现桌面应用开发代码实例
Jul 07 Javascript
Vue vee-validate插件的简单使用
Jun 22 Vue.js
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中for与foreach的区别分析
2011/03/09 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
js传值 判断
2006/10/26 Javascript
JS图像无缝滚动脚本非常好用
2014/02/10 Javascript
采用call方式实现js继承
2014/05/20 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
2015/03/21 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
JS实现本地存储信息的方法(基于localStorage与userData)
2017/02/18 Javascript
JS验证全角与半角及相互转化的介绍
2017/05/18 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
javascript回调函数详解
2018/02/06 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
node(koa2) web应用模块介绍详解
2019/03/29 Javascript
uniapp,微信小程序中使用 MQTT的问题
2020/07/11 Javascript
Python文件读取的3种方法及路径转义
2015/06/21 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
DataFrame 将某列数据转为数组的方法
2018/04/13 Python
python实现爬取图书封面
2018/07/05 Python
Python3中bytes类型转换为str类型
2018/09/27 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
python元组的概念知识点
2019/11/19 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
在python中求分布函数相关的包实例
2020/04/15 Python
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
高中自我评价分享
2013/12/05 职场文书
机电一体化专业毕业生自荐信
2014/06/19 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
2015年办公室个人工作总结
2015/04/20 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
php TP5框架生成二维码链接
2021/04/01 PHP
Python还能这么玩之只用30行代码从excel提取个人值班表
2021/06/05 Python
纯CSS如何禁止用户复制网页的内容
2021/11/01 HTML / CSS