草庐IT

angular-masonry

全部标签

如何在 Angular 中使用环境变量

简介如果你正在构建一个使用API的应用程序,你会想在开发过程中使用测试环境的API密钥,而在生产环境中使用生产环境的API密钥。在Angular中,你可以通过environment.ts文件创建环境变量。在本教程中,你将学习如何在Angular中使用环境变量。先决条件如果你想跟着本文操作,你需要:一个用于Node.js的本地开发环境。请参考《如何安装Node.js并创建本地开发环境》。本教程已经验证过可以在Nodev16.2.0、npmv7.15.1和@angular/corev12.0.3下运行。检测环境AngularCLI项目已经使用了一个production环境变量,在生产环境下启用生产

Angular入门:简述单元测试排错

零、前言学习Angular的时候,总感觉特别的复杂、高级,以至于产生畏惧心理,这种心理尤其体现在单元测试上。今天被醍醐灌顶之后,感觉单元测试的报错信息也不是那么难看懂了。(文章的后半段是记录我自己的一次单元测试的过程,为了不耽误读者时间,我把结论写在第一小节。)一、分析报错信息启动单元测试后,映入眼帘的是一堆信息:先来看顶部的信息:最上面的一排点···············是整个项目的测试总数,下面的Ran1of58specs是一共58个测试,本次测试启动了一个。下面的1spec,1failure是本次启动的一个测试中,有一个出错了,然后列出了所有报错的测试项,以及错误信息。然后看错误信息:

如何在 Angular 中使用 Flex 布局

介绍FlexLayout是一个组件引擎,允许您使用CSSFlexbox创建页面布局,并提供一组指令供您在模板中使用。该库是用纯TypeScript编写的,因此不需要外部样式表。它还提供了一种在不同断点上指定不同指令以创建响应式布局的方法。在本教程中,您将构建一个示例Angular应用程序,并使用FlexLayout来排列项目。先决条件要完成本教程,您需要:本地安装Node.js,您可以按照《如何安装Node.js并创建本地开发环境》进行操作。一些设置Angular项目和使用Angular组件的基础知识可能会有所帮助。本教程已使用Nodev14.13.1、npmv6.14.8、angularv1

如何在 Angular 中使用变更检测策略

简介默认情况下,Angular2+会在应用程序中的每次变化时对所有组件(从上到下)执行变更检测。变化可以来自用户事件或者从网络请求接收到的数据。变更检测非常高效,但随着应用程序变得更加复杂并且组件数量增加,变更检测将不得不执行越来越多的工作。其中一个解决方案是为特定组件使用OnPush变更检测策略。这将指示Angular仅在向这些组件及其子树传递新引用时才运行变更检测,而不是在数据发生变化时运行变更检测。在本文中,您将学习关于ChangeDetectionStrategy和ChangeDetectorRef。先决条件如果您想跟随本文,您需要:一些熟悉Angular组件可能会有所帮助。本文还涉及

[Angular] 笔记 16:模板驱动表单 - 选择框与选项

油管视频:Select&Option(TemplateDrivenForms)Select&Option在pokemon.ts中新增interface:exportinterfacePokemon{id:number;name:string;type:string;isCool:boolean;isStylish:boolean;acceptTerms:boolean;}//newinterfaceexportinterfacePokemonType{key:number;value:string;}修改pokemon-template-form.component.ts:import{Com

angular2 ngx-cookie获取参考问题

我使用angular2ngx-cookie获取cookie,但我得到了这个问题...Exception:CalltoNodemodulefailedwitherror:ReferenceError:documentisnotdefined这是我的构造函数注入constructor(privatecookie:CookieService){this.cookie.get(".AspNetCore.Identity.Application");}我怎么解决这个问题?看答案当调用构造函数时,通常不会进行初始化。理想情况下,您的构造函数应仅用于实例化变量,并且不应包括任何可能触发异常的逻辑。相反,您应

如何将Angular 4添加到现有Node.js应用程序

我设置了一个node.js应用程序,用于使用Typescript。该应用程序应该在Heroku上部署。Node.js应用程序被设置为诸如AUTH,注册和请求之类的内容。我想知道我需要添加哪些依赖项,以便开始在同一项目中构建Angular4应用程序。我在Github上看到了一个建议的问题nginit但是,这不再是一种选择。ngnew创建一个全新的项目目录,而不是添加依赖项和文件。这里还有另一个问题,OP将他自己的答案标记为正确,基本上说“使用流星”。编辑:我了解如何在本地工作时从node.js应用程序内部使用Angular2+应用程序,只需构建和服务index.ts文件。但是,如何在git中与n

为什么jQuery在Angular 1和Angular 2中不工作?

jQuery没有在Angular1和Angular2中工作。我只是想将简单的jQuery函数藏起来和显示。我正在使用Angular1.5和jQuery3.2$('documment').ready(function(){$('#mydiv').hide();$('#mydiv1').click(function(){$('#mydiv').show();});});看答案您有语法错误,您缺少一个'角色$('#mydiv1)但是,如果您遇到错误,参考:未定义$确保您已按适当的顺序包含Angular和jQuery。如下,

为什么我们不能直接使用Angular中的Console.log?

说我有一个变量,我想在控制台中看到其值。但是在角度,我不能只写{{console.log(variable)}}在我的模板中。我必须在课堂上重新创建此功能,例如:test.component.ts:log(val){console.log(val)}然后,我可以获得价值:test.component.html:{{log(variable)}}那为什么我不能只写{{console.log(variable)}}?看答案因此,在Angular(2/4)中,模板中唯一可以访问的东西是属于相应组件类的范围内的事物。您可以在TS中说“this.blah”。因此,您实际上可以做您建议的事情,但是您需要在

如何在 Angular 中使用 ng2-charts 来使用 Chart.js

介绍Chart.js是一个流行的JavaScript图表库,ng2-charts是Angular2+的一个包装器,用于在Angular中集成Chart.js。在本教程中,您将使用Chart.js和ng2-charts在Angular应用程序中创建示例图表。先决条件要完成本教程,您需要:本地安装了Node.js,您可以按照《如何安装Node.js并创建本地开发环境》中的步骤进行安装。对设置Angular项目和使用Angular组件有一定的了解可能会有所帮助。本教程已使用Nodev14.13.1、npmv6.14.8、angularv10.1.6、chart.jsv2.9.4和ng2-charts