📅  最后修改于: 2020-10-28 05:03:30        🧑  作者: Mango

PDF版本快速指南资源资源求职讨论区Angular 2是一个开放源代码的JavaScript框架，用于以HTML和JavaScript构建Web应用程序。本教程着眼于Angular 2框架的各个方面，其中包括框架的基础知识，Angular的设置以及如何使用框架的各个方面。本教程中讨论的其他主题是高级章节，例如Angular中的接口，嵌套组件和服务。本教程中还将处理诸如路由，模块和数组之类的主题。听...

📅  最后修改于: 2020-10-28 05:03:47        🧑  作者: Mango

Angular JS是基于JavaScript构建的开源框架。它是由Google开发人员构建的。该框架用于克服使用单页应用程序时遇到的障碍。同样，在构建框架时，测试被视为关键方面。确保了可以轻松测试该框架。该框架的初始版本于2010年10月。Angular 2的功能以下是Angular 2的主要功能-组件-Angular的早期版本以控制器为重点，但现在已将重点改为将组件置于控制器之上。组件有助于将...

📅  最后修改于: 2020-10-28 05:04:21        🧑  作者: Mango

要开始使用Angular 2，您需要安装以下关键组件。Npm-这称为节点程序包管理器，用于与开源存储库一起使用。 Angular JS作为框架具有对其他组件的依赖。npm可用于下载这些依赖项并将它们附加到您的项目中。Git-这是可用于从github角站点获取示例应用程序的源代码软件。编辑器-有许多可用于Angular JS开发的编辑器，例如Visual Studio代码和WebStorm。在我们的...

📅  最后修改于: 2020-10-28 05:05:23        🧑  作者: Mango

有多种方法可以开始您的第一个Angular JS应用程序。一种方法是从头开始做所有事情，这是最困难而不是首选的方法。由于存在许多依赖性，因此很难进行此设置。另一种方法是在Angular Github中使用快速入门。它包含入门所需的代码。通常这是所有开发人员都选择的，这是我们将在Hello World应用程序中显示的内容。最后一种方法是使用Angular CLI。我们将在单独的章节中详细讨论。以下是...

📅  最后修改于: 2020-10-28 05:05:41        🧑  作者: Mango

Angular JS中使用模块在应用程序中放置逻辑边界。因此，您无需将所有内容都编码到一个应用程序中，而是可以将所有内容构建到单独的模块中以分离应用程序的功能。让我们检查一下添加到演示应用程序中的代码。在Visual Studio代码中，转到您的应用程序文件夹中的app.module.ts文件夹。这称为根模块类。以下代码将出现在app.module.ts文件中。让我们详细遍历代码的每一行。impo...

📅  最后修改于: 2020-10-28 05:05:57        🧑  作者: Mango

以下屏幕截图显示了Angular 2应用程序的剖析。每个应用程序都包含组件。每个组件都是应用程序功能的逻辑边界。您需要具有分层的服务，这些服务用于在组件之间共享功能。以下是组件的解剖图。一个组件包括-类-就像一个C++或Java类，由属性和方法组成。元数据-这用于装饰类并扩展类的功能。模板-用于定义在应用程序中显示的HTML视图。以下是一个组件示例。每个应用程序均由模块组成。每个Angular 2...

📅  最后修改于: 2020-10-28 05:06:22        🧑  作者: Mango

组件是Angular JS应用程序的逻辑代码。一个组件包括以下内容-模板-用于呈现应用程序的视图。它包含需要在应用程序中呈现的HTML。这部分还包括绑定和指令。类-就像用任何语言（例如C）定义的类。它包含属性和方法。它具有用于支持视图的代码。它在TypeScript中定义。元数据-这具有为Angular类定义的额外数据。它由装饰器定义。现在让我们转到app.component.ts文件并创建我们的...

📅  最后修改于: 2020-10-28 05:06:38        🧑  作者: Mango

在“组件”一章中，我们已经看到了以下模板的示例。这称为内联模板。还有其他定义模板的方法，可以通过templateURL命令来完成。在组件中使用此方法的最简单方法如下。句法参量viewname-这是应用程序组件模块的名称。在视图名称之后，需要将组件添加到文件名。以下是定义嵌入式模板的步骤。步骤1-创建一个名为app.component.html的文件。这将包含该视图的html代码。步骤2-在上面创建...

📅  最后修改于: 2020-10-28 05:07:01        🧑  作者: Mango

指令是自定义HTML元素，用于扩展HTML的功能。 Angular 2具有以下指令，这些指令作为BrowserModule模块的一部分被调用。ngifngFor如果查看app.module.ts文件，将看到以下代码和已定义的BrowserModule模块。通过定义此模块，您将可以访问2个指令。现在，让我们详细了解每个指令。ngIf如果ngif元素的值为true，则用于将元素添加到HTML代码，否则...

📅  最后修改于: 2020-10-28 05:07:16        🧑  作者: Mango

元数据用于装饰类，以便它可以配置类的预期行为。以下是元数据的不同部分。注释-这些是类级别的装饰器。这是同时具有@Component和@Routes装饰器的数组和示例。以下是一个示例代码，它存在于app.component.ts文件中。组件装饰器用于将app.component.ts文件中的类声明为组件。Design：paramtypes-这些仅用于构造函数，仅应用于Typescript。propM...

📅  最后修改于: 2020-10-28 05:07:43        🧑  作者: Mango

本章将介绍的基本CRUD操作是使用Angular 2从Web服务读取数据。例在此示例中，我们将定义一个数据源，它是产品的简单json文件。接下来，我们将定义一个服务，该服务将用于从json文件中读取数据。接下来，我们将在主app.component.ts文件中使用此服务。步骤1-首先，我们在Visual Studio代码中定义product.json文件。在products.json文件中，输入以...

📅  最后修改于: 2020-10-28 05:07:58        🧑  作者: Mango

Angular 2应用程序可以选择错误处理。这是通过包括ReactJS catch库，然后使用catch函数的。让我们看一下错误处理所需的代码。可以在使用http的CRUD操作的本章顶部添加此代码。在product.service.ts文件中，输入以下代码-catch函数包含错误处理程序函数的链接。在错误处理程序函数，我们将错误发送到控制台。我们还将错误返回给主程序，以便继续执行。现在，每当您遇到...

📅  最后修改于: 2020-10-28 05:08:27        🧑  作者: Mango

路由有助于根据用户在主页上选择的选项将用户定向到不同的页面。因此，基于他们选择的选项，所需的Angular Component将呈现给用户。让我们看一下必要的步骤，以了解如何在Angular 2应用程序中实现路由。步骤1-在index.html文件中添加基本参考标记。步骤2-为应用程序创建两条路由。为此，创建2个名为Inventory.component.ts和product.component....

📅  最后修改于: 2020-10-28 05:08:43        🧑  作者: Mango

在Angular 2中，也可以执行手动导航。以下是步骤。步骤1-将以下代码添加到Inventory.component.ts文件。关于上述程序，需要注意以下几点-声明一个html标记，该标记具有标记为click事件的onBack函数。因此，当用户单击此按钮时，他们将被定向回到“产品”页面。在onBack函数，使用router.navigate导航到所需页面。步骤2-现在，保存所有代码并使用npm运...

📅  最后修改于: 2020-10-28 05:09:02        🧑  作者: Mango

Angular 2也可以使用ngModel指令设计可以使用双向绑定的表单。让我们看看如何实现这一目标。步骤1-创建一个产品模型。创建一个名为products.ts的文件。步骤2-在文件中放置以下代码。这是一个简单的类，具有两个属性productid和productname。步骤3-创建一个名为product-form.component.ts component的产品表单组件，并添加以下代码-关于...