Angular.js初始化之ng-app的自动绑定与手动绑定详解


Posted in Javascript onJuly 31, 2017

前言

众所周知在传统的angularJS应用中,都是通过ng-app把angular应用绑定到某个dom上,这样做会把js代码入侵到html上,angular提供了手动启动的API--angular.bootstrap()

本文将给大家详细介绍关于Angular.js初始化之ng-app自动与手动绑定的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍。

一、传统的绑定初始化

<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>

二、手动初始化

angular.bootstrap(element, [appName], [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']); // 浏览器加载的每个html都会对应一个document对象, 此对象是所有html中dom元素的根节点,也属于dom元素

 </script>

</body>

</html>

注意: angular.bootstrap只会绑定第一次加载的对象,后面重复的绑定或者其他对象的绑定,都会在控制台输出错误提示

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持

Javascript 相关文章推荐
javascript匿名函数应用示例介绍
Mar 07 Javascript
jQuery中queue()方法用法实例
Dec 29 Javascript
jQuery中children()方法用法实例
Jan 07 Javascript
深入分析Cookie的安全性问题
Mar 01 Javascript
浅谈$(document)和$(window)的区别
Jul 15 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
Jul 11 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
jQuery实现可兼容IE6的滚动监听功能
Sep 20 jQuery
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
详解在React项目中安装并使用Less(用法总结)
Mar 18 Javascript
微信小程序学习总结(三)条件、模板、文件引用实例分析
Jun 04 Javascript
vue移动端写的拖拽功能示例代码
Sep 09 Javascript
详解React中的组件通信问题
Jul 31 #Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 #Javascript
Angular.js中数组操作的方法教程
Jul 31 #Javascript
BootStrap导航栏问题记录
Jul 31 #Javascript
Angular4 中内置指令的基本用法
Jul 31 #Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
Jul 31 #Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 #Javascript
You might like
如何使用PHP计算上一个月的今天
2013/05/23 PHP
PHP新建类问题分析及解决思路
2015/11/19 PHP
Laravel实现通过blade模板引擎渲染视图
2019/10/25 PHP
深入理解JavaScript系列(15) 函数(Functions)
2012/04/12 Javascript
ListBox实现上移,下移,左移,右移的简单实例
2014/02/13 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
JavaScript算法系列之快速排序(Quicksort)算法实例详解
2016/09/04 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
Vue.js实现移动端短信验证码功能
2017/03/29 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
2017/08/31 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
vue升级之路之vue-router的使用教程
2018/08/14 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
查找Vue中下标的操作(some和findindex)
2020/08/12 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
Python在Console下显示文本进度条的方法
2016/02/14 Python
python实现批量按比例缩放图片效果
2018/03/30 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
django 实现celery动态设置周期任务执行时间
2019/11/19 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
Django-migrate报错问题解决方案
2020/04/21 Python
django正续或者倒序查库实例
2020/05/19 Python
利用Python发送邮件或发带附件的邮件
2020/11/12 Python
365 Tickets英国:全球景点门票
2019/07/06 全球购物
汇科协同Java笔试题
2012/03/31 面试题
光荣入党自我鉴定
2014/01/22 职场文书
幼儿园新年寄语
2014/04/03 职场文书
质量承诺书怎么写
2014/05/24 职场文书
2014光棍节大学生联谊活动方案
2014/10/10 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
Vue实现下拉加载更多
2021/05/09 Vue.js
Python办公自动化之教你如何用Python将任意文件转为PDF格式
2021/06/28 Python
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers