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. NOIP模拟赛 6.29

    2017-6-29 NOIP模拟赛 Problem 1 机器人(robot.cpp/c/pas) [题目描述] 早苗入手了最新的Gundam模型.最新款自然有着与以往不同的功能,那就是它能够自动行走, ...

  2. Leetcode120.Triangle三角形最小路径和

    给定一个三角形,找出自顶向下的最小路径和.每一步只能移动到下一行中相邻的结点上. 例如,给定三角形: [ [2], [3,4], [6,5,7], [4,1,8,3] ] 自顶向下的最小路径和为 11 ...

  3. [洛谷P4141] 消失之物「背包DP」

    暴力:暴力枚举少了哪个,下面套一个01背包 f[i][j]表示到了i物品,用了j容量的背包时的方案数,f[i][j]=f[i-1][j]+f[i-1][j-w[i]]O(n^3) 优化:不考虑消失的, ...

  4. cmd 运行 python

    ①cmd 进入行命令: ②输入 “python” + “空格”,即 ”python “:将已经写好的脚本文件拖拽到当前光标位置,然后敲回车运行即可.

  5. 【GDOI2017 day1】取石子游戏 线段树+区间合并

    题面 如果给你一棵有根树,树根为 1,并且树的每个结点上有一个权值,现在我想知道每个点,除它所在子树以外的结点权值集合的 mex,怎么做呢? 在这里,mex 是定义在集合上的函数,mex(S) 表示 ...

  6. HTTP请求封装Java工具类

    装载自:http://www.open-open.com/lib/view/open1384844838743.html package com.wiker; import java.io.Buffe ...

  7. Docker.[4].容器操作.

    Docker.[4].容器操作. 熟悉的指令: 启动容器 docker run 交互式启动容器 docker run -i -t IMAGENAME /bin/bash 停止容器 exit 停止容器 ...

  8. linux系统 （实验一）实验楼的课程笔记

    实验楼的课程笔记 tab 键是命令补全 输入 tail  find / 立刻卡住 这时候ctrl+c 可以终端当前指令 一些常用的指令 Ctrl+d 键盘输入结束或退出终端 Ctrl+s 暂停当前程序 ...

  9. Liferay Model Hints

    这篇文章主要介绍如何通过model hint 来修改liferay builder service生成数据库表中默认字段的长度. 1.什么是Model Hints? 它是对liferay builde ...

  10. Directx11教程(67) 显示模型文件

    原文:Directx11教程(67) 显示模型文件       在前面的教程中,我们都是通过在ModelClass中直接产生顶点和索引数据,简单的三角形,立方体等等还好说,毕竟比较简单,如何显示复杂的 ...