首页 > 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 应用开发带来的收益

选择器是纯函数,它将状态切片(State slice)作为输入参数,并返回组件可以使用的状态数据切片(这些切片包含真正的业务数据)。 正如数据库有自己的 SQL 查询语言一样,Ngrx/store 模块也有自己的查询工具,即选择器。 在 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