Angular

首页 > TAG信息列表 > Angular

开发高效可靠 Web 应用程序的 Angular 最佳实践

Google创建的使用JavaScript的Angular框架在开发Web应用程序时非常流行。AngularJS框架已经完全重写，Angular专门用于创建动态编程结构。Angular 允许开发人员通过其强大的功能和全面的生态系统创建干净、可维护且高性能的应用程序。模块、组件、元数据、模板、数据绑定、服务、指令

突破 Angular 的反应限制：路由器和组件存储

在命令性应用中，事件触发事件处理程序，这些处理程序是命令性代码的容器。不幸的是，这似乎是 Angular 应用程序中最常见的方法。典型的应用可能具有如下功能： navigateBack() { this.store.deleteMovies(); this.store.switchFlag(false); this.router.navigate(['/']

如何在 Angular 中使用 ngTemplateOutlet 与示例

在 Angular 中，我们使用 ngTemplateOutlet 指令将外部模板插入到组件的视图中。这个强大的功能使我们能够重用模板并保持代码干燥。ngTemplateOutlet 指令将模板引用作为其输入。此模板引用可以是组件模板中声明的局部变量，也可以是对外部模板的引用。无论哪种情况，ngTemplateOutlet

angular设置网络请求超时时间

angular5之后使用pipe this.http.get('url') .pipe( timeout(1000), catchError(e => { return of(null); }) ).toPromise().then( res => { //成功 }).catch(e => { //报错 );

angular开发环境的配置

因为之前学习过一段时间的angular后停滞了，node.js 、angular 和npm版本都停留在了一个较低版本，所以索性地全部卸装后重装了一遍一、Angular CLI 1、卸装Angular CLI npm uninstall -g angular-cli npm cache clean 如果提示使用npm cache verify删除,可能删除不成功，使用强制删

React 中的 ngIf(Angular) 和 v-if (Vue) 替代方案

React 中的 ngIf(Angular) 和 v-if (Vue) 替代方案在 Angular 或 Vue 中，您可以使用指令有条件地渲染组件，例如动图和 v-如果 .但是在 React 中没有指令的概念，你必须使用下面的语法来渲染组件返回（ <> {加载？ <></> ：<EmployeeList/> } 登录。 </> ); } 但是，如果

angular如何引用其他组件

原文链接：angular如何引用其他组件 – 每天进步一点点 (longkui.site) 0.背景前面一篇文章，简单介绍过angular创建并引用组件。在实际情况开发中，情况会稍微复杂一些，今天这篇文章就简单介绍一下，稍微复杂一点组件引用。场景：在一个组件内，切换多个组件。组件一：city（带

Angular Material实现typeahead简单示例

前言项目中需要一个输入提示框, 之前是使用ng-bootstrap实现的. 但是由于系统框架完全迁移到了material design. 所以所有bootstrap的依赖项都要迁移到angular material design. 如果您的web表单有一个包含许多选项的下拉列表，那么您可能希望通过提前键入来简化用户的生活。幸运的

angular父子组件方法互调方案

父组件调用子组件不写了上地址 https://blog.csdn.net/xuehu837769474/article/details/80072556 子组件调用父组件先了解组件之间的交互 https://angular.cn/guide/component-interaction 父组件html, hero 是父组件向子组件传书的参数 <app-child #child1 [hero]="phero">

测试 SAP 电商云 Spartacus UI 3.4.x 和 4.3.x 的 guest checkout 功能

按照这个链接的步骤安装。新建一个 Angular 应用，取名 mystore，待所有 package 安装完毕后： ng new mystore --style=scss 进入 mystore 文件夹，使用命令行：ng add @spartacus/schematics@3.4 遇到错误消息： Cannot find module '@angular-devkit/core/src/terminal' 原因是我使

关于 SAP 电商云 Spartacus UI 里 Router 模块的 forRoot 方法

默认路由的配置数据定义在 default-routing-config.ts 文件内：一些例子： login: { paths: ['login'], protected: false, authFlow: true, }, register: { paths: ['login/register'], protected: false, authFlow: true, }, RoutingModule

Angular 里的 Service Worker

从 5.0.0 版本开始，Angular 附带了一个 Service Worker 实现。 Angular 开发人员可以利用这个 service worker 并从其提供的更高的可靠性和性能中受益，而无需针对低级 API 编写代码。这个实现就是 SAP 电商云 Spartacus UI package.json 中提到的依赖 @angular/pwa： Angular 的 Ser

Angular Ngrx store 里的 Selector 介绍

选择器是纯函数，它将状态切片(State slice)作为输入参数，并返回组件可以使用的状态数据切片(这些切片包含真正的业务数据)。正如数据库有自己的 SQL 查询语言一样，Ngrx/store 模块也有自己的查询工具，即选择器。在 Angular 应用程序中，每个功能模块负责将自己的状态注入到根应用程序

Angular Ngrx 里 Store 和 State 的关系

NgRx 是一组用于响应式扩展和状态管理的 Angular 库。通过简化应用程序在对象中的状态并强制执行单向数据流，它使 Angular 开发中的状态管理更容易。一个完整的状态管理系统应该使开发人员能够对状态进行建模——例如，创建状态应该是什么样子的简单表示，更新其值，在值更改时监视状态

什么是 Angular Ngrx Store 里的 Meta-Reducer

本文选择了 Angular 团队提供的官方 Heroes Angular 应用程序作为起始应用程序来展示 Angular 的特性。为了展示 ngrx/store 模块在处理 Angular Feature 模块方面的强大功能，我不得不通过引入一个名为 Heroes 的新 Feature 模块来重构一些 Heroes 应用程序。该模块现在包含所有与

关于 SAP 电商云 Spartacus UI Transfer State 冗余 API 请求发送的讨论

Angular 的 TransferState 类使服务器端渲染 (SSR) 和预渲染 (Prerendered-SSR) Angular 应用程序能够使用从服务器获取的数据并且有效地在浏览器中渲染。如果您使用的是 SSR 或预渲染应用程序策略，那么该过程大致是这样的：在服务器上预渲染或渲染应用程序浏览器获取呈现的 HTML

Angular 应用里几种 Component 的分类阐述

Angular 组件架构可以通过充分利用 Angular（@Input() 和 @Output()）和 ngrx/store（dispatch() 和 select() 方法）的内在特性来使 Angular 应用程序受益。上图的体系架构里，我们观察到了两种类型的 Component： Smart(有时也称为 Container) Dummy(有时也称为 Presentational) Contain

使用 NgRX Store Module 给 Angular 应用开发带来的收益

在 NgModule 里通过依赖注入的方式注册服务实例

下面是在 NgModule 中注册一个 service 的典型例子。 import { NgModule } from '@angular/core'; import { AuthService } from './auth.service'; @NgModule({ providers: [AuthService], }) class ExampleModule {} 上面的代码，因为 provide 和 useClass 属性值都相同，所以

五分钟理解Angular的整体架构

尽管现在被称为Angular5，实际上它只是这个诞生于2012年的前端框架的的第四个版本. 看起来差不多半年就发布一个新版本，不过实际上从重写的版本2开始，开发接口与核心思想就稳定下来了，并基本保持着与前序版本的兼容性。我们看官方文档的时候,上面介绍一大堆, 如果你不是深入实践的

Angular 如何搭建本地开发环境

1. 前提条件在安装Angular之前，需要先安装NodeJS和npm。这里需要注意的是， Angular对NodeJS是有版本配置要求的。如何知道在指定的Angular版本下，应该安装哪个版本的NodeJS了？第一：首先要知道，我们准备安装哪个版本的Angular ，一般情况下安装稳定的版本就行了，具体版本信息可以查看 Rel

Angular学习笔记

（）内为自己理解，可能有误，草稿流，长期更新 0. 架构 1. 模块（module）：执行一个任务的简单代码。（类似于一个函数）一定要有根模块，命名为：Appmoudle.ts，其中要有@NgMoudle的装饰类（给函数增加额外功能），包含declarations（包含什么，函数、页面声明？），exports（导出的），imports，providers，bootstrap（根组件，main函

关于 Angular 应用 Module 的 forRoot 方法的讨论

在 Angular 开发中，我们经常遇到一个 NgModule 在导入时需要调用它的静态 forRoot 方法。，最值得注意的例子是 RouterModule. 当在 Angular 应用的根目录注册这个模块时，导入RouterModule的方式如下: import { RouterModule, Routes } from '@angular/router'; const routes: Routes

关于 Angular 应用 Components 和 Directives 的实例化问题

同 Angular Module 不同，Angular Components 和 Directives 要实例化多次，每个出现在 HTML template 中的 markup 都会对应一次实例化。此外，这些项的作用域也限定在它们被导入的 NgModule中，以防止两个组件使用相同的选择器时发生命名冲突。由于依赖注入(DI)行为的这种差异，需要区分

关于 index.ts 在大型 Angular 项目中的应用

对于 Angular来说，模块(module)是一个容器/包(container/package)，用来存放各种组件、引用其他模块、提供依赖注入等。 index.ts (Barrel file)是一种将多个模块的导出汇总到单个方便模块的方法。index.ts 本身是一个模块文件，它重新导出其他模块的选定导出。一个例子如下： index.ts