加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

AngularJS 学习笔记---Module

发布时间:2020-12-17 10:08:28 所属栏目:安全 来源:网络整理
导读:What is a Module? You can think of a module as a container for the different parts of your app – controllers,services,filters,directives,etc. Why? Most applications have a main method that instantiates and wires together the different par

What is a Module?

You can think of a module as a container for the different parts of your app – controllers,services,filters,directives,etc.

Why?

Most applications have a main method that instantiates and wires together the different parts of the application.

Angular apps don't have a main method. Instead modules declaratively specify how an application should be bootstrapped. There are several advantages to this approach:

  • The declarative process is easier to understand.
  • You can package code as reusable modules.
  • The modules can be loaded in any order (or even in parallel) because modules delay execution.
  • Unit tests only have to load relevant modules,which keeps them fast.
  • End-to-end tests can use modules to override configuration.

The Basics

I'm in a hurry. How do I get a Hello World module working?

<div ng-app="myApp">
  <div>
    {{ 'World' | greet }}
  </div>
</div>
// declare a module
var myAppModule = angular.module('myApp',[]);

// configure the module.
// in this example we will create a greeting filter
myAppModule.filter('greet',function() {
 return function(name) {
    return 'Hello,' + name + '!';
  };
});
it('should add Hello to the name',function() {
  expect(element(by.binding("'World' | greet")).getText()).toEqual('Hello,World!');
});

Important things to notice:

  • TheModuleAPI
  • The reference tomyAppmodule in<divng-app="myApp">. This is what bootstraps the app using your module.
  • The empty array inangular.module('myApp',[]). This array is the list of modulesmyAppdepends on.

Recommended Setup

While the example above is simple,it will not scale to large applications. Instead we recommend that you break your application to multiple modules like this:

  • A module for each feature
  • A module for each reusable component (especially directives and filters)
  • And an application level module which depends on the above modules and contains any initialization code.

You can find a community
style guideto help yourself when application grows.

The above is a suggestion. Tailor it to your needs.

Theangular.moduleis a global place for creating,registering and retrieving Angular modules. All modules (angular core or 3rd party) that should be available to an application must be registered using this mechanism.

Passing one argument retrieves an existingangular.Module,whereas passing more than one argument creates a newangular.Module

Module

A module is a collection of services,controllers,and configuration information.angular.moduleis used to configure the$injector.

// Create a new module
var myModule = angular.module('myModule',[]);

// register a new service
myModule.value('appName','MyCoolApp');

// configure existing services inside initialization blocks.
myModule.config(['$locationProvider',function($locationProvider) {
  // Configure existing providers
  $locationProvider.hashPrefix('!');
}]);

Then you can create an injector and load your modules like this:

var injector = angular.injector(['ng','myModule'])

However it's more likely that you'll just usengApporangular.bootstrapto simplify this process for you.

Usage

angular.module(name,[requires],[configFn]);

Arguments

Param Type Details
name string

The name of the module to create or retrieve.

requires

(optional)

!Array.<string>=

If specified then new module is being created. If unspecified then the module is being retrieved for further configuration.

configFn

(optional)

Function=

Optional configuration function for the module. Same asModule#config().

Returns

angular.Module

new module with theangular.Moduleapi.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读