zoukankan      html  css  js  c++  java
  • (五)带属性值的ng-app指令,实现自己定义模块的自己主动载入

    如今我们看下怎样使用带属性值的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用来手动载入模块


     

  • 相关阅读:
    ASP.NET MVC案例教程(基于ASP.NET MVC beta)——第二篇:第一个页面
    HTML5网页录音和压缩,边猜边做..(附源码)
    策划编写一个新的Helper类
    正由另一进程使用,因此该进程无法访问此文件。
    第三方组件引用另一个第三方组件的悲剧
    数据库连接池的计数器设计
    让Ajax更简单
    更新Literacy
    多说
    利用C#自带组件强壮程序日志
  • 原文地址:https://www.cnblogs.com/blfshiye/p/5208918.html
Copyright © 2011-2022 走看看