Angular
关注
分享
扫一扫
Angular相关知识
愚公搬代码
《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，优快云博客专家，优快云商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
《近期荣誉》：2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
展开
-
(精华)2020年8月9日 Angular ngrx/store状态管理的使用
Angular中使用ngrx做状态管理简介ngrx/store的灵感来源于Redux，是一款集成RxJS的Angular状态管理库，由Angular的布道者Rob Wormald开发。它和Redux的核心思想相同，但使用RxJS实现观察者模式。它遵循Redux核心原则，但专门为Angular而设计。Angular中的状态管理大部分可以被service接管,那么在一些中大型的项目中,这样做的弊端就会显露出来,其中之一就是状态流混乱,不利于后期维护,后来便借鉴了redux的状态管理模式并配上rxjs流式编原创 2020-08-09 23:09:52 · 519850 阅读 · 9 评论 -
(精华)2020年8月9日 Angular 模块的使用和懒加载
一、Angular 内置模块二、Angular 自定义模块当我们项目比较小的时候可以不用自定义模块。但是当我们项目非常庞大的时候把所有的组 件都挂载到根模块里面不是特别合适。所以这个时候我们就可以自定义模块来组织我们的项 目。并且通过 Angular 自定义模块可以实现路由的懒加载。ng g module mymodule新建一个 user 模块ng g module module/user新建一个 user 模块下的根组件ng g component module/user新建一个 u原创 2020-08-09 23:01:00 · 520054 阅读 · 0 评论 -
(精华)2020年8月6日 Angular 路由的使用
Angular 中的路由一、 Angular 创建一个默认带路由的项目命令创建项目ng new ng-demo --skip-install[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qyw9k4u3-1596728634416)(/pic/01.png)]创建需要的组件ng g component components/homeng g component components/newsng g component components/newsc原创 2020-08-06 23:45:25 · 529045 阅读 · 0 评论 -
(精华)2020年8月6日 Angular axio的封装
import { Injectable } from '@angular/core';import axios from 'axios';import Qs from 'qs';axios.defaults.timeout = 5000;import { environment } from '../../environments/environment';console.log(environment.baseURL);axios.defaults.baseURL = environment原创 2020-08-06 22:38:51 · 528827 阅读 · 1 评论 -
(精华)2020年8月6日 Angular http请求模块的使用
首先模块引入import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import {FormsModule} from '@angular/forms';import { AppRoutingModule } from './app-routing.module';import { AppComponent } from './app.component'原创 2020-08-06 22:16:48 · 528763 阅读 · 0 评论 -
(精华)2020年8月5日 Angular 异步数据流RxJS的使用
import { Component, OnInit } from '@angular/core';import { CommonService } from '../../services/common.service';import { Observable } from 'rxjs';import { map, filter } from 'rxjs/operators';@Component({ selector: 'app-home', templateUrl: './home原创 2020-08-05 23:48:15 · 529575 阅读 · 1 评论 -
(精华)2020年8月4日 Angular 生命周期详解
import { Component, OnInit, Input, EventEmitter } from '@angular/core';// v-on:event = 'getData()'@Component({ selector: 'app-lifecycle', templateUrl: './lifecycle.component.html', styleUrls: ['./lifecycle.component.less'], inputs: ['titleV:tit原创 2020-08-04 23:04:27 · 535246 阅读 · 1 评论 -
(精华)2020年8月4日 Angular 父组件和子组件相互传参
一 ：父组件获取子组件的数据和方法也就是说 子组件给父组件传数据和方法通过ViewChild演示例子：父组件：news子组件：header假如子组件header有个run方法run(){console.log(‘我是header里面的run方法’);}在父组件调用子组件header的run方法在父组件中调用子组件，并给子组件定义一个名称<app-header #header></app-header>在父组件引入ViewChildimport原创 2020-08-04 22:54:13 · 535654 阅读 · 0 评论 -
(精华)2020年8月4日 Angular DOM操作
import { Component, OnInit } from '@angular/core';@Component({ selector: 'app-transition', templateUrl: './transition.component.html', styleUrls: ['./transition.component.less']})export class TransitionComponent implements OnInit { flag: boole原创 2020-08-04 22:24:00 · 535484 阅读 · 0 评论 -
(精华)2020年8月4日 Angular 服务services的使用
ng g services 目录名import { Injectable } from '@angular/core';@Injectable({ providedIn: 'root'})//提供一个可以注册的服务export class StorageService { count: number = 1; constructor() { } //将数据写入localStorage set(key: any, value: any) { localStora原创 2020-08-04 22:17:43 · 535412 阅读 · 0 评论 -
(精华)2020年8月3日 Angular angular.json注解
{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", //angular-cli.json规则文件 "version": 1, // 指明了Angular 工作空间 概要的版本。 "newProjectRoot": "projects",//定义了由CLI创建的新的内部应用和库放置的位置。默认值为`projects` "projects": { //包含了工作空间中所有项目的配置信息。 "angular原创 2020-08-03 09:18:21 · 537068 阅读 · 2 评论 -
(精华)2020年8月2日 Angular 管道,(click),(keydown),(keyup)的使用
<h1>---------------管道-------------</h1>{{today | date:'yyyy-MM-dd HH:mm ss'}}<h1>---------------事件(click)-----------------</h1><button (click)="run()">执行事件</button><button (click)="setData($event)">执行方法改变属性里面的原创 2020-08-02 22:15:47 · 536635 阅读 · 0 评论 -
(精华)2020年8月2日 Angular ngClass,ngStyle的使用
<h1>属性[ngClass]</h1><!-- <div class="red">ngclass</div> --><!-- <div [class] = "{'blue':true,'red':false}">ngclass演示</div> --><div [class]="{'blue':flag,'red':!flag}">ngclass演示</div><!--原创 2020-08-02 22:14:57 · 536553 阅读 · 0 评论 -
(精华)2020年8月2日 Angular *ngFor,*ngIf,ngSwitch的使用
<h1>--------------循环 ngFor---------------</h1><ul> <li *ngFor="let item of list;let key=index">{{key}} -- {{item}}</li></ul><ul> <li *ngFor="let item of list">{{key}} -- {{item}}</li></ul&g原创 2020-08-02 22:14:07 · 536441 阅读 · 0 评论 -
(精华)2020年8月2日 Angular 属性绑定
import { Component, OnInit } from '@angular/core';@Component({ selector: 'app-news', templateUrl: './news.component.html', styleUrls: ['./news.component.less']})export class NewsComponent implements OnInit { //定义普通数据 title:string='我是新闻组件' m原创 2020-08-02 22:13:14 · 536232 阅读 · 0 评论 -
(精华)2020年8月2日 Angular 环境搭建
Angular入门一、Angular介绍Angular是谷歌开发的一款开源的web前端框架，诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。根据项目数统计angular（1.x 、2.x 、4.x、5.x、6.x、7.x 、8.x、9.x）是现在网上使用量最大的框架。Angular基于TypeScript和react、vue相比 Angular更适合中大型企业级项目。关于Angular版本，Angula原创 2020-08-02 21:21:33 · 537476 阅读 · 1 评论