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用来手动载入模块


     

  • 相关阅读:
    腾讯云挂载文件服务器节点
    OpsManage 安装
    centos7 安装mysql
    vs code 新建vue项目
    Centos7 安装supervisor
    腾讯云Centos7 安装nginx
    django 生成pdf
    VM安装虚拟机
    ACM/ICPC 之 Floyd练习六道(ZOJ2027-POJ2253-POJ2472-POJ1125-POJ1603-POJ2607)
    ACM/ICPC 之 Floyd范例两道(POJ2570-POJ2263)
  • 原文地址:https://www.cnblogs.com/blfshiye/p/5208918.html
Copyright © 2011-2022 走看看