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获取浏览器版本及名称实现函数
Apr 02 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
Feb 15 Javascript
Angular的Bootstrap(引导)和Compiler(编译)机制
Jun 20 Javascript
完美解决IE9浏览器出现的对象未定义问题
Sep 29 Javascript
express框架实现基于Websocket建立的简易聊天室
Aug 10 Javascript
Bootstrap 模态框(Modal)带参数传值实例
Aug 20 Javascript
Vue异步加载about组件
Oct 31 Javascript
JavaScript数据结构之单链表和循环链表
Nov 28 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
基于elementUI实现图片预览组件的示例代码
Mar 31 Javascript
js实现一个简易计算器
Mar 30 Javascript
vue 监听 Treeselect 选择项的改变操作
Aug 31 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中把美国时间转为北京时间的自定义函数分享
2014/07/28 PHP
extjs grid设置某列背景颜色和字体颜色的方法
2010/09/03 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
深入解读JavaScript中的Hoisting机制
2015/08/12 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
用jquery快速解决IE输入框不能输入的问题
2016/10/04 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
AngularJS表单提交实例详解
2017/02/18 Javascript
微信小程序实现图片轮播及文件上传
2017/04/07 Javascript
JS实现简易的图片拖拽排序实例代码
2017/06/09 Javascript
详解angularjs 关于ui-router分层使用
2017/06/12 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
vue webuploader 文件上传组件开发
2017/09/23 Javascript
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
[03:46]显微镜下的DOTA2第七期——满血与残血
2014/06/20 DOTA
初学Python函数的笔记整理
2015/04/07 Python
NumPy 如何生成多维数组的方法
2018/02/05 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
python爬取王者荣耀全皮肤的简单实现代码
2020/01/31 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
一些关于python 装饰器的个人理解
2020/08/31 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
教师师德承诺书
2014/03/26 职场文书
岗位竞聘书范文
2014/03/31 职场文书
优秀求职信
2014/05/29 职场文书
2014市国税局对照检查材料思想汇报
2014/09/23 职场文书
国际贸易实务实训报告
2014/11/05 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
廉政承诺书2015
2015/04/28 职场文书
新兵入伍决心书
2015/09/22 职场文书