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


     

  • 相关阅读:
    webpack常用插件及作用
    函数柯里化
    防抖和节流
    实现深拷贝
    实现new操作符
    关于js中断ajax请求
    从输入 URL 到页面加载完成,发生了什么?
    vue路由传参params和query的区别
    input输入框限制(座机,手机号码)
    判断当前页面是不是用户正在浏览的页面
  • 原文地址:https://www.cnblogs.com/blfshiye/p/5208918.html
Copyright © 2011-2022 走看看