AngularJS 启动有两种方式

1、绑定初始化,自动加载

通过绑定来进行angular的初始化,会把js代码侵入到html中。

ng-app是angular的一个指令,代表一个angular应用(也叫模块)。使用ng-app或ng-app=""来标记一个DOM结点,让框架会自动加载。也就是说,ng-app是可以带属性值的。

<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>

2、手动初始化

如果想对对初始化有更多的控制权,可以采用自定义手动引导方法初始化代替angular的自动初始化。比如你需要在angular编译模板之前做一些事情,比如改变模板某些内容。

Angular中也提供了手动绑定的api——bootstrap,它的使用方式如下:

angular.bootstrap(element, [modules], [config]);

其中第一个参数element:是绑定ng-app的dom元素;
modules:绑定的模块名字
config:附加的配置

值得注意的是:

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

  <head>
<script src="angular.js"></script>
<script> // 创建moudle1
var rootMoudle = angular.module('moudle1', []);
rootMoudle.controller("controller1",function($scope){$scope.name="aty"}); // 创建moudle2
var m2 = angular.module('moudle2', []);
m2.controller("controller2",function($scope){$scope.name="aty"}); // 页面加载完成后,再加载模块
angular.element(document).ready(function() {
angular.bootstrap(document.getElementById("div1"),["moudle1"]);
angular.bootstrap(document.getElementById("div2"),["moudle2"]);
}); </script> <head>
<body>
<div id="div1" ng-controller="controller1">div1:{{name}}</div>
<div id="div2" ng-controller="controller2">div2:{{name}}</div>
</body> </html>

转自:http://www.tuicool.com/articles/aiayI3    http://www.cnblogs.com/xing901022/p/4931543.html

angularJS 初始化的更多相关文章

  1. AngularJS 初始化加载流程

    一.AngularJS 初始化加载流程 1.浏览器载入HTML,然后把它解析成DOM.2.浏览器载入angular.js脚本.3.AngularJS等到DOMContentLoaded事件触发.4.A ...

  2. AngularJS开发指南2:AngularJS初始化过程

    自动初始化 请将ng-app指令放到你应用的标签节点中, 如果你想要AngularJS自动执行整个<html>程序就把它放在 <html> 标签中.比如:<html ng ...

  3. AngularJS初始化Select选择框

    一.引入 之前一个离职的同事负责的项目大量的引入了AngularJS的JS框架,后来我接手相关他项目里的功能.由于对AngularJS不是太熟,在他的功能上进行二次开发就比较费劲了,印象比较深的一个就 ...

  4. AngularJS初始化静态模板

    AngularJS可以通过ng-app来自动初始化模块,也可以通过angular.bootstrap(document, [module])手动启动应用,不管用哪种方法,应用启动后,动态往dom树里面 ...

  5. Angularjs 初始化框架

    bindJQuery(); publishExternalAPI(angular); jqLite(document).ready(function() { angularInit(document, ...

  6. angularjs 初始化方法执行两次以及url定义错误导致传值错误问题

    1.初始化方法执行两次以上的问题定义一个 route.如下所示:.state('main.channelQryDetail', { url:'/channelDetail/:channelNo/:pa ...

  7. AngularJS初始化闪烁

    可以使用:ng-if和ng-cloak解决,原因见:http://www.cnblogs.com/whitewolf/p/3495822.html

  8. AngularJS初始化普通数组和对象数组

    普通数组: ng-init="persons=['john','jack']" 对象数组: ng-init="persons=[{name:'john',age:20}, ...

  9. angularjs初始化时不显示模板内容, 不显示html, 不显示template

    template的内容可能在需要的数据准备好之前就显示出来了, ng-cloak可以解决这个问题 ng-cloak <div id="template1" ng-cloak& ...

随机推荐

  1. 【CodeVS】1023 GPA计算

    1023 GPA计算 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 青铜 Bronze 题目描述 Description 小松终于步入了大学的殿堂,带着兴奋和憧憬,他参加了信息科学 ...

  2. 洛谷P1968 美元汇率[2017年4月计划 动态规划02]

    P1968 美元汇率 题目背景 此处省略maxint+1个数 题目描述 在以后的若干天里戴维将学习美元与德国马克的汇率.编写程序帮助戴维何时应买或卖马克或美元,使他从100美元开始,最后能获得最高可能 ...

  3. PHP 学习1.4

    1.session and cookie 示列: <?phpsession_start();?><!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  4. js面向对象开发基础

    js的面向对象开发能力较弱,基本是以prototype为核心的面向对象,虽然现在出了个class这玩意,但本文还是先不做探讨. 面向对象基础——构造函数方法 var Fly = function (s ...

  5. Sql基本知识回顾

    一. SQL 基本语句 SQL 分类: DDL —数据定义语言 (Create , Alter , Drop , DECLARE) DML —数据操纵语言 (Select , Delete , Upd ...

  6. excel怎么制作三维圆环图表

    excel怎么制作三维圆环图表 excel怎么制作三维圆环图表?excel中想要制作一个三维圆环图表,该怎么制作呢?下面我们就来看看详细的教程,很简单,在Excel中,可以通过自带的圆环图功能生成二维 ...

  7. Node环境变量 process.env 的那些事儿

    前言 这两天在和运维GG搞部署项目的事儿. 碰到一个问题就是,咱们的dev,uat,product环境的问题. 因为是前后端分离,所以在开发和部署的过程中会有对后端接口的域名的切换问题.折腾了一下午, ...

  8. 在vue项目中同时使用element-ui和mint-ui,的时候,.babelrc配置文件怎么写

    我们安装vue组件库的时候,考虑到大小问题,需要根据需要仅引入部分组件 借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的. 但是在配置  .bab ...

  9. 【linux】Ubuntu16.04中文输入法安装

    最近刚给笔记本装了Ubuntu+win10双系统,但是ubuntu16.04没有自带中文输入法,所以经过网上的一些经验搜索整合,分享一下安装中文输入法的心得.本文主要介绍了谷歌拼音跟ibus中文输入法 ...

  10. jQuery图片从下往上滚动效果

    在线演示 本地下载