角学习教程

• 下载Learn Angular 100 Page Ebook in ZIP format 3.6 MB
• 下载Learn Angular 100 Page Ebook in RAR format  3.5 MB

内容 介绍 本系列文章是如何教会你Angular的? 为什么我们需要Angular ? 实验一:-练习NodeJS 理论:-什么是NodeJS ? 步骤1:-安装NodeJs 步骤2:-练习NPM安装命令 第三步:-理解包。json文件 理解package.json中的版本控制系统 什么是package-lock。json文件吗? 重要NPM命令 实验2:-练习打字稿 为什么我们需要typescript ? 步骤1:-安装typescript 将一个简单的Typescript编译成Javascript 步骤3:-使用tsconfig。json文件 实验3:实践与代码 VS代码是什么? 第1点:-所有的行动发生在一个文件夹 要点2:-创建文件和文件夹 第3点:-资源管理器和打开编辑器 第4点:-在explorer中显示 点号5:-集成终端 第6点:-运行多个终端 第7点:-切换到舒缓的颜色主题 第8点:VS代码设置 实验4:-理解使用SystemJs的模块加载器 第1步:-键入cript模块和导入/导出关键字 第二步:- JavaScript模块格式CommonJS, AMD, ES6 步骤3:-在HTML UI中调用Javascript模块加载器 实验五:-使用WebPack理解模块绑定器 Webpack模块绑定:运行时vs编译时 步骤1:-安装WebPack 步骤2:—生成一个Bundle 步骤3:-在网页中调用javascript类。 下一篇文章是什么? , 链接到其他文章 在第一部分中，我们查看Node、TypeScript、模块加载器/Bundlers和VS代码，您可以从这里阅读本文:- https://www.codeproject.com/Articles/1207118/Learn-Angular-Tutorial ,在第二篇文章中，我们创建了一个简单的基本的带有屏幕的angular应用程序，并介绍了一些重要的概念，比如组件和模块:- https://www.codeproject.com/articles/1207128/lear-angular-tutorial-part ,在第三篇文章中，我们探讨了如何实现SPA和验证https://www.codeproject.com/articles/1207249/learing-angular-tutorial-part ,在第四篇文章中，我们将了解如何进行HTTP调用，以及如何使用输入和输出创建定制的Angular组件。 ,在第五部分中，我们介绍了两个实验，一个是如何使用Jquery和Angular以及Lazy routing。您可以从这里阅读本文:https://www.codeproject.com/articles/1207383/lear-angular-tutorial-part 在第6部分中，我们再次介绍了两个实验室管道和使用提供程序的DI。https://www.codeproject.com/Articles/1214271/Learn-Angular-Tutorial-Part 介绍 我们为什么要学习Angular?，下面的堆栈溢出图说明了一切。它很受欢迎，因为有很多工作空缺。这篇文章通过15个很棒的实验室一步步教你Angular。所以，如果你是来学习Angular的，那么你就选对了地方，选对了文章。 在第一篇文章中，我们将介绍5个实验室。这五个实验室将涵盖Angular的预需求。本文介绍了Node、TypeScript、VSCode、模块加载器和模块绑定器。 ★角vs角。Angular有两个版本，旧版本叫做AngularJS，新版本叫做Angular。当有人说AngularJS时，它的意思是角1。当有人说角是角的2/4。 你也可以从下面的youtube视频开始学习Angular，它会一步一步教你:- 如果你正在为面试做准备，下面是关于Angular面试问答的视频。答:- 本系列文章是如何教会你Angular的? 学习Angular或任何新技术的最好方法是创建一个项目。因此，在这个一步一步的系列中，我们将创建一个简单的客户数据输入屏幕项目。 这个项目将有以下特点:- 应用程序应该能够接受三个字段:客户名称、客户和客户金额值。客户名称和客户代码是必须的字段，应该进行验证。应用程序将有一个“添加”按钮，帮助我们将当前客户数据发布到服务器。数据添加到服务器后，应该显示在网格中。应用程序将有一个导航结构，在上面我们将有徽标和公司名称，导航链接在左边和复制在屏幕底部的权利细节。 以上就是本文的路线图。它有三个阶段:- 理论阶段:在这个阶段，我们将理解什么是Angular以及我们为什么需要它。 前置阶段:在这个阶段我们将会有四个重要的东西:节点，Typescript, VSCode，模块加载器(SystemJS)和模块绑定器(Webpack)。 主要学习阶段:-这是angular真正开始的地方。在这里我们将有8个实验室，同时覆盖那些洛杉矶正如前面所讨论的，我们将创建客户数据输入屏幕项目。 所以不要再等待，开始一个实验室一个实验室，一步一个脚印。 ★应该从角1，角2还是角4开始?角1。X和2。X非常不同。即使你用的是Angular 1。你必须重新从Angular 2.重新开始。角2。X和角是4。X是向后兼容的，所以如果你正在学习Angular 2，你正在学习Angular 4和向前。所以，刚接触Angular的人只要从Angular 4开始学习，这篇文章就会教Angular 4。 为什么我们需要Angular ? Angular是一个开源的JavaScript框架，它简化了JavaScript对象和HTML UI元素之间的绑定代码。 让我们用简单的示例代码来尝试理解上述定义。 下面是一个简单的具有“CustomerName”属性的“Customer”函数。我们还创建了一个名为“Cust”的对象，它是“Customer”类类型。 隐藏,复制Code

function Customer() 
{
this.CustomerName = "AngularInterview";
}
var Cust = new Customer();

现在让我们假设在上面的customer对象中，我们想要绑定到名为“TxtCustomerName”的HTML文本框。换句话说，当我们在HTML文本框中更改某些内容时，客户对象应该得到更新，而当客户对象内部发生更改时，UI应该得到更新。 隐藏,复制Code

<inputtype=text id="TxtCustomerName"onchange="UitoObject()"/>

因此，为了实现UI与对象开发人员之间的通信，最终需要编写如下所示的函数。“UitoObject”函数从UI获取数据并将其设置为对象，而另一个函数“ObjecttoUI”从对象获取数据并将其设置为UI。 隐藏,复制Code

function UitoObject() 
{
Cust.CustomerName = $("#TxtCustomerName").val();
}
function ObjecttoUi() 
{
$("#TxtCustomerName").val(Cust.CustomerName);
}

因此，如果我们直观地分析上面的代码，它看起来如下所示。这两个函数只是绑定代码逻辑，用于将数据从UI传输到对象，反之亦然。 绑定代码 现在，同样的代码也可以用Angular来编写，如下所示。无论你在文本框中输入什么，都会更新" Customer "对象当" Customer "对象更新时，它也会更新UI。 隐藏,复制Code

<inputtype=text [(ngModel)]="Customer.CustomerName"/>

简而言之，如果您现在可视化地分析上面的代码，您将得到如下图所示的结果。你有HTML中的视图，javascript函数中的模型对象和Angular中的绑定代码。 现在绑定代码有了不同的词汇表。 一些开发人员称之为“视图模型”，因为它连接了“模型”和“视图”。有些人称它为“演示者”，因为这种逻辑只不过是表示逻辑。用某些术语来说，它有“控制器”，因为它控制视图和模型如何通信。 为了避免混淆词汇表，Angular团队将这段代码称为“Whatever”。绑定UI和模型的是“Whatever”代码。这就是为什么你会听到很多开发人员说Angular实现了“MVW”架构。 所以，Angular的全部目标就是绑定、绑定和绑定。 实验一:-练习NodeJS 在学习Angular之前，你应该知道的第一个Javascript开源是NodeJS。在这个实验室里，我添加的内容也在这个youtube视频中得到了演示，https://www.youtube.com/watch?请随意参观演示实验室。 理论:-什么是NodeJS ? NodeJS是一个开源JavaScript框架，它做两件事:- 它帮助您在浏览器之外运行JavaScript。NodeJS使用chrome JavaScript引擎在浏览器外执行JavaScript，这样我们就可以使用JavaScript创建基于桌面和服务器的应用程序。它还充当一个中央存储库，在那里我们可以使用NPM(节点包管理器)获得任何JavaScript框架。 要学，但不要学过头。NodeJS本身就是一个大话题。对于Angular，我们只需要知道如何使用NPM命令。所以我们将只局限于如何使用NPM。我们不会进行完全成熟的节点编程。记住，Javascript是巨大的，不要做不必要的学习，你会分散注意力。 步骤1:-安装NodeJs 为了安装NodeJS，请访问https://nodejs.org/并下载最新版本并安装它。 安装node之后，您应该会在程序文件中看到NodeJs命令提示符，如图所示。 然后我们可以打开NodeJS命令提示符，并在这个命令提示符内执行NPM命令。 如果你是完全新的NodeJS请看到这个NodeJS视频解释了更多细节。 步骤2:-练习NPM安装命令 所以让我们来练习NPM中的第一个命令“NPM install”。“npm install”命令可以帮助您获得任何javascript开源框架的最新版本。 例如，如果你想安装jquery，你将打开节点命令提示和键入“npm安装jquery”，一旦你按回车，你应该看到“jquery”已经安装在你的计算机。 , 您想知道Jquery安装在哪里吗?它已经安装在运行NPM命令的同一个文件夹中。 在该文件夹中，他创建了一个“node_modules”文件夹，并在其中创建了“jquer”所有Jquery已被npm加载的文件夹。 第三步:-理解包。json文件 当您处理大型项目时，您将需要大量的JavaScript框架。所以在一个项目中，你可能需要jquery, angular, lodash等等。一次又一次地进行“npm安装”肯定是在浪费您宝贵的时间。 因此，为了一次性加载所有javascript框架引用，“npm”团队提供了一个package.json。在这个包中。您可以为所有javascript引用创建一个条目，并一次性加载它们。 创建包。打开节点命令提示符，输入“npm init”。在“npm init”命令之后，它会询问包名、版本号、项目描述等等。一旦你填满了所有的问题，它将创建一个包。您当前文件夹中的json文件。下面是“npm init”命令的样子。 一旦npm init命令被成功执行，它就会创建一个“包”。在当前文件夹中的json文件。如果你打开“包裹”。文件的结构如下所示。 不要用所有的信息超载自己，只是放大“依赖”节点。此节点列出了所有JavaScript依赖项的版本号。在我们的包里。我们已经列出了所有的依赖项。 隐藏,复制Code

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "MyClass.js",
  "dependencies": {
    "angular": "^1.6.5",
    "jquery": "^3.2.1",
    "knockout": "^3.4.2",
    "lodash": "~4.17.4"
  },
  "devDependencies": {},
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

无论“包。你只需要输入“npm install”命令就可以了，如图所示。 如果你记得在包装。我们列出了3个JavaScript框架依赖项，这些将依次安装。您可以在图片中看到它声明“添加了3个包”。 要学，但不要学过头。包中。json有很多配置，不要把精力都花在学习上面。在我们做实验的过程中，我会介绍一些重要的。继续阅读章节。 理解package.json中的版本控制系统 大多数软件版本遵循语义版本控制。在语义版本化中，版本分为三个数字，如下图所示。 第一个编号称为“主版本”，第二个称为“副版本”，第三个称为“修订版本”。 主版本:主版本的任何增加都表明软件功能发生了破坏性的变化。旧代码很可能无法与这些更改一起工作，因此必须进行适当的测试。 小版本:-当我们添加新特性时，这个版本会增加，但旧代码仍然可以工作。 这个版本在我们修复bug的时候增加了。因此，没有添加新的功能，没有破坏更改，向后兼容旧代码。 , NPM遵循语义版本控制，但它也有一些更特殊的字符，如“^”、“~”、“>”等等。它们规定了NPM获取最新的主要版本和次要版本的行为方式。 对于这些格式，有3种格式是非常主要的，让我们分别来理解它们。 准确(1.6.5),主要/次要(^ 1.6.5)或小(~ 1.6.5)。 , 确切的(1.6.5):-这将得到确切的1.6.5版本的最新，不多也不少。如果该版本不可用，它将抛出一个异常。 大修/小修:胡萝卜号的最低分数是1.6.5，如果有更高的小修版本，它也会得到这个分数。它将永远不会得到更高的主要版本。如果1。6有1。6。7，它会得到这个，如果是1。7。7，它会得到那个，但如果是2。0，它就不会得到那个。 最小值或更低(~1.6.5):-波浪号将得到更高的修正。如果1.6.5有1.6.7，它就会得到这个值，但是如果它有1.7.5，它就不会被安装，如果它有2.0，它就不会被安装。 什么是package-lock。json文件吗? 如前几节所讨论的。json有“^”和“~”版本控制机制。现在假设在您的包中。json你提到“jquery”:“^3.1.0”和jquery有一个新版本“3.2.1”。所以实际上它会安装，或者说锁定到“3.2.1”。 所以在包中。json是^3。1。0但实际上是3。2。1。实际版本的条目出现在“package-lock.json”中。因此，包锁文件具有在您的代码中使用的确切版本。 下面是两个文件的图像快照。 重要NPM命令 NPM有巨大的命令列表。但这里有一些非常重要的命令，你将时常需要。如前所述，学习但不要过度学习。 g命令会全局安装这个包。换句话说，在您的计算机中，当您使用这个包时，它将采取全局安装。这应该只用于命令行包，如grunt, typescript, npm等。npm install—保存jquery这将安装包并在包中做一个条目。json文件。有时我们在项目中使用包而忘记更新包。这非常方便。npm视图-版本jquerynpm视图-版本jquery 第一个命令将显示github上最新的Jquery版本，第二个命令将升序显示所有版本。这个命令更新npm本身。前面讨论的“-g”有助于全局安装npm。 实验2:-练习打字稿 Angular是使用typescript语言创建的。所以，如果你正在使用Angular typescript进行开发，那么就应该这么做。 为什么我们需要typescript ? JavaScript是一种伟大而怪异的语言。所以在JavaScript中，如果你想要继承，你需要使用原型，它不是强类型语言，没有多态性等等。因此，当有c#和Java背景的开发人员要熟悉这种奇怪的语言是非常困难的。来自c#和Java背景的人经常使用OOP特性。 所以为了填补这个空白，答案是“TypeScript”。 TypeScript是一种覆盖在JavaScript之上的面向对象编程语言。 所以在typescript中，我们可以使用“类”、“扩展”、“接口”等关键字来编写代码。 内部typescript将编译(必须是“transpile”)成纯javascript代码的函数，闭包和生活。 请务必观看这个1小时的训练视频在TypeScript，它解释了TypeScript更详细。 步骤1:-安装typescript 所以要安装typescript，我们需要使用“npm”。Typescript是一个javascript开源框架，所以安装它的最好方法是使用“npm”。因此打开节点命令提示符并输入“npm install typescript -g”。 “-g”命令表示您可以从任何文件夹执行typescript命令。 将一个简单的Typescript编译成Javascript 让我们试着理解如何将typescript编译成javascript。所以让我们创建一个简单的“客户”。文件中包含以下代码。 隐藏,复制Code

class Customer{
}

现在打开nodeJS命令提示符，输入命令' tsc " Customer.ts " '。一旦您按enter键，它将创建“Customer”。在同一个文件夹中。 如果您还记得“tsc”是在“npm安装”命令中全局注册的。所以这个“tsc”命令可以在任何文件夹中执行。 下面是typescript命令行实用程序的javascript输出。 隐藏,复制Code

var Customer = (function () {
    function Customer() {
    }
    return Customer;
}());

许多人将这种从typescript到JavaScript的转换称为“编译”。就我个人而言，我觉得我们应该把这个过程称为“转座”。 编译从高级语言(如c#、Java、c++)转换为机器语言或一些人类无法读取的中间语言。而转换从一种高级语言到另一种高级语言。 在这里，typescript和JavaScript都是高级语言。因此，让我们把这个过程和编译称为“编译器”，并把typescript称为“编译器”。 步骤3:-使用tsconfig。json文件 typescript的编译过程有很多高级设置。下面是一些在编译时可以传递到tsc命令行的选项:- tsc客户选项描述。ts -removecomments而transpiling评论将被删除tsc客户。这将使用ES5规范进行编译。tsc客户。这将编译到一个特定的输出目录tsc foo。ts酒吧。ts输出文件“单身。这将把多个TS文件编译成一个js文件。tsc客户。这个命令将在后台连续运行typescript，并继续寻找更改过的文件。如果文件，它将编译该文件。 但是现在让我们实际地考虑一下，如果我想要按照ES5规范将其转到一个没有out注释的特定目录，命令行将变成如下所示的内容。 隐藏,复制Code

tsc Customer.ts --outdir "c:usersshiv" --target ES5 --removecomments

这就是tsconfig。json文件来拯救。您可以将所有这些配置放在“tsconfig”中。然后执行“tsc”。 隐藏,复制Code

{
  "compilerOptions": {
    "target": "es5",
    "removeComments": false,
    "outDir": "/Shiv"
  }
}

要学，但不要学过头。Tsconfig。json有1000个属性，现在不要花你的精力去理解它们。当任何新的typescript配置出现时，我们会去看看它。 实验3:实践与代码 VS代码是什么? 理论上，你可以用一个简单的记事本来完成Angular。但那将回到亚当和夏娃的时代，重新发明轮子。所以我们需要一些工具来帮助我们轻松地输入HTML，编译typescript等等。 这就是需要VS代码的地方。VS代码是微软提供的一个免费编辑器，它将帮助我们实现HTML, JavaScript, Typescript等所有自动化。 所以转到https://code.visualstudio.com/download，根据您的操作系统安装适当的版本。例如，我有windows操作系统，所以我将安装windows版本。 一旦你下载安装它是一个简单的安装EXE运行它和jus不要打next, next和finish。 你也可以观看VS代码教程，这将帮助你理解 , , 第1点:-所有的行动发生在一个文件夹 在VS代码中，所有源代码都放在一个文件夹中。所以第一步是创建一个文件夹,点VS代码文件夹点击文件➔打开文件夹并选择以下图所示。 要点2:-创建文件和文件夹 如果你想创建一个文件或子文件夹，你可以点击图标，如图所示。 第一个图标创建一个文件，第二个图标创建一个文件夹。 第3点:-资源管理器和打开编辑器 VS代码的浏览器部分有两个部分，一个显示打开的编辑器，另一个显示你的文件夹。您可以看到显示打开编辑器的图像。您可以单击这些十字标志来关闭打开的文件。 第4点:-在explorer中显示 如果您想浏览到当前文件夹。你可以右键点击文件夹，然后在资源管理器中点击显示。 点号5:-集成终端 这些框架主要通过命令提示运行。如果我们能在VS代码中集成命令行，那就太好了。VS代码叫做集成终端,您可以打开集成终端通过点击查看➔集成终端。 一旦进入集成终端，您可以启动“npm install”、“tsc”等等。下面是综合终端的样子。 第6点:-运行多个终端 我们总是需要运行多个命令，为此我们需要加载多个终端的工具。 在VS代码中，我们可以通过点击加号加载多个终端，如下所示。因此，在一个终端中，你可以运行web服务器，在另一个终端中，你可以使用代码审查工具。 第7点:-切换到舒缓的颜色主题 默认情况下，VS代码显示黑色主题，这对你的眼睛健康非常好。但有时为了让代码更清晰，你可能会想改用一些更清晰的主题。你可以通过点击文件➔偏好➔颜色主题,你会得到主题如以下图所示。 第8点:VS代码设置 VS代码有很多设置，比如你可以隐藏不想要的文件，只关注你想要的文件，改变图标设置，改变字体大小等等。应用环境中,需要转到文件➔➔偏好设置,你会显示一个图如下所示。 其中有两部分，一部分是首选项示例代码片段，另一部分是您希望在哪个级别应用这些代码片段。您可以在两个级别应用代码片段，一个在项目工作区级别，另一个在用户/计算机级别。 如果您在工作区级别应用，它将仅适用于该项目，如果您在用户级别应用，它将应用于该计算机中的所有项目。 例如，在用户设置中，我们已经粘贴了排除设置的文件。在这里，我们指定了我们不想看到的。JS "和"。映射工作区中的文件。 隐藏,复制Code

{
    "workbench.sideBar.location": "left",
    "window.zoomLevel": 2,
    "window.menuBarVisibility": "default",
    "files.exclude": {
    "**/*.js": true,
    "**/*.js.map": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true
  },
  "workbench.colorTheme": "Visual Studio Light"
}

一旦该设置被应用，你可以看到“JS”和“Map”文件没有被看到。 实验4:-理解使用SystemJs的模块加载器 您可以观看下面的视频，它实际上演示了模块加载器和SystemJS的概念。 主题名称youtube URL源系统js https://www.youtube.com/watch?v=nQGhdoIMKaM Common JS concept https://www.youtube.com/watch?v= jn4im5tp1se 第1步:-键入cript模块和导入/导出关键字 模块化开发是发展的重要支柱之一。一个好的软件总是具有自包含的模块。 因此，您需要创建具有自包含代码的独立物理typescript或JavaScript文件。然后需要某种引用机制，通过这种机制模块可以在这些物理文件之间进行引用。 在typescript中，我们通过使用“import”和“export”关键字来做到这一点。 因此，需要公开的模块应该具有“export”关键字，而希望导入导出模块的模块应该具有“import”关键字。 , 例如，假设我们有两个typescript文件“Customer”。ts”和“Dal.ts”。让我们假设”客户。“ts”用的是“Dal.ts”。 所以“木豆。ts将使用导出来公开他的模块，而“客户”。ts”将用于导入以获取导出的模块。 所以在“木豆。您想要导出的类应该标记为“导出”，如下面的代码所示。如果你没有标记它导出，它不能被导入。 隐藏,复制Code

export class Dal{
    Add(){
        alert("Dal add called");
    }
}

现在是“顾客”。我们使用“import”来调用从“Dal.ts”导出的类。 隐藏,复制Code

import {Dal} from "./Dal "
export class Customer{
    Add(){
       var dal = new Dal();
       dal.Add();
       
    }
}

简而言之，你可以使用导出和导入在typescript中进行模块化开发。但现在如何将其“置换”为javascript代码，我们将在下一节中看到。在一天结束的时候所有这些莫dules被转换成javascript，所以让我们了解它是如何工作的。 第二步:- JavaScript模块格式CommonJS, AMD, ES6 让我们首先定义“模块”格式这个词。我们在前一节讨论了模块。模块格式定义了如何导出和导入模块的JavaScript语法。 在JavaScript世界中有两种定义模块格式的方式:-非官方的方式和官方的方式。所以在ES6之前没有正式的方法，所以一些非正式的定义模块格式的方法是CommonJs, AMD, UMD等等。官方的方式是唯一的，只有一个ES6。 例如，下面是commonJS的格式。在commonJS中，导出的模块定义在“exports”变量中，要导入，我们需要使用“require”关键字。 下面是使用“exports”变量导出dal的JS输出。 隐藏,复制Code

Object.defineProperty(exports, "__esModule", { value: true });
var Dal = (function () {
    function Dal() {
    }
    Dal.prototype.Add = function () {
        alert("Dal add called");
    };
    return Dal;
}());
exports.Dal = Dal;

下面是“Customer”的代码。使用“require”来加载“Dal.js”。 隐藏,复制Code

Object.defineProperty(exports, "__esModule", { value: true });
var Dal_js_1 = require("./Dal.js");
var Customer = (function () {
    function Customer() {
    }
    Customer.prototype.Add = function () {
        var dal = new Dal_js_1.Dal();
        dal.Add();
    };
    return Customer;
}());
exports.Customer = Customer;

这是commonJS格式和其他格式一样。例如下面是“amd”模块格式。 在这里，我们导出“export”变量中的类，并使用“define”进行导入。下面是“define”的代码。我们没有粘贴“export”，就像commonJS一样。 隐藏,复制Code

define(["require", "exports", "./Dal.js", "./Validation.js"], function (require, exports, Dal_js_1, Validation_js_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var Customer = (function () {
        function Customer() {
        }
        Customer.prototype.Add = function () {
            var val = new Validation_js_1.Validation();
            var dal = new Dal_js_1.Dal();
            dal.Add();
        };
        return Customer;
    }());
    exports.Customer = Customer;
});

在“ES6”模块格式中，要公开我们需要“导出”关键字和消费的类，我们需要使用“import”。 隐藏,复制Code

import { Dal } from "./Dal.js";
import { Validation } from "./Validation.js";
var Customer = (function () {
    function Customer() {
    }
    Customer.prototype.Add = function () {
        var val = new Validation();
        var dal = new Dal();
        dal.Add();
    };
    return Customer;
}());
export { Customer };

隐藏,复制Code

var Dal = (function () {
    function Dal() {
    }
    Dal.prototype.Add = function () {
        alert("Dal add called");
    };
    return Dal;
}());
export { Dal };

所以简单的单词“amd”，“commonJS”和“ES6”定义了模块如何相互通信。总结ES6使用“import /export”，amd使用“define/export”，commonJs使用“require/export”。 所有这些模块格式都可以通过简单地改变typescript配置文件中的一个选项来生成。 所以在“tsconfig。我们可以在“模块”中设置我们想要的模块格式。 步骤3:-在HTML UI中调用Javascript模块加载器 现在，当我们尝试加载JavaScript函数使用模块格式，如AMD, CommonJS或ES6，它不是那么容易。例如，下面的代码在HTML UI中，我们已经加载了“Dal”。js”和“客户”. js”。这个示例已经在前面的实验室中演示过，并且启用了“CommonJS”。 我们还把顺序放对了，首先我们添加了“Dal”的引用。然后是“客户”。js”,因为“客户。js "依赖于" Dal.js "。 但是，当我们尝试创建“Customer”对象并尝试调用“Add”时，它不起作用。 隐藏,复制Code

<scriptsrc="Dal.js"></script>
<scriptsrc="Customer.js"></script>
    <script>
       var cust = new Customer();
       cust.Add();
    </script>

最后，我们在下面发现了一个错误，即不理解“export”。这是有意义的，因为浏览器不知道任何关键字，如“export”和“require”作为它的标准javascript。 第二个问题是，即使这段代码可以工作，对于大量引用，我仍然会遇到排序问题。假设我们有15个使用模块格式引用的模块，我们将花费半衰期在HTML文件中安排这些序列。如果我们能指着“客户”就太好了。并自动使用“导出”和“导入”对引用进行标识和“地址”。js”加载。 这就是我们需要Javascript模块加载器的地方。模块加载器的例子有SystemJS、WebPack等。 因此，如果我们使用模块加载器，我们只需要指向第一个JS文件，并自动使用“import/require/define”和“exports”，它将获得所有依赖JS文件的引用，并相应地加载它们。 让我们用“SystemJS”来演示一个模块。所以首先转到节点命令提示并安装“systemjs”。 隐藏,复制Code

npm install systemjs

在HTML UI中，我们需要告诉" system "这是要加载的第一个js文件。你可以看到在下面的代码中我们说“SystemJS”。导入“负载”客户。作为第一个文件。 隐藏,复制Code

<scriptsrc="system.js"></script>
    <script>
    
        SystemJS.import('./Customer.js')
        .then(function(module){
                var cust = new module.Customer();
                cust.Add();
        }).catch(function (err)
        { console.error(err); });;
    </script>

一旦文件被加载到then函数中，我们就会得到模块。然后，我们可以引用模块变量，创建“Customer”函数的对象。 如果你查看chrome浏览器的网络标签，你会首先看到“系统”。js“加载”客户。，然后也加载它的引用，即“Dal.js”。 实验五:-使用WebPack理解模块绑定器 Webpack模块绑定:运行时vs编译时 在之前的实验室4中，systemJS在运行时做所有的事情。所以在浏览器中，它首先加载“Customer”。js“然后”地址。等等。如果您有很多依赖项，那么您最终会有很多请求。 在旁边是一个简单的图片，来自一个企业项目，我们有342个JavaScript文件请求来加载网站。 这是一个很大的数字，而且由于请求太多，应用程序的性能会大大下降。 如果我们可以在编译时本身创建一个包，那将是一个很好的性能增强器。 这就是webpack (https://webpack.js.org/)的用途。Webpack是一个模块打包器。 需要的第一个JS文件使用模块定义，如commonjs / AMD / UMD等，找出引用，并在编译时生成一个单一的JS文件。你可以把这个单包JS放到你的网页中。 因此，让我们试着理解Webpack如何工作的基本原理。 步骤1:-安装WebPack 所以第一步是安装webpack。因此，打开node命令提示符并输入下面的NPM命令。请注意，我们使用“-g”作为全球国旗。 隐藏,复制Code

npm install -g webpack

步骤2:—生成一个Bundle 我们使用的代码与我们在“Lab 4”中使用的代码相同。在实验4中，如果你看到我们有“客户”。js Address.js“调用。第一个Javascript文件是“Customer.js”。我们只需要给webpack命令中的第一个JS文件名，最后的bundle文件名。您还可以看到有“-output-library”标志参数。Webpack将向我们公开“CustomerLibrary”组件，我们可以在UI中访问“Customer”类。 隐藏,复制Code

webpack "Customer.js" "Bundle.js" --output-library='CustomerLibrary'

步骤3:-在网页中调用javascript类。 现在我们有了一个单独的包，我们可以在网页中加载JS文件并通过“CustomerLibrary”访问类。请记住，这个“CustomerLibrary”来自命令行，请再次访问步骤2以了解详细信息。 隐藏,复制Code

<scriptsrc="Bundle.js"></script>
    <script>
        var x = new CustomerLibrary.Customer();
        x.Add();
    </script>

如果您现在看到network选项卡，那么您现在只会看到一个单独的文件“Bundle”。与多个文件相比。 ★SystemJS WebPack。当我们学习Angular的时候，我们会首先使用SystemJS，然后在某个实验室里，我们会看到Webpack是如何帮助我们的。 现在我们已经完成了所有的先决条件，是时候开始使用Angular了。从实验6开始实际的角度开始。 下一篇文章是什么? 现在我们已经完成了所有的先决条件，是时候开始使用Angular了。从实验6开始实际的角度开始。要阅读下一个实验室的学习Angular教程从这里开始。 如果你来自孟买，我们非常欢迎你来。我在和这里的研究所周六和周日我在Sakinaka教Angular。孟买的有棱有角的培训 本文转载于：http://www.diyabc.com/frontweb/news17321.html