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

 

 传统的绑定初始化

<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只会绑定第一次加载的对象,后面重复的绑定或者其他对象的绑定,都会在控制台输出错误提示

初始化angularJS之ng-app的自动绑定和手动绑定的更多相关文章

  1. cocos2dx lua 绑定之二:手动绑定自定义类中的函数

    cococs2dx 3.13.1 + vs2013 + win10 1.首先按照<cocos2dx lua 绑定之一:自动绑定自定义类>绑定Student类 2.在Student类中增加一 ...

  2. 如何实现已发布app的自动更新

    要实现app的自动更新,做两件事情就可以搞定 1.获取当前手机中的app版本号 我们可以通过查询mainbundle中的获取CFBundleVersion NSDictionary *infoDict ...

  3. 【Angular 5】数据绑定、事件绑定和双向绑定

    本文为Angular5的学习笔记,IDE使用Visual Studio Code,内容是关于数据绑定,包括Property Binding.Class Binding.Style Binding. 在 ...

  4. 类属性与对象实现,init方法的作用,绑定方法,绑定方法与普通函数的区别,继承,抽象与继承,派生与覆盖

    今日内容: 1.类属性与对象属性 2.init方法的作用 3.绑定方法 4.绑定方法与普通函数的区别(非绑定方法) 5.继承 6.抽象与继承 7.派生与覆盖 1.类属性与对象属性 类中应该进存储所有对 ...

  5. 背水一战 Windows 10 (21) - 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧

    [源码下载] 背水一战 Windows 10 (21) - 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧 作者:webabcd 介绍背水一战 Wind ...

  6. vb小菜一枚--------早期绑定和后期绑定

    早期绑定和后期绑定 Visual Studio 2005   其他版本   将对象分配给对象变量时,Visual Basic 编译器会执行一个名为 binding 的进程.如果将对象分配给声明为特定对 ...

  7. KnockoutJS 3.X API 第四章 表单绑定(9) value绑定

    目的 value绑定主要用于DOM元素给视图模型赋值用的.通常用于<input><select><textarea>等元素. value绑定与text绑定的区别在于 ...

  8. 绑定: x:Bind 绑定, x:Bind 绑定之 x:Phase, 使用绑定过程中的一些技巧

    背水一战 Windows 10 之 绑定 x:Bind 绑定 x:Bind 绑定之 x:Phase 使用绑定过程中的一些技巧 示例1.演示 x:Bind 绑定的相关知识点Bind/BindDemo.x ...

  9. IOS6屏幕旋转详解(自动旋转、手动旋转、兼容IOS6之前系统)

    转自 http://blog.csdn.net/zzfsuiye/article/details/8251060 概述: 在iOS6之前的版本中,通常使用 shouldAutorotateToInte ...

随机推荐

  1. RequireJS中的require返回模块

    requirejs中定义AMD模块规则如下: define(function(){ var ProductManager={ Create:function(){ console.log(" ...

  2. 初次接触:DirectDraw

    第六章 初次接触:DirectDraw 本章,你将初次接触DirectX中最重要的组件:DirectDraw.DirectDraw可能是DirectX中最强大的技术,因为其贯穿着2D图形绘制同时其帧缓 ...

  3. FusionCharts封装-单系列图

    ColumnChart.java: /** * @Title:ColumnChart.java * @Package:com.fusionchart.model * @Description:柱形图 ...

  4. redis在windows下的安装

    redis服务器端程序:https://github.com/dmajkic/redis/downloads 根据自己的操作系统,选择32位和64位的 解压后文件目录如下 redis-server.e ...

  5. 芝麻HTTP:Python爬虫实战之抓取爱问知识人问题并保存至数据库

    本次为大家带来的是抓取爱问知识人的问题并将问题和答案保存到数据库的方法,涉及的内容包括: Urllib的用法及异常处理 Beautiful Soup的简单应用 MySQLdb的基础用法 正则表达式的简 ...

  6. win10 更新系统更新补丁后无法启动处理办法

    win10无法启动不用怕!WinRE恢复环境轻松修复win10系统 Win10技术预览版发布至今,已经整整过去十天时间.经过这段时间的使用体验,小伙伴们有没有遇到一些问题,导致系统出错甚至无法启动呢? ...

  7. 浅谈js中null和undefined的区别

    在JS中,null和undefined是经常让人摸不着头脑的东西,尤其是在数据初始化以及处理的过程中,经常稍微不注意,就会让页面在渲染时出现报错,下面来细说下,这两者之间的区别: null 表示一个对 ...

  8. ASP.NET CSS 小结

    1.ASP.NET 引用CSS 1.Site.master里面设置webopt <webopt:bundlereferencerunat="server"path=" ...

  9. newInstance 与new的区别

    用newInstance与new的区别? 区别在于创建对象的方式不一样,前者是使用类加载机制,后者new 的类可以没有加载: 使用newInstance时候,必须保证:1.这个类已加载,2.这个类已经 ...

  10. WKWebView 加载本地HTML显示不出网页问题,这点你注意了吗?-------完美显示

    1.首先,WKWebView的引入和创建,我这里就不做阐述,我要说的,就是解决别人不能给您解决的问题 2.WKWebView 加载本地HTML,也就是两三句代码  是吧?作为读者的您肯定也知道,也实现 ...