AngularJS中bootstrap启动
对于一般的使用者来说，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启动的更多相关文章
- AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5
前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step- #切换分支 npm start ...
- AngularJS学习--- AngularJS中的模板template和迭代器过滤filter step2 step3
1.AngularJS 模板---step2: mvc(Model-View-Controller)模式在后端用的比较多,在前端也是一样的常用; 在AngularJS中,一个视图是模型通过HTML模板 ...
- AngularJS中的指令全面解析（转载）
说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...
- 关于AngularJs中的路由学习总结
AngularJs中的路由,应用比较广泛,主要是允许我们通过不同的url访问不同的内容,可实现多视图的单页web应用.下面看看具体怎么使用. 关于路由 通常我们的URL形式为http://jtjds ...
- Angularjs与bootstrap.datetimepicker结合实现日期选择器
http://www.lovelucy.info/angularjs-best-practices.html http://damoqiongqiu.iteye.com/blog/1917971 ht ...
- AngularJS学习--- AngularJS中模板链接和图像 ng-src step6
接上一篇文章,本文将主要介绍angularjs中的模板链接,和图像显示? 首先,切换分支,启动项目: git checkout step- npm start 1.效果 相较于前一篇文章,明显感觉多了 ...
- 理解angularJS中作用域$scope
angularJS中作用域是什么 作用域(scope)是构成angularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的 应用的作用域是和应用的数据模型相关联的,同时作用 ...
- 转: 理解AngularJS中的依赖注入
理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...
- AngularJS中数据双向绑定(two-way data-binding)
1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...
随机推荐
- 删除部分字符使其变成回文串问题——最长公共子序列（LCS）问题
先要搞明白:最长公共子串和最长公共子序列的区别. 最长公共子串(Longest Common Substirng):连续 最长公共子序列(Longest Common Subsequence,L ...
- 教你一招：Excel中使用MID函数获取身份证中的出生年月日
MID字符串函数,作用是从一个字符串中截取出指定数量的字符 MID(text, start_num, num_chars) text被截取的字符 start_num从左起第几位开始截取(用数字表达 ...
- deepin 15.3添加PPA源 安装php5.6
想要在deepin 15.3上安装PHP5.6,我们需要手动添加源. 在https://launchpad.net/+search?field.text=php上可以通过搜索找到你想要的软件源, PP ...
- Thinking in java学习笔记之多态
多态是一种将改变的事物和未变的事物分离开来的重要技术.
- 狼人杀BETA阶段计划简介
狼人杀beta阶段任务与目标 简介 一.前言 狼人杀alpha阶段终于在组团刷夜中结束了,我们取得了一些成绩,同时也暴露了团队的一些问题.但不管怎样,有了在alpha版本中收获的经验,我们将在beta ...
- PMD宣传文案
队名:Clover 李烈争 031402614 林昊斌 031402615 李坤隆 031402612 林瑞斌 031402617 解宇虹 031402338 林 锦 031402339 目录 一. ...
- XML编码utf-8有中文无法解析或乱码 C#
XML的encoding="UTF-8" ,含有中文的话(部分)会出现乱码. 网上还是很多这类问题跟解决办法的. 表现为用ie或者infopath之类的xml软件打不开这个xml, ...
- 笔记：MAC OS X下配置PHP开发、调试环境
操作系统:MAC OS X 工具:MAMP.PhpStorm.xdebug.chrome 1.下载MAMP 2.安装比较简单,安装完成后,应用程序中会增加如下4个应用 MacGDBp是PHP调试器,使 ...
- Python SMTP邮件模块
SMTP是发送邮件的协议,Python内置对SMTP的支持,可以发送纯文本邮件.HTML邮件以及带附件的邮件. Python对SMTP支持有smtplib和email两个模块,email负责构造邮件, ...
- UEditor百度编辑器，工具栏上自定义添加一个普通按钮
添加一个名叫“hougelou”的普通按钮在工具栏上: 第一步:找到ueditor.config.js文件中的toolbars数组,增加一个“hougelou”字符串,然后找到labelMap数组,对 ...