ngrx 入门---1、项目构建及无http请求组件实现

最新推荐文章于 2024-01-01 12:58:30 发布

lxhjh

最新推荐文章于 2024-01-01 12:58:30 发布

阅读量395

点赞数

分类专栏：学习资料文章标签： angular ngrx

本文链接：https://blog.csdn.net/lxhjh/article/details/115319626

版权

本文档详细介绍了如何从头开始构建一个Angular应用，包括引入bootstrap、添加ngrx库，以及逐步实现一个计数器组件的普通和ngrx实现。在组件实现过程中，涉及事件绑定、动作(action)、reducer的创建，展示了如何将状态管理应用于Angular应用。

摘要由CSDN通过智能技术生成

ngrx入门

一、创建工程，搭建基本结构

计划：
1、创建一个angular模版的运用程序
2、引用bootstrap
3、引用@ngrx

1、创建工程

ng new pet-tags-ngrx

2、进入工程文件夹

cd pet-tags-ngrx

3、加入bootstrap

npm install bootstrap --save

4、angular.json 引入bootstrap样式

"architect": {
   
        "build": {
   
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
   
            "outputPath": "dist/pet-tags-ngrx",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              "node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": []
          },

5、根组件移入core文件夹

A、在app下添加文件夹core,把app.component的ts、css、html等4个文件移入core文件夹中间。
B、修改app.module.ts中AppComponent的存放位置为

import {
    NgModule } from '@angular/core';
import {
    BrowserModule } from '@angular/platform-browser';

import {
    AppRoutingModule } from './app-routing.module';
import {
    AppComponent } from './core/app.component';

@NgModule({
   
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
    }

6、用ng add方式@ngrx所需要的包

ng add @ngrx/store
ng add @ngrx/store-devtools
ng add @ngrx/effects
ng add @ngrx/router-store

添加之后，package.json文件中，dependencies节点为

"dependencies": {
   
    "@angular/animations": "~11.2.4",
    "@angular/common": "~11.2.4",
    "@angular/compiler": "~11.2.4",
    "@angular/core": "~11.2.4",
    "@angular/forms": "~11.2.4",
    "@angular/platform-browser": "~11.2.4",
    "@angular/platform-browser-dynamic": "~11.2.4",
    "@angular/router": "~11.2.4",
    "@ngrx/effects": "^11.0.1",
    "@ngrx/router-store": "^11.0.1",
    "@ngrx/store": "^11.0.1",
    "@ngrx/store-devtools": "^11.0.1",
    "bootstrap": "^4.6.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.3"
  },

app.module.ts文件也添加好引用

import {
    NgModule } from '@angular/core';
import {
    BrowserModule } from '@angular/platform-browser';

import {
    AppRoutingModule } from './app-routing.module';
import {
    AppComponent } from './core/app.component';
import {
    StoreModule } from '@ngrx/store';
import {
    StoreDevtoolsModule } from '@ngrx/store-devtools';
import {
    environment } from '../environments/environment';
import {
    EffectsModule } from '@ngrx/effects';
import {
    StoreRouterConnectingModule } from '@ngrx/router-store';

@NgModule({
   
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    StoreModule.forRoot({
   }, {
   }),
    StoreDevtoolsModule.instrument({
    maxAge: 25,