js模块封装示例_AngularJS模块教程示例

最新推荐文章于 2020-09-14 16:56:18 发布

cunchi4221

最新推荐文章于 2020-09-14 16:56:18 发布

阅读量163

点赞数

文章标签： python java javascript 编程语言 linux ViewUI

原文链接：https://www.journaldev.com/6125/angularjs-module-tutorial-example

版权

js模块封装示例

In this post, we are going to cover one of the most important feature in AngularJS called Modules. We looked at features like controllers, filters and directives in the previous posts. We have also discussed how to create and include controllers in angular application, but it is not a recommended way to do, especially when you are dealing with big applications. We can use AngularJS Module API to modularize angular applications.

在本文中，我们将介绍AngularJS中最重要的功能之一，称为Modules 。我们在之前的文章中介绍了控制器，过滤器和指令等功能。我们还讨论了如何在角度应用程序中创建和包含控制器，但是不建议这样做，特别是在处理大型应用程序时。我们可以使用AngularJS Module API来模块化角度应用程序。

内容 (Contents)

什么是模块？ (What is a Module?)

Module can be treated as a container for the different parts of your application like controllers, filters, services, directives ,etc, which specify how an application should be bootstrapped. Module is an important part of the AngularJS dependency injection system.

可以将模块视为应用程序不同部分（如controllers ， filters ， services ， directives ,等）的容器，这些部分指定应如何引导应用程序。模块是AngularJS 依赖注入系统的重要组成部分。

Here is the general syntax for creating a module:

这是创建模块的一般语法：

angular.module(“myModule”, []);
angular.module（“ myModule”，[]）;

Here myModule is the name of the module. [] is where you inject the dependencies.

这里myModule是模块的名称。 []是注入依赖项的地方。

Why Modules?

为什么选择模块？

Helps package our code into reusable modules.
帮助将我们的代码打包到可重用的模块中。
The declarative process is easier to understand.
声明过程更容易理解。
Modules can be loaded in any order.
可以以任何顺序加载模块。
Easily testable and maintainable components.
易于测试和维护的组件。
Helps organize your application.
帮助组织您的应用程序。

在模块中创建控制器 (Creating a Controller in a Module)

In this section, we are going to explain how to create a controller in a module. It is very simple and we use the following steps to achieve that task.

在本节中，我们将解释如何在模块中创建控制器。这非常简单，我们使用以下步骤来完成该任务。

var myFirstModule = angular.module("myFirstModule ", []);

myFirstModule.controller("MyController", function);

Here we have created a module called myFirstModule and defined a controller named MyController in it.

在这里，我们创建了一个名为myFirstModule的模块，并在其中定义了一个名为MyController的控制器。

You can also create services, providers and factories using the angular module API. The following table briefly describes some of the mostly used methods in the API.

您还可以使用角度模块API创建服务，提供者和工厂。下表简要介绍了API中一些最常用的方法。

Method	Syntax
module.service	module.service( ‘serviceName’, function );
module.factory	module.factory( ‘factoryName’, function );
module.provider	module.provider( ‘providerName’, function );

方法	句法
模块服务	module.service（'serviceName'，function）;
模块工厂	module.factory（'factoryName'，function）;
模块提供者	module.provider（'providerName'，function）;

In this post, we are not going to look into the details of these concepts. We will see these concepts in the coming posts.

在本文中，我们将不研究这些概念的细节。我们将在接下来的文章中看到这些概念。

在模块示例中创建控制器 (Creating a Controller in a Module Example)

The following example demonstrates how to create a controller in angular module. In this example, we will create a module called demoApp and will define the controller, blogController in it.

以下示例演示了如何在角度模块中创建控制器。在此示例中，我们将创建一个名为demoApp的模块，并在其中定义控制器blogController 。

angular-module

<!DOCTYPE html>
<html ng-app="demoApp">
 
<head>
<title> AngularJS - Module</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
 
<body>
 
<div ng-controller="blogController">
 
    First Name: <input type="text" ng-model="firstName"><br>
    Last Name: <input type="text" ng-model="lastName"><br>
    <br>
    Full Name: {{firstName + " " + lastName}}
    <br>
    Blog Name : {{blogName }}
 
</div>
 
<script>

var app = angular.module("demoApp", []);

app.controller("blogController", function($scope) {
        $scope.firstName = "Pankaj",
        $scope.lastName = "Kumar",
        $scope.blogName = "JournalDev"
});
 
</script>
 
</body>
</html>

We use ng-app directive to specify the name of the module used in the application. You will see the following output in your browser.

我们使用ng-app指令来指定应用程序中使用的模块的名称。您将在浏览器中看到以下输出。

演示地址

AngularJS应用程序文件 (AngularJS Application Files)

Earlier we looked at how to include controllers in external files. That is very helpful when you deal with big applications. In any angular application, we use mainly two types of files, one with module and other with controllers. Let’s look in to it.
The following example demonstrates this usage.

之前，我们研究了如何在外部文件中包含控制器。当您处理大型应用程序时，这非常有帮助。在任何角度应用程序中，我们主要使用两种类型的文件，一种使用模块，另一种使用控制器。让我们来看一下。
以下示例演示了此用法。

First, we create a module in the app.js file.

首先，我们在app.js文件中创建一个模块。

app.js

var app = angular.module("demoApp", []);

Second step is to define the controllers in controller.js file.

第二步是在controller.js文件中定义控制器。

controller.js

app.controller("blogController", function($scope) {
        $scope.firstName = "Pankaj",
        $scope.lastName = "Kumar",
        $scope.blogName = "JournalDev"
});

Third step is to include these two files in our application.

第三步是在我们的应用程序中包括这两个文件。

angular-module

<!DOCTYPE html>
<html ng-app="demoApp">
 
<head>
<title> AngularJS - Module</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
 
<body>
 
<div ng-controller="blogController">
 
    First Name: <input type="text" ng-model="firstName"><br>
    Last Name: <input type="text" ng-model="lastName"><br>
    <br>
    Full Name: {{firstName + " " + lastName}}
    <br>
    Blog Name : {{blogName }}
 
</div>
 
<script src="app.js"></script>
<script src="controller.js"></script>
 
</body>
</html>

You will see the following output in your browser.

您将在浏览器中看到以下输出。

演示地址

That’s all for now and we will see more angular concepts in the coming posts.

到此为止，我们将在以后的文章中看到更多的角度概念。