AngularJs(七) 模块的创建

module

目前我选编写的都是在AngularJs-1.5版本,如有疑问可以联系我。

理解模块的生命周期。

config 和 run 方法是模块调用时加载的方法。那么module的执行顺序是怎么样呢。

config方法是在module 被加载后调用的方法。run 方法是在所有的模块都被加载后调用的方法。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="exampleApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Cycle</title>
    <script src="angular.js"></script>
    <link href="bootstrap-theme.css" rel="stylesheet" />
    <link href="bootstrap.css" rel="stylesheet" />
    <script>
        var app = angular.module("exampleApp", ["exampleApp.Services"]);
        app.constant("startTime", new Date().toLocaleDateString());
        app.config(function (startTime) {
            console.log("Main Module config:" + startTime);
        });
        app.run(function (startTime) {
            console.log("Main module run:" + startTime);
        });
        var now = new Date();
        app.value("nowValue", now);
        angular.module("exampleApp.Services", [])
            .service("days", function (nowValue) {
                this.today = nowValue.getDay();
                this.tomorrow = this.today + 1;
            })
        .config(function () {
            console.log("Services module config:" + "(no time)");
        })
        .run(function (startTime) {
            console.log("Services module run:" + startTime);
        });
    </script>
</head>
<body >

</body>
</html>

  运行结果:

    

创建

 var app = angular.module("exampleApp", ["exampleApp.Services"]);
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="exampleApp">

    module 函数包含三个参数(name,requires,config);

name:表示需要创建模块的名字如:exampleApp;

requires:表示创建时所依赖的模块的名字。

config:表示注册模块回调的函数。//相当于 app.config();

 var app = angular.module("exampleApp", ["exampleApp.Services"], function (startTime) {
            console.log("Main Module config:" + startTime);
        });

引用

var app = angular.module("exampleApp");

  上面的表示,exampleApp 的module已被创建,当出现这句代码,AngularJs就会查找该模块。

summary

在使用模块时,AngularJs保证了主模块所依赖的模块的回调函数先解析。由于run方法是在所有的模块都加载后才执行的。所有,当依赖模块的config解析之后,等到所有的模块都被加载,在执行依赖的run方法,最后是主模块的run方法。

时间: 2024-10-07 16:13:26

AngularJs(七) 模块的创建的相关文章

AngularJS进阶(四十)创建模块、服务

AngularJS进阶(四十)创建模块.服务 学习要点 使用模块构架应用 创建和使用服务 为什么要使用和创建服务与模块? 服务允许你打包可重用的功能,使之能在此应用中使用. 模块允许你打包可重用的功能,使之能跨应用使用. 一.应用程序模块化 先看看一个没有模块化的程序 <!DOCTYPE> <!-- use module --> <html ng-app="exampleApp"> <head> <title>Angluar

AngularJs(八) 过滤器filter创建

大纲 示例 过滤器的使用 创建过滤器 demo 这是整个示例demo 1.filter.js文件 angular.module("exampleApp", []) .constant("productsUrl", "http://localhost:27017/products") .controller("defaultCtrl", function ($scope, $http, productsUrl) { $http.

AngularJS -- Module (模块)

什么是AngularJS的模块 我们所说的模块,是你的AngularJS应用程序的一个组成部分,它可以是一个Controller,也可以是一个Service服务,也可以是一个过滤器(Filter),也可以是一个directive(指令)等等…都是属于一个模块! 大多数的应用程序都是有一个自己的函数入口方法Main ,用它来进行初始化,以及加载装配各个模块,然后这些模块的组合,构成了你的应用程序,对吧? 但是,but, AngularJS应用程序却不是这样的哦,它没有main 方法,没有函数入口.

模块的创建及变量名

# -*- coding: utf-8 -*- #python 27 #xiaodeng #模块的创建 #任何的.py文件都可以被认为是一个模块,在模块的顶层指定的所有变量名都会变成其属性,并可以导出供客户端使用 #module1.py def printer(x): print x ''' import module1 #导入该文件内的内容,创建一个拥有一个属性的模块对象,变量名printer,他引用了一个函数对象 #通俗点理解就是:在py文件中,所有的def函数其实也都可以理解为一个变量名

第七篇:创建一个SOUI的Hello World

从0开始一个SOUI项目 1.环境配置 SOUI项目本质是一个基于Win32窗口的应用程序.因此首先我们可以从Win32窗口应用程序向导创建一个简单的Win32项目. 并在第3页选择“Window应用程序” 选择“完成”后生成一个Win32应用程序骨架. 项目的文件结构如下图: 要使用SOUI开发程序程序,首先当然是要找到从SVN获取的SOUI项目代码.假定SOUI项目保存在%SOUIPATH%这个环境变量指向的目录(安装了SOUI向导后会自动创建这个环境变量). 我们需要在VS的include

Drupal8开发教程:模块开发——创建新页面

之前我们已经通过<Drupal8开发教程:认识.info.yml文件>对模块的YAML文件有了了解,今天我们来看如何通过模块开发的方式添加一个新的页面. 在 Drupal 7 中,通过模块添加新页面非常简单,使用 hook_menu 定义路径及回调函数返回要显示的结果即可.但 Drupal 8 却要麻烦很多,虽然也是定义路径,然后关联用于显示内容的函数,但却要在两个文件中分开进行.而且 Controller 文件还有目录结构要求,这些变化都需要慢慢来适应了. 除了上文中定义的 hello_wo

USB加密锁htfs 2001全模块(七模块全部正常使用)

soft\8\GC-PowerStation.v5.2.2\HYPROTECH HTFS 2001\ILOG_CPLEX_V9.0\ILOG_OPL_STUDIO_V3.7\ILOG_SOLVER_V6.0\Laker 32 v3 Linux 1CD\PCBM_LP_Provisional_V701A\PDSOFT2.5 中科辅龙 最新版\Thermoflow v13.0 Edition 2004\ 免狗的最低1500元Thermoflow v13.0 Edition 2004加密锁_USB运行

从头开始编写一个Orchard网上商店模块(6) - 创建购物车服务和控制器

原文地址: http://skywalkersoftwaredevelopment.net/blog/writing-an-orchard-webshop-module-from-scratch-part-6创建购物车服务和控制器 这是从头开始编写一个新的Orchard模块的教程的第6篇.对于本教程的概述,请参阅介绍. 在本篇,我们将使我们的用户可以添加商品到他们的购物车.要创建这样的功能,我们需要: 一个“添加到购物车”按钮,要被添加我们的产品目录上,将产品添加到购物车 某种购物车服务,以存储

03、AngularJs的模块与控制器

大部分的应用程序都有一个主方法(main)来组织,实例化,启动应用程序.而AngularJs应用是没有主方法的,它是通过模块来声明应用应该如何启动的.同时,模块允许声明来描述应用中依赖关系,以及如何进行组装和启动: 1.AngularJs的模块是组织业务的一个框架,在一个模块中定义多个服务.当引入一个模块的时候,就可以使用这个模块提供的一种或者多种服务. 2.AngularJs本身的一个默认的模块是ng,ng模块提供了$http,$scope等等的服务. 3.服务只是AngularJs提供的多种