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 ...
随机推荐
- WCF服务器证书配置说明-没有能够进行密钥交换的私钥，或者进程可能没有访问私钥的权限
WCF服务器证书配置说明 1.创建证书: makecert.exe -sr LocalMachine -ss My -a sha1 -n CN=XXX -sky exchange -pe 说明: -s ...
- 分布式服务框架dubbo原理解析（转）
libaba有好几个分布式框架,主要有:进行远程调用(类似于RMI的这种远程调用)的(dubbo.hsf),jms消息服务(napoli.notify),KV数据库(tair)等.这个框架/工具/产品 ...
- Angular自定义指令（directive）
angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...
- Linux多安全策略和动态安全策略框架演示验证方案及结果分析
3演示验证方案及结果分析3.1演示验证方案3.1.1验证目标该方案主要用于验证采用Flask体系结构实现的SELinux对系统的防护过程及相应的防护原理.3.1.2验证环境操作系统:启用了SELinu ...
- 发起post、get请求
HttpURLConnection对象 /*** * 发起post请求,传输xml数据 * @param strUrl 请求地址 * @param xml 发送数据 * @return string ...
- Java开发的基础条件:
------------Java开发的基础条件:Java相关的基础+对编程的自己的理解+调试代码+自己的坚持 一定要谦逊,不人云亦云,不去妄言某一门语言或技术好或坏!不是哪门技术有问题,而是(不会用才 ...
- PHP常用代码汇总
Get与Post //POST if(isset( $_POST['add_gift'] )) { $game=trim( $_POST['game'] ); } //GET if(isset( $_ ...
- npapi插件开发流程与实例
近期做NPAPI插件,网上的介绍还是比较多,但就是没有一个完整的例子,FQ也没找到,难得NPAPI要走向陌路了?就不去深究额,先解决目前遇到的问题. 现状:已有Activex(仅兼容IE32/64位浏 ...
- 如何应对ISP乱插广告（案例分析）
一.广告从何而来? 利益让人铤而走险,从而推动行业“发展”:广告的利益还真不小,xx房产门户网站上一个广告位少则几千,多则几十万:记得在校读书的时候,刚学会做网站,第一想法就是等自己的网站发展成熟有人 ...
- C# 使用Silverlight toolkit Chart
一.基础介绍 Silverlight ToolKit是微软发布的基于Microsoft-Public License(MS-PL)许可协议的控件集.MS-PL许可协议允许商业或非商业的发布,所以我们可 ...