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系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
Jan 15 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Sep 26 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
微信小程序 扎金花简单实例
Feb 21 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
May 17 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
编写一个javascript元循环求值器的方法
Apr 14 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
Jun 24 Javascript
js轮播图之旋转木马效果
Oct 13 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
第十二节--类的自动加载
2006/11/16 PHP
NOT NULL 和NULL
2007/01/15 PHP
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
php面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
php使用sql server验证连接数据库的方法
2014/12/25 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
functional继承模式 摘自javascript:the good parts
2011/06/20 Javascript
可自己添加html的伪弹出框实现代码
2013/09/08 Javascript
利用javascript判断文件是否存在
2013/12/31 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
javascript之Array 数组对象详解
2016/06/07 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
简述vue路由打开一个新的窗口的方法
2018/11/29 Javascript
JavaScript中this用法学习笔记
2019/03/17 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
python实现根据图标提取分类应用程序实例
2014/09/28 Python
基于python爬虫数据处理(详解)
2017/06/10 Python
速记Python布尔值
2017/11/09 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
python打开文件的方式有哪些
2020/06/29 Python
Python实现像awk一样分割字符串
2020/09/15 Python
python实现不同数据库间数据同步功能
2021/02/25 Python
采购类个人求职的自我评价
2014/02/18 职场文书
80后职场人的职业生涯规划
2014/03/08 职场文书
诚信考试标语
2014/06/24 职场文书
教师自我剖析材料
2014/09/29 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
幼儿园大班教育随笔
2015/08/14 职场文书
党章学习心得体会2016
2016/01/14 职场文书
私人贷款担保书该怎么写呢?
2019/07/02 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers
python四个坐标点对图片区域最小外接矩形进行裁剪
2021/06/04 Python