AngularJS使用angular.bootstrap完成模块手动加载的方法分析

本文实例分析了AngularJS使用angular.bootstrap完成模块手动加载的方法。分享给大家供大家参考，具体如下：

之前我们看到使用ng-app指令，可以实现模块的自动加载。现在我们看下，angular中如何手动加载模块。需要使用到angular.bootstrap这个函数。

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

IE运行这个网页，发现变量能够被angular框架正确解析；F12发现控制台也没有报错误。到这里为止，我们知道了如何加载angular的模块，也明白了手动加载和自动加载的区别。接下来，我们就可以去继续学习AngularJS框架的其他知识。

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

赞 (0)

相关推荐

  • AngularJS中的缓存使用

    缓存篇 一个缓存就是一个组件,它可以透明地储存数据,以便以后可以更快地服务于请求.多次重复地获取资源可能会导致数据重复,消耗时间.因此缓存适用于变化性不大的一些数据,缓存能够服务的请求越多,整体系统性能就能提升越多. $cacheFactory与缓存对象 $cacheFactory是一个为Angular服务生产缓存对象的服务.要创建一个缓存对象,可以使用$cacheFactory通过一个ID和capacity.其中,ID是一个缓存对象的名称,capacity则是描述缓存键值对的最大数量.举个生动

  • AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】

    AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】

    本文实例讲述了AngularJS框架双向数据绑定机制.分享给大家供大家参考,具体如下: 之前写的一篇<AngularJS入门示例之Hello World详解> ,介绍ng-model的时候提到:使用AngularJS的双向数据绑定机制,不需要我们编写繁琐的代码来实现同样的功能.现在我们看一个比较震撼的例子,看看angularJS是如何减少我们在前端开发中的繁琐劳动的.越是感受到框架功能的强大,越是能够激发学习的兴趣和动力. 假如我们有一个学生信息列表,包含学生的姓名.地址和年龄信息.假如这个数

  • AngularJs学习第五篇从Controller控制器谈谈$scope作用域

    AngularJs学习第五篇从Controller控制器谈谈$scope作用域

    Controller的创建 AngularJs controller使用无处不在,在里代码演示比较简单的创建工作. <!DOCTYPE html> <html xmlns="http://www.w.org//xhtml" ng-app="exampleApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset

  • AngularJS $injector 依赖注入详解

    推断式注入 这种注入方式,需要在保证参数名称与服务名称相同.如果代码要经过压缩等操作,就会导致注入失败. app.controller("myCtrl1", function($scope,hello1,hello2){ $scope.hello = function(){ hello1.hello(); hello2.hello(); } }); 标记式注入 这种注入方式,需要设置一个依赖数组,数组内是依赖的服务名字,在函数参数中,可以随意设置参数名称,但是必须保证顺序的一致性. v

  • angularJS 中$scope方法使用指南

    复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <script src="http://localhost:81/js/jquery.js"> </script> <script src="http://lo

  • AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析

    本文实例讲述了AngularJS中$injector.$rootScope和$scope的概念和关联关系.分享给大家供大家参考,具体如下: $injector.$rootScope和$scope是AngularJS框架中比较重要的东西,理清它们之间的关系,对我们后续学习和理解angularJS框架都非常有用. 1.$injector其实是一个IOC容器,包含了很多服务(类似于spring框架中的bean),其它代码能够通过       $injector.get("serviceName&quo

  • AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法

    今天用angular写table的时候,遇到了一个问题.在ng-repeat中,含有动态的html,而这些html中含有自定义指令. 因为希望实现一个能够复用的table,所以定义了一个指令myStandTable,指令代码大概如下: var myCommon = angular.module("myCommon",[]); myCommon.directive("myStandTable", function () { return { restrict: &qu

  • 深入解析AngularJS框架中$scope的作用与生命周期

    深入解析AngularJS框架中$scope的作用与生命周期

    $scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了 $scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的 $scope 发生改变时也会立刻重新渲染视图. 有了 $scope 这样一个桥梁,应用的业务代码可以都在 controller 中,而数据都存放在controller 的 $scope 中. $scope是一个把view(一个DOM元素)连结到controller上的对象.在

  • Angularjs实现搜索关键字高亮显示效果

    需求分析: 根据关键字搜索网页内容,并且高亮显示内容中的关键字 细节分析: 1.每次执行搜索操作,需清空上一次结果 2.需区分html标签和正常文本内容,否则为关键字添加样式以后会出现标签内容被显示的情况 代码思路: 利用正则表达式匹配关键字 使用javascript字符串替换的方式,将关键字替换成<span class='red'>关键字</span> 为了避免出现当关键字为 'p' 时候,将标签<p>替换成<<span>p</span>

  • AngularJS的依赖注入实例分析(使用module和injector)

    本文实例分析了AngularJS的依赖注入.分享给大家供大家参考,具体如下: 依赖注入(DI)的好处不再赘言,使用过spring框架的都知道.AngularJS作为前台js框架,也提供了对DI的支持,这是JavaScript/jQuery不具备的特性.angularjs中与DI相关有angular.module().angular.injector(). $injector.$provide.对于一个DI容器来说,必须具备3个要素:服务的注册.依赖关系的声明.对象的获取.比如spring中,服务

  • AngularJS使用ng-inlude指令加载页面失败的原因与解决方法

    本文实例讲述了AngularJS使用ng-inlude指令加载页面失败的原因与解决方法.分享给大家供大家参考,具体如下: AngularJS中提供的ng-include指令,很类似于JSP中的<jsp:include>用来将多个子页面合并到同一个父页面中,避免父页面过大,可读性差,不好维护. 父页面parent.html代码如下: <html> <head> <script src="angular-1.2.2/angular.js">&

  • AngularJS 使用ng-repeat报错 [ngRepeat:dupes]

    AngularJS 使用ng-repeat报错 [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify uniq ng-repeat报错 <div ng-init="words = ['高校','高校','高校']" ng-repeat="word in words"> {{word}} </div> [ng

随机推荐