• (五)带属性值的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用来手动载入模块


     

  • 相关阅读:
    filebeat6.2.3收集多个日志源 多个topic输出
    使用 INSERT 和 SELECT 子查询插入行
    Filebeat的架构分析、配置解释与示例
    struts1 logic标签的使用
    HDFS之一:hdfs命令行操作
    SQL子查询
    IE6动态插入option
    (转)CSS 圆角背景与三角形
    javascript 测试工具abut发布
    javascript天然的迭代器
  • 原文地址:https://www.cnblogs.com/blfshiye/p/5208918.html
Copyright © 2020-2023  润新知