zoukankan      html  css  js  c++  java
  • angularjs——module

    1、创建module

    //第一个参数是模块的名称
    var head=angular.module('headApp',[]);
    head.controller("User",["$scope",function($scope){
    	$scope.UserName="admin";
    	$scope.LoginTime=new Date().toString();
    }]);
    

    2、创建module且此模块要依赖其它module

    // 创建module且此模块要依赖其它模块
    // 第二个参数是依赖的模块名称,如果不依赖任何模块要传空数组[]。
    // 注意:如果第二个参数不传,则是获取当前名称的模块
    var my=angular.module('myApp',["headApp"]);
    my.controller("Content",["$scope",function($scope){
    	$scope.Text="this is a test page";
    }]);
    

    3、不同module有相同的controller时的调用方式

    //如果当前模块和依赖具有相同的controller,则会调用当前模块的controller。
    //当前模块没有此controller时,才会调用依赖模块中的controller
    //可以对下面的controller代码进行注释(或去掉注释),看页面的效果
    // my.controller("User",["$scope",function($scope){
    // 	$scope.UserName="admin123";
    // 	$scope.LoginTime="2015-7-25";
    // }]);
    

      

    demo代码如下:

    <!DOCTYPE html>
    <html lang="en" ng-app="myApp">
    <head>
    	<meta charset="UTF-8">
    	<title>模块化</title>
    	<script type="text/javascript" src="angular.js"></script>
    </head>
    <body>
    	<div ng-controller="User">
    		<p>用户名:{{UserName}}</p>
    		<p>登录时间:{{LoginTime}}</p>
    	</div>
    	<div ng-controller="Content">
    		<p>{{Text}}</p>
    	</div>
    </body>
    </html>
    <script type="text/javascript">
    	//创建module
    	//第一个参数是模块的名称
    	var head=angular.module('headApp',[]);
    	head.controller("User",["$scope",function($scope){
    		$scope.UserName="admin";
    		$scope.LoginTime=new Date().toString();
    	}]);
    
    	// 创建module且此模块要依赖其它模块
    	// 第二个参数是依赖的模块名称,如果不依赖任何模块要传空数组[]。
    	// 注意:如果第二个参数不传,则是获取当前名称的模块
    	var my=angular.module('myApp',["headApp"]);
    	my.controller("Content",["$scope",function($scope){
    		$scope.Text="this is a test page";
    	}]);
    
    	//不同module有相同的controller时的调用方式
    	//如果当前模块和依赖具有相同的controller,则会调用当前模块的controller。
    	//当前模块没有此controller时,才会调用依赖模块中的controller
    	//可以对下面的controller代码进行注释(或去掉注释),看页面的效果
    	// my.controller("User",["$scope",function($scope){
    	// 	$scope.UserName="admin123";
    	// 	$scope.LoginTime="2015-7-25";
    	// }]);
    </script>
    

      

    猛戳代码测试地址

  • 相关阅读:
    vue生命周期
    SQL Server 2008教程和Microsoft® SQL Server® 2008 R2 SP2
    min.css----全世界最快的CSS框架
    4分钟网页设计(译文)
    CSS 选择器
    CSS 定位
    [书]WALL·E、龙与地下铁、中国美丽的故事、故事新编、四十自述、书虫、人工智能、大话数据结构
    Underscore.js 初探
    Normalize.css 初识
    什么是 HTML?
  • 原文地址:https://www.cnblogs.com/junjieok/p/4676713.html
Copyright © 2011-2022 走看看