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 相关文章推荐
Prototype 学习 Prototype对象
Jul 12 Javascript
flash 得到自身url参数的代码
Nov 15 Javascript
jquery无缝向上滚动实现代码
Mar 29 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
May 21 Javascript
详解vue-router2.0动态路由获取参数
Jun 14 Javascript
JS实现的base64加密解密操作示例
Apr 18 Javascript
Vuex入门到上手教程
Jun 20 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
May 30 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
Aug 27 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 Javascript
基于javascript的无缝滚动动画1
Aug 07 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/03/09 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
2015/08/14 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
AngularJS的ng-repeat指令与scope继承关系实例详解
2017/01/21 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
基于javascript的拖拽类封装详解
2019/04/19 Javascript
vue 实现cli3.0中使用proxy进行代理转发
2019/10/30 Javascript
Vue+webpack实现懒加载过程解析
2020/02/17 Javascript
Python语言描述随机梯度下降法
2018/01/04 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
python使用matplotlib画饼状图
2018/09/25 Python
python匹配两个短语之间的字符实例
2018/12/25 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
Python @property及getter setter原理详解
2020/03/31 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
国际旅客访问北美最大的汽车租赁提供商:Alamo Rent A Car
2018/06/13 全球购物
指针和引用有什么区别
2013/01/13 面试题
结婚典礼证婚词
2014/01/08 职场文书
基层工作经历证明
2014/01/13 职场文书
个人优缺点自我评价
2014/01/27 职场文书
学生生病请假条范文
2014/02/16 职场文书
有趣的广告词
2014/03/18 职场文书
医疗纠纷协议书
2014/04/16 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
电影建国大业观后感
2015/06/01 职场文书
预备党员表决心的话
2015/09/22 职场文书