对于一般的使用者来说，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启动的更多相关文章

  1. AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5

    前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step- #切换分支 npm start ...

  2. AngularJS学习--- AngularJS中的模板template和迭代器过滤filter step2 step3

    1.AngularJS 模板---step2: mvc(Model-View-Controller)模式在后端用的比较多,在前端也是一样的常用; 在AngularJS中,一个视图是模型通过HTML模板 ...

  3. AngularJS中的指令全面解析（转载）

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJ ...

  4. 关于AngularJs中的路由学习总结

    AngularJs中的路由,应用比较广泛,主要是允许我们通过不同的url访问不同的内容,可实现多视图的单页web应用.下面看看具体怎么使用. 关于路由  通常我们的URL形式为http://jtjds ...

  5. Angularjs与bootstrap.datetimepicker结合实现日期选择器

    http://www.lovelucy.info/angularjs-best-practices.html http://damoqiongqiu.iteye.com/blog/1917971 ht ...

  6. AngularJS学习--- AngularJS中模板链接和图像 ng-src step6

    接上一篇文章,本文将主要介绍angularjs中的模板链接,和图像显示? 首先,切换分支,启动项目: git checkout step- npm start 1.效果 相较于前一篇文章,明显感觉多了 ...

  7. 理解angularJS中作用域$scope

    angularJS中作用域是什么 作用域(scope)是构成angularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的 应用的作用域是和应用的数据模型相关联的,同时作用 ...

  8. 转: 理解AngularJS中的依赖注入

    理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...

  9. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

随机推荐

  1. 用VS开发PHP扩展

    开发前准备工作: VS(我用的2013) Cygwin(下载地址:http://www.cygwin.com/) 搭载了php运行环境的IIS7.5 (用来测试) php编译后的程序和编译前的源码,我 ...

  2. 自己积累的一些Emgu CV代码（主要有图片格式转换，图片裁剪，图片翻转，图片旋转和图片平移等功能）

    using System; using System.Drawing; using Emgu.CV; using Emgu.CV.CvEnum; using Emgu.CV.Structure; na ...

  3. 教你一招：根据身份证号计算出生年月和年龄 text函数和mid函数混用 datedif函数和today函数混用

    在电子表格Excel中,使用text函数和mid函数混用,根据身份证号计算出生年月: =text(mid(A2,,),"0!/00!/00") #0!/00!/00 为日期的格式# ...

  4. codevs 2988 保留小数 2

    2988 保留小数 2  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 白银 Silver       题目描述 Description 这个难度是吸引你点进来的.(其实难度挺 ...

  5. SSH--1

    package com.etc.action; import java.io.IOException; import java.io.PrintWriter; import java.util.Has ...

  6. 如何将Emmet安装到到 Sublime text 3？

    看清楚哦~~这是Sublime text 3不是2的版本,两者的安装还是有区别的,下面的方法是我感觉比较简单的,其他的要命令什么的感觉太复杂了,经测试是OK的. ONE:建议到官方下载Sublime  ...

  7. jQuery动态增删改查表格信息，可左键/右键提示

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. Angular.js通过bootstrap实现经典的表单提交

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel= ...

  9. SQL Server遍历表的几种方法

    在数据库开发过程中,我们经常会碰到要遍历数据表的情形,一提到遍历表,我们第一印象可能就想到使用游标,使用游标虽然直观易懂,但是它不符合面向集合操作的原则,而且性能也比面向集合低.当然,从面向集合操作的 ...

  10. 设置arc 的默认编辑器

    arc set-config editor "vim" 转自:http://udn.yyuap.com/thread-39791-1-1.html Pharicator是FB的代码 ...