AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法

本文实例讲述了AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法。分享给大家供大家参考，具体如下：

接着前面那篇《AngularJS使用ng-app自动加载bootstrap框架问题分析》，现在我们看下如何使用带属性值的ng-app命令，让ng-app自动加载我们自定义的模块作为根模块。

<!DOCTYPE html>
<html>
  <head>
    <script src="angular.js"></script>
    <script>
    var rootMoudle = angular.module('rootMoudle', []);
    rootMoudle.controller("rootControl",function($scope){$scope.name="aty"});
  </script>
  <head>
  <body>
    <div id="moudle1" ng-app="rootMoudle" ng-controller="rootControl">div1:{{name}}</div>
  </body>
</html>

可以看到，我们使用了angular.module()函数，创建了一个自定义的模块，我们并没有显示加载。但是通过运行效果可以看出：ng-app这个指令自动加载了我们自定义的rootMoudle。我们知道，使用angular.bootstrap()可以手动加载模块，如果我们自己调用这个函数是什么效果呢？

<html>
  <head>
    <script src="angular-1.2.2/angular.js"></script>
    <script>
    var rootMoudle = angular.module('rootMoudle', []);
    rootMoudle.controller("rootControl",function($scope){$scope.name="aty"});
    //页面加载完成后,加载rootMoudle
    angular.element(document).ready(function(){
      angular.bootstrap(document.getElementById("moudle1"), ['rootMoudle']);
    });
  </script>
  <head>
  <body>
    <div id="moudle1" ng-app="rootMoudle" ng-controller="rootControl">div1:{{name}}</div>
  </body>
</html>

用IE运行这个网页，用F12观察控制台报错：

SCRIPT5022: [ng:btstrpd] App Already Bootstrapped with this Element '<div class="ng-scope ng-binding" id="moudle1" ng-app="rootMoudle" ng-controller="rootControl">'

这就是说：ng-app已经自动完成了rootMoudle的加载，我们没有必要多此一举，再次显示调用angular.bootstrap来加载。也可以看得出：angular框架，一个模块只允许加载一次。ng-app用来自动加载模块，bootstrap用来手动加载模块。

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

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

赞 (0)

相关推荐

  • AngularJS ng-app 指令实例详解

    AngularJS ng-app 指令 AngularJS 实例 让 body 元素称为 AngularJS 应用的根元素: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>

  • Angular.js回顾ng-app和ng-model使用技巧

    Angular.js中index.html简单结构: <!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> Your name: <input type="text" ng-model=&

  • AngularJS使用ng-app自动加载bootstrap框架问题分析

    本文实例分析了AngularJS使用ng-app自动加载bootstrap框架问题.分享给大家供大家参考,具体如下: 前面的文章<AngularJS框架的ng-app指令与自动加载实现方法分析> 提出了使用ng-app指令的情况.之前觉得出现第4和第5种情况很奇怪,因为只看到了现象,没有看到本质.JS错误,最直观的表现方式就是:弹出一个非常不友好的JS错误窗口.当脚本出现了未捕获的错误,浏览器才会弹出错误提示.还有一种比较隐晦的表示:在浏览器的控制台输出错误信息.这提示我们:使用JS框架的时候

  • Angular.js初始化之ng-app的自动绑定与手动绑定详解

    前言 众所周知在传统的angularJS应用中,都是通过ng-app把angular应用绑定到某个dom上,这样做会把js代码入侵到html上,angular提供了手动启动的API--angular.bootstrap() . 本文将给大家详细介绍关于Angular.js初始化之ng-app自动与手动绑定的相关内容,分享出来供大家参考学习,下面话不多说,来一起看看详细的介绍. 一.传统的绑定初始化 <html> <head> <meta http-equiv="Co

  • Angular在一个页面中使用两个ng-app的方法(二)

    在上篇文章给大家介绍了Angular在一个页面中使用两个ng-app的方法,这种方法不太推荐,下面给大家介绍方法二,具体代码如下所示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>ng-app指令,angular找到第一个ng-app就不会再找了,在一个页面中只使用一个ng-app.</title>

  • AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法

    本文实例讲述了AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法.分享给大家供大家参考,具体如下: 接着前面那篇<AngularJS使用ng-app自动加载bootstrap框架问题分析>,现在我们看下如何使用带属性值的ng-app命令,让ng-app自动加载我们自定义的模块作为根模块. <!DOCTYPE html> <html> <head> <script src="angular.js">&l

  • AngularJS框架的ng-app指令与自动加载实现方法分析

    本文实例分析了AngularJS框架的ng-app指令与自动加载实现方法.分享给大家供大家参考,具体如下: ng-app是angular的一个指令,代表一个angular应用(也叫模块).使用ng-app或ng-app=""来标记一个DOM结点,让框架会自动加载.也就是说,ng-app是可以带属性值的.如果想要实现自动加载,那么就不能让ng-app带有属性值. <html> <body ng-app> <div>div1:{{1+3*2}}</

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

    本文实例分析了AngularJS使用angular.bootstrap完成模块手动加载的方法.分享给大家供大家参考,具体如下: 之前我们看到使用ng-app指令,可以实现模块的自动加载.现在我们看下,angular中如何手动加载模块.需要使用到angular.bootstrap这个函数. <html> <head> <script src="angular.js"></script> <script> // 创建moudle1

  • AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法

    本文实例讲述了AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法.分享给大家供大家参考,具体如下: 1.分页加载数据的基础上,如何通过滚动加载,实现分页加载数据的效果,github上,针对AngularJS,有一款不错的插件,地址为:https://github.com/sroze/ngInfiniteScroll 2.下面来看官方给出的文档 (1)使用样例: <ANY infinite-scroll='{expression}' [infinite-scroll-di

  • 基于AngularJS实现页面滚动到底自动加载数据的功能

    要实现这个功能,可以通过 https://github.com/sroze/ngInfiniteScroll 这个第三方控件来实现.步骤如下: 1. 下载ng-infinite-scroll.js程序 http://sroze.github.io/ngInfiniteScroll/ 目前版本是1.0.0 2. 如果你是用的jQuery2.0以上版本,还需要修改ng-infinite-scroll.js程序,将所有的将所有的$window.xxx改为$(window).xxx, elem.xxx改

  • PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间

    PHP前言: •动态地创建属性和方法 •对象的复制 •对象的比较 •加载指定的文件 •自动加载类文件 •命名空间 示例 1.类的相关知识点 3(动态地创建属性和方法) class/class3.php <?php /** * 类的相关知识点 3(动态地创建属性和方法) */ // 用于演示如何动态地创建属性(这就是 php 中所谓的重载) class Class1 { // __set 魔术方法,当设置的属性不存在或者不可访问(private)时就会调用此函数 public function _

  • Spring加载属性文件方式(自动加载优先级问题)

    Spring加载属性文件方式(自动加载优先级问题)

    目录 Spring加载属性文件 方式1.用xml文件配置 方式2.用注解 对Spring加载顺序的理解 web.xml初始化 spring加载流程 Spring加载属性文件 方式1.用xml文件配置 正常情况下,spring整合mybatis的配置文件的dataSource部分如下  <bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource"

  • jQuery模拟原生态App上拉刷新下拉加载更多页面及原理

    jQuery模拟原生态App上拉刷新下拉加载更多页面及原理

    很多App中,新闻或者展示类都存在下拉刷新和上拉加载的效果,网上提供了实现这种效果的第三方类(详情请见MJRefresh和EGOTableViewPullRefresh),用起来很方便,但是闲暇之余,我们可以思考下,这种效果实现的原理是什么,我以前说过,只要是动画都是骗人的,只要不是硬件问题大部分效果都能在系统UI的基础上做出来. 下面通过jQuery手机端上拉下拉刷新页面代码,很像QQ空间客户端或者微信下拉刷新页面特效代码. 请看下面效果图: 在线预览    源码下载 html代码: <div

  • Android手把手教大家制作APP首页（下拉刷新、自动加载）

    Android手把手教大家制作APP首页（下拉刷新、自动加载）

    一.概述 作为一名三年Android开发经验的程序员,今天和大家一起实战一款APP的首页功能,这个首页在我们平时接触中还是很常见的,虽然页面简单,但是里面涉及的功能点还是挺多的.代码如有不足的还望各路同仁指点一二. 页面中使用的开发库: 整个首页架构使用的是LRecyclerView,包含下拉刷新和自动加载功能 compile 'com.github.jdsjlzx:LRecyclerView:1.3.3' 无限循环轮播图使用的是convenientbanner,效果还是很顺畅的,还可以根据自己

随机推荐