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. 使用Cmder 安装 Composer 出现 "attempt to call a nil value"

    原因: 不是这个原因,也不是那个原因,而是采用了中文路径, 把comder 整个搬到其他目录就行了

  2. 基于 DataLakeAnalytics 的数据湖实践

    随着软硬件各方面条件的成熟,数据湖(Data Lake)已经越来越受到各大企业的青睐, 与传统的数仓实践不一样的是,数据湖不需要专门的“入仓”的过程,数据在哪里,我们就从哪里读取数据进行分析.这样的好 ...

  3. Django项目：CRM(客户关系管理系统)--10--04PerfectCRM实现King_admin注册功能02

    from django import conf #配置文件print("dj conf:",conf) #配置文件print("dj conf:",conf.s ...

  4. bzoj1823满汉全席

    2-sat模板 这篇博客写得非常好 传送门 //Achen #include<algorithm> #include<iostream> #include<cstring ...

  5. Python3.7.4入门-6/7错误和异常/类

    6 错误和异常 while True: try: x = int(input("Please enter a number: ")) break except ValueError ...

  6. 洛谷 P1948 [USACO08JAN]电话线Telephone Lines 最短路+二分答案

    目录 题面 题目链接 题目描述 输入输出格式 输入格式 输出格式 输入输出样例 输入样例 输出样例 说明 思路 AC代码 题面 题目链接 P1948 [USACO08JAN]电话线Telephone ...

  7. prestashop 首页轮播幻灯片图片修改

    后台 -> Modules -> Modules 搜索 home(中文则搜幻灯片)

  8. nginx与apache

    参考链接:https://www.cnblogs.com/changning0822/p/7844004.html

  9. ajax请求 400 Bad Request, 然后就没进后台方法!

    原因可能是 ajax提交表单的data中实体的字段没有值(表单中无值填充的问题) 导致前台就已经报错了! 需要注意的字段类型 double  date  int .. 我就是因为这个double  , ...

  10. spring自动扫描的注解@Component @Controller @Service @Repository

    @Component @Controller @Service @Repository的作用 1.@controller 控制器(注入服务)2.@service 服务(注入dao)3.@reposit ...