Angular
Star Zheng
持续学习者
展开
-
Angular 集成 Editor.md 实现 Markdown 编辑功能
最近,尝试在 Angular 项目中实现 Markdown 编辑功能。在网上搜索了一番之后,决定使用 Editor.md 插件来实现 Markdown 编辑功能。 Editor.md 功能比较丰富,但是文档不是很友好。示列地址:https://github.com/yifanzheng/ngx-markdown-editor使用首先,下载 Editor.md 文件,放到 assets 目录下。使用 npm 下载 jquery。npm install jquery在 angular原创 2020-11-16 22:22:54 · 851 阅读 · 2 评论 -
Angular: Program ng failed to run No application is associated
Program ng failed to run No application is associated今天,搭建 Angular CLI 框架的时候,遇见了一个奇怪的问题。当我将 Angular CLI 搭建完成以后, 我在 Windows PowerShell 和命令提示符上输入 ng 命令是工作正常的,但在 VSCode PowerShell 上却失败。问题描述当我在 VSCode PowerShell 上输入 ng 命令时出现如下错误。Program 'ng' failed to run:原创 2020-10-22 21:24:40 · 661 阅读 · 0 评论 -
Angular: ‘ng’ is not recognized as an internal or external command, operable program or batch file
无法将“ ng”识别为内部或外部命令,可操作程序或批处理文件问题说明安装Angular CLI后无法识别ng命令。无法将“ ng”识别为内部或外部命令,可操作程序或批处理文件。要么无法将术语“ ng”识别为cmdlet的名称解析度我发现此错误是由于本地计算机中Angular CLI的不正确安装或配置引起的。以下是我如何解决此问题的方法。解决问题的步骤提供以下修补程序之前,请确保在Node.js命令提示符下运行以下命令ng –version如果有效,则一切就绪!如果问题仍然存在,请查看原创 2020-10-22 21:17:09 · 5608 阅读 · 1 评论 -
Angular:使用 [@Directive] 自定义指令
指令介绍在 Angular 中有三种类型的指令:组件,有模板的指令,组件是继承于指令的,只是扩展类与 UI 相关的属性。属性型指令,改变 DOM 元素、组件或其他指令的行为和外观的指令。如,NgStyle、NgClass。结构型指令,通过添加或移除 DOM 元素改变 DOM 布局的指令。如,NgIf、NgFor。然而,在实际的开发中,根据业务的需要,我们经常会拓展 Ang...原创 2020-03-09 16:56:30 · 3748 阅读 · 1 评论 -
在 VS Code 中调试 Angular 程序
准备工具在 VS Code 中安装 Debugger for Chrome 插件。配置 lanch.json{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information,...原创 2020-03-06 22:14:17 · 568 阅读 · 1 评论 -
Angular: [ControlValueAccessor] 自定义表单控件
Angular: [ControlValueAccessor] 自定义表单控件我们在实际开发中,通常会遇到各种各样的定制化功能,会遇到有些组件会与 Angular 的表单进行交互,这时候我们一般会从外部传入一个 FormGroup 对象,然后在组件的内部写相应的逻辑对 Angular 表单进行操作。如果我们只是对表单中的一个项进行定制,将整个表单对象传入显然不合适,并且组件也会显得臃肿。<...原创 2019-09-29 20:53:55 · 2559 阅读 · 1 评论 -
Angular 学习(十):Angular 表单
Angular的表单什么是模板式表单表单的数据模型是通过组件模板中的相关指令来定义的, 因为使用这种方式定义表单的数据模型时, 我们会受限于HTML的语法, 所以模板驱动方式只适合用于一些简单的场景。什么是响应式表单响应式表单提供了一种模型驱动的方式来处理表单输入, 其中的值会随时间而变化。 使用响应式表单时, 通过编写TypeScript代码而不是Html代码来创建一个底层的数据模型, ...原创 2019-07-11 21:52:10 · 670 阅读 · 0 评论 -
Angular 学习(十一):Angular 通讯服务
Angular的通讯服务使用Nodejs创建简单Web服务器初始化项目npm init -y : 创建一个包含默认配置的package.json文件。npm install --save @types/node: 安装node的Typescript的类型定义文件,使用Typescript语言进行开发。由于Node本身是不认识Typescript的,故需要Typescript编译成Jav...原创 2019-07-15 16:50:52 · 328 阅读 · 0 评论 -
Angular 学习(九):Angular 组件生命周期钩子
Angular的组件生命周期钩子其中,红色标记的生命周期钩子只调用一次,绿色部分会被反复调用,执行顺序依次由上而下。ngOnChanges当Angular设置数据绑定输入属性发生变化时响应,只对输入的不可变对象起作用。ngOnInit在第一次 ngOnChanges 执行之后调用,并且只被调用一次。它主要用于执行组件的其它初始化操作或获取组件输入的属性值。ngDoCheck组件的输...原创 2019-06-24 20:41:08 · 2051 阅读 · 0 评论 -
Angular 学习(八):Angular 组件间的通讯
Angular组件间的通讯输入属性 @Input()@Input()value: string;@Input属性绑定是单向的,父组件的属性变化会影响子组件的属性变化,子组件的属性变化不会反过来影响父组件的的属性变化。输出属性 @Output() @Output() value: EventEmitter<any> = new EventEmitter(); // 声明输...原创 2019-06-24 20:38:31 · 1855 阅读 · 4 评论 -
Angular 学习(七):模板语法
Angular数据绑定HTML属性与DOM属性关系少量的HTML属性与DOM属性之间有着一对一的映射关系,如id;有些HTML属性没有对应的DOM属性,如colspan;有些DOM属性没有对应的HTML属性,如textContent;就算名字相同,HTML属性和DOM属性也不是同一样东西;HTML属性的值指定了初始值,DOM属性的值表示当前值;HTML属性的值不可改变,DOM属性的值...原创 2019-06-24 20:36:31 · 1354 阅读 · 0 评论 -
Angular 学习(六):Angular 依赖注入模式
Angular 的依赖注入模式依赖注入: Dependency Injection 简称 DI依赖注入模式要解决的问题开发中,会经常遇见对象的实例化,当多个对象之间存在依赖时,手工实例化会特别麻烦。如果一个对象A要依赖对象B,那么对象A不需要明确地去实例化B对象,B会由外部机制注入进来,对象A只需要声明一个B对象就行。这就是依赖注入要解决的问题。与依赖注入经常同时出现的另一个概率叫做控制...原创 2019-06-24 20:33:49 · 960 阅读 · 0 评论 -
Angular 学习(五):Angular 路由(Route)
Angular路由(Route)可以将路由器理解成控制整个应用状态的视图对象,每个应用都有一个路由器;路由器的另一个作用是为每个视图分配唯一的url,可以利用这个url使应用之间跳转到某一个特定的视图状态。单页应用其实就是一个视图状态的集合。单页应用(SPA)一个单页应用是主页面只加载一次,不再重复刷新,只是改变页面部分内容的应用。Angular应用就是单页应用,在Angular中,使用路由...原创 2019-06-24 20:25:12 · 13058 阅读 · 0 评论 -
Angular 学习(四):Angular 组件(Component)
Angular组件(Component)组件(Component) 是构成Angular应用的基础和核心。通俗来说,组件用来包装特定的功能,应用程序的有序运行依赖于组件之间的协调工作。Component必备元素@Component(组件元数据装饰器)@Component装饰器的作用是告知Angular框架如何处理Typescript类,它包含多个属性,这些属性的值叫作元数据。Ang...原创 2019-06-24 20:14:17 · 4073 阅读 · 0 评论 -
Angular 学习(三):Angular 模块(NgModule)
Angular模块(NgModule)Angular 应用是模块化的,它拥有自己的模块化系统,称作 NgModule。 一个 NgModule 就是一个容器,用于存放一些内聚的代码块,这些代码块专注于某个应用领域、某个工作流或一组紧密相关的功能。 它可以包含一些组件、服务提供商或其它代码文件,其作用域由包含它们的 NgModule 定义。 它还可以导入一些由其它模块中导出的功能,并导出一些指定...原创 2019-06-24 20:10:45 · 1489 阅读 · 0 评论 -
Angular 学习(二):Angular 简介
Angular简介一、Angular介绍在介绍Angular之前,需要介绍一下Angular的前身AngularJS。AngularJS1、特性模板功能强大丰富 如:数据双向绑定;比较完善的前端MVC框架,包含模板、数据双向绑定、服务、路由、依赖注入、模块化、过滤器等;引入了Java的一些概念,如依赖注入、单元测试等,可以很容易地编写可复用的代码;2、存在的问题性能问题...原创 2019-06-24 19:53:58 · 1250 阅读 · 0 评论 -
Angular 学习(一):Angular 开发环境准备与搭建
Angular的开发环境准备与搭建一、开发环境准备安装NodeJs下载:https://nodejs.org/dist/v10.15.3/node-v10.15.3-x64.msi安装Python,版本选择2.7.x(如果是python3以上的,可能会影响node插件的安装)下载:http://www.python.org/ftp/python/2.7.3/python-2...原创 2019-06-24 19:46:47 · 1015 阅读 · 0 评论