diff --git a/samples/BookStore-Angular-MongoDb/angular/package.json b/samples/BookStore-Angular-MongoDb/angular/package.json index 6ca4f5328d..30e57a1741 100644 --- a/samples/BookStore-Angular-MongoDb/angular/package.json +++ b/samples/BookStore-Angular-MongoDb/angular/package.json @@ -1,5 +1,5 @@ { - "name": "my-project-name", + "name": "BookStore", "version": "0.0.0", "scripts": { "ng": "ng", @@ -17,14 +17,14 @@ "@abp/ng.identity": "^0.8.0", "@abp/ng.tenant-management": "^0.8.0", "@abp/ng.theme.basic": "^0.8.0", - "@angular/animations": "~8.1.2", - "@angular/common": "~8.1.2", - "@angular/compiler": "~8.1.2", - "@angular/core": "~8.1.2", - "@angular/forms": "~8.1.2", - "@angular/platform-browser": "~8.1.2", - "@angular/platform-browser-dynamic": "~8.1.2", - "@angular/router": "~8.1.2", + "@angular/animations": "~8.2.0", + "@angular/common": "~8.2.0", + "@angular/compiler": "~8.2.0", + "@angular/core": "~8.2.0", + "@angular/forms": "~8.2.0", + "@angular/platform-browser": "~8.2.0", + "@angular/platform-browser-dynamic": "~8.2.0", + "@angular/router": "~8.2.0", "@angularclass/hmr": "^2.1.3", "@ngxs/devtools-plugin": "^3.5.0", "@ngxs/hmr-plugin": "^3.5.0", @@ -33,10 +33,10 @@ "zone.js": "~0.9.1" }, "devDependencies": { - "@angular-devkit/build-angular": "~0.801.2", - "@angular/cli": "~8.1.2", - "@angular/compiler-cli": "~8.1.2", - "@angular/language-service": "~8.1.2", + "@angular-devkit/build-angular": "~0.802.0", + "@angular/cli": "~8.2.0", + "@angular/compiler-cli": "~8.2.0", + "@angular/language-service": "~8.2.0", "@types/jasmine": "~3.3.8", "@types/jasminewd2": "~2.0.3", "@types/node": "~8.9.4", @@ -48,7 +48,7 @@ "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~2.0.1", "karma-jasmine-html-reporter": "^1.4.0", - "ngxs-schematic": "^1.1.5", + "ngxs-schematic": "^1.1.6", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.15.0", diff --git a/samples/BookStore-Angular-MongoDb/angular/src/app/app-routing.module.ts b/samples/BookStore-Angular-MongoDb/angular/src/app/app-routing.module.ts index ac367f979f..d18817b0f5 100644 --- a/samples/BookStore-Angular-MongoDb/angular/src/app/app-routing.module.ts +++ b/samples/BookStore-Angular-MongoDb/angular/src/app/app-routing.module.ts @@ -6,21 +6,15 @@ import { ABP } from '@abp/ng.core'; import { TENANT_MANAGEMENT_ROUTES } from '@abp/ng.tenant-management'; const routes: Routes = [ - { path: '', redirectTo: '/home', pathMatch: 'full' }, { - path: 'home', + path: '', loadChildren: () => import('./home/home.module').then(m => m.HomeModule), data: { routes: { - name: 'Home', + name: '::Menu:Home', } as ABP.Route, }, }, - { path: 'books', loadChildren: () => import('./books/books.module').then(m => m.BooksModule), data: { - routes: { - name: 'Books', - } as ABP.Route, - }, }, { path: 'account', loadChildren: () => import('./lazy-libs/account-wrapper.module').then(m => m.AccountWrapperModule), @@ -37,8 +31,15 @@ const routes: Routes = [ import('./lazy-libs/tenant-management-wrapper.module').then(m => m.TenantManagementWrapperModule), data: { routes: TENANT_MANAGEMENT_ROUTES }, }, - { path: '**', redirectTo: '/' }, - + { + path: 'books', + loadChildren: () => import('./books/books.module').then(m => m.BooksModule), + data: { + routes: { + name: 'Books', + } as ABP.Route, + }, + }, ]; @NgModule({ diff --git a/samples/BookStore-Angular-MongoDb/angular/src/app/app.component.ts b/samples/BookStore-Angular-MongoDb/angular/src/app/app.component.ts index 6e89cd41a5..bf2a27962a 100644 --- a/samples/BookStore-Angular-MongoDb/angular/src/app/app.component.ts +++ b/samples/BookStore-Angular-MongoDb/angular/src/app/app.component.ts @@ -7,6 +7,4 @@ import { Component } from '@angular/core'; `, }) -export class AppComponent { - title = 'myProjectName'; -} +export class AppComponent {} diff --git a/samples/BookStore-Angular-MongoDb/angular/src/app/app.module.ts b/samples/BookStore-Angular-MongoDb/angular/src/app/app.module.ts index fe0603df3c..d222477028 100644 --- a/samples/BookStore-Angular-MongoDb/angular/src/app/app.module.ts +++ b/samples/BookStore-Angular-MongoDb/angular/src/app/app.module.ts @@ -12,14 +12,12 @@ import { AppComponent } from './app.component'; import { SharedModule } from './shared/shared.module'; import { ThemeSharedModule } from '@abp/ng.theme.shared'; import { BooksState } from './store/states/books.state'; -import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, BrowserAnimationsModule, - HttpClientModule, AppRoutingModule, SharedModule, ThemeSharedModule.forRoot(), diff --git a/samples/BookStore-Angular-MongoDb/angular/src/app/books/books-routing.module.ts b/samples/BookStore-Angular-MongoDb/angular/src/app/books/books-routing.module.ts index 429ac255aa..4d54fc0a71 100644 --- a/samples/BookStore-Angular-MongoDb/angular/src/app/books/books-routing.module.ts +++ b/samples/BookStore-Angular-MongoDb/angular/src/app/books/books-routing.module.ts @@ -1,19 +1,14 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; - -import { BooksComponent } from './books.component'; import { LayoutApplicationComponent } from '@abp/ng.theme.basic'; +import { BooksComponent } from './books.component'; const routes: Routes = [ - { - path: '', - component: LayoutApplicationComponent, - children: [{ path: '', component: BooksComponent }], - }, + { path: '', component: LayoutApplicationComponent, children: [{ path: '', component: BooksComponent }] }, ]; @NgModule({ imports: [RouterModule.forChild(routes)], - exports: [RouterModule] + exports: [RouterModule], }) -export class BooksRoutingModule { } +export class BooksRoutingModule {} diff --git a/samples/BookStore-Angular-MongoDb/angular/src/app/books/books.component.html b/samples/BookStore-Angular-MongoDb/angular/src/app/books/books.component.html index c83bc50050..5be870bad6 100644 --- a/samples/BookStore-Angular-MongoDb/angular/src/app/books/books.component.html +++ b/samples/BookStore-Angular-MongoDb/angular/src/app/books/books.component.html @@ -1 +1,31 @@ -

books works!

+
+
+
+
+
+ Books +
+
+
+
+
+ + + + Book name + Book type + Publish date + Price + + + + + {{ data.name }} + {{ bookType[data.type] }} + {{ data.publishDate | date }} + {{ data.price }} + + + +
+
diff --git a/samples/BookStore-Angular-MongoDb/angular/src/app/books/books.component.ts b/samples/BookStore-Angular-MongoDb/angular/src/app/books/books.component.ts index 5514fc6ad6..880e8dbd75 100644 --- a/samples/BookStore-Angular-MongoDb/angular/src/app/books/books.component.ts +++ b/samples/BookStore-Angular-MongoDb/angular/src/app/books/books.component.ts @@ -1,13 +1,27 @@ -import { Component, OnInit } from "@angular/core"; -import { Store } from "@ngxs/store"; +import { Component, OnInit } from '@angular/core'; +import { Store, Select } from '@ngxs/store'; +import { BooksState } from '../store/states'; +import { Observable } from 'rxjs'; +import { Books } from '../store/models'; +import { BooksGet } from '../store/actions'; @Component({ - selector: "app-books", - templateUrl: "./books.component.html", - styleUrls: ["./books.component.scss"] + selector: 'app-books', + templateUrl: './books.component.html', + styleUrls: ['./books.component.scss'], }) export class BooksComponent implements OnInit { + @Select(BooksState.getBooks) + books$: Observable; + + bookType = Books.Type; + + loading = false; + constructor(private store: Store) {} - ngOnInit() {} + ngOnInit() { + this.loading = true; + this.store.dispatch(new BooksGet()).subscribe(() => (this.loading = false)); + } } diff --git a/samples/BookStore-Angular-MongoDb/angular/src/app/books/books.module.ts b/samples/BookStore-Angular-MongoDb/angular/src/app/books/books.module.ts index 07fd3b1b5c..f7beabbab2 100644 --- a/samples/BookStore-Angular-MongoDb/angular/src/app/books/books.module.ts +++ b/samples/BookStore-Angular-MongoDb/angular/src/app/books/books.module.ts @@ -5,13 +5,8 @@ import { BooksRoutingModule } from './books-routing.module'; import { BooksComponent } from './books.component'; import { SharedModule } from '../shared/shared.module'; - @NgModule({ declarations: [BooksComponent], - imports: [ - CommonModule, - BooksRoutingModule, - SharedModule - ] + imports: [CommonModule, BooksRoutingModule, SharedModule], }) -export class BooksModule { } +export class BooksModule {} diff --git a/samples/BookStore-Angular-MongoDb/angular/src/app/shared/services/books.service.spec.ts b/samples/BookStore-Angular-MongoDb/angular/src/app/books/services/books.service.spec.ts similarity index 100% rename from samples/BookStore-Angular-MongoDb/angular/src/app/shared/services/books.service.spec.ts rename to samples/BookStore-Angular-MongoDb/angular/src/app/books/services/books.service.spec.ts diff --git a/samples/BookStore-Angular-MongoDb/angular/src/app/books/services/books.service.ts b/samples/BookStore-Angular-MongoDb/angular/src/app/books/services/books.service.ts new file mode 100644 index 0000000000..f7c379a359 --- /dev/null +++ b/samples/BookStore-Angular-MongoDb/angular/src/app/books/services/books.service.ts @@ -0,0 +1,20 @@ +import { Injectable } from '@angular/core'; +import { RestService, Rest } from '@abp/ng.core'; +import { Books } from '../../store/models'; +import { Observable } from 'rxjs'; + +@Injectable({ + providedIn: 'root', +}) +export class BooksService { + constructor(private rest: RestService) {} + + get(): Observable { + const request: Rest.Request = { + method: 'GET', + url: '/api/app/book', + }; + + return this.rest.request(request); + } +} diff --git a/samples/BookStore-Angular-MongoDb/angular/src/app/home/home.component.html b/samples/BookStore-Angular-MongoDb/angular/src/app/home/home.component.html index ca2ebda8c5..5f16712b31 100644 --- a/samples/BookStore-Angular-MongoDb/angular/src/app/home/home.component.html +++ b/samples/BookStore-Angular-MongoDb/angular/src/app/home/home.component.html @@ -1,9 +1,8 @@
-
Welcome
+
{{ '::Welcome' | abpLocalization }}

- Welcome to the application. This is a startup project based on the ABP framework. For more information, visit - abp.io. + {{ '::LongWelcomeMessage' | abpLocalization }}

; + + export interface Item { + name: string; + type: Type; + publishDate: string; + price: number; + lastModificationTime: string; + lastModifierId: string; + creationTime: string; + creatorId: string; + id: string; + } + + export enum Type { + Undefined, + Adventure, + Biography, + Dystopia, + Fantastic, + Horror, + Science, + ScienceFiction, + Poetry, } } diff --git a/samples/BookStore-Angular-MongoDb/angular/src/app/store/states/books.state.ts b/samples/BookStore-Angular-MongoDb/angular/src/app/store/states/books.state.ts index 066bfa2faf..96443006a3 100644 --- a/samples/BookStore-Angular-MongoDb/angular/src/app/store/states/books.state.ts +++ b/samples/BookStore-Angular-MongoDb/angular/src/app/store/states/books.state.ts @@ -1,27 +1,29 @@ -import { State, Action, StateContext } from "@ngxs/store"; -import { BooksGet } from "../actions/books.actions"; -import { Books } from "../models/books"; -import { BooksService } from "src/app/shared/services/books.service"; -import { tap } from "rxjs/operators"; +import { State, Action, StateContext, Selector } from '@ngxs/store'; +import { BooksGet } from '../actions/books.actions'; +import { Books } from '../models/books'; +import { BooksService } from '../../books/services/books.service'; +import { tap } from 'rxjs/operators'; @State({ - name: "BooksState", - defaults: {} as Books.State + name: 'BooksState', + defaults: { data: {} } as Books.State, }) export class BooksState { + @Selector() + static getBooks({ data }: Books.State) { + return data.items || []; + } + constructor(private booksService: BooksService) {} @Action(BooksGet) - booksAction( - { getState, patchState }: StateContext, - { payload }: BooksGet - ) { + getBooks({ patchState }: StateContext) { return this.booksService.get().pipe( tap(data => { patchState({ - data + data, }); - }) + }), ); } } diff --git a/templates/app/angular/package.json b/templates/app/angular/package.json index d9445dbf96..3696fec874 100644 --- a/templates/app/angular/package.json +++ b/templates/app/angular/package.json @@ -1,5 +1,5 @@ { - "name": "my-project-name", + "name": "MyProjectName", "version": "0.0.0", "scripts": { "ng": "ng", @@ -48,7 +48,7 @@ "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~2.0.1", "karma-jasmine-html-reporter": "^1.4.0", - "ngxs-schematic": "^1.1.5", + "ngxs-schematic": "^1.1.6", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.15.0", diff --git a/templates/app/angular/src/app/app-routing.module.ts b/templates/app/angular/src/app/app-routing.module.ts index 55a082d813..eac8712bad 100644 --- a/templates/app/angular/src/app/app-routing.module.ts +++ b/templates/app/angular/src/app/app-routing.module.ts @@ -31,7 +31,6 @@ const routes: Routes = [ import('./lazy-libs/tenant-management-wrapper.module').then(m => m.TenantManagementWrapperModule), data: { routes: TENANT_MANAGEMENT_ROUTES }, }, - { path: '**', redirectTo: '/' }, ]; @NgModule({ diff --git a/templates/app/angular/src/app/shared/shared.module.ts b/templates/app/angular/src/app/shared/shared.module.ts index 90dc61005a..6bae4ea332 100644 --- a/templates/app/angular/src/app/shared/shared.module.ts +++ b/templates/app/angular/src/app/shared/shared.module.ts @@ -1,12 +1,14 @@ -import { NgModule } from '@angular/core'; -import { ThemeSharedModule } from '@abp/ng.theme.shared'; import { CoreModule } from '@abp/ng.core'; +import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'; +import { NgModule } from '@angular/core'; import { ThemeBasicModule } from '@abp/ng.theme.basic'; +import { ThemeSharedModule } from '@abp/ng.theme.shared'; +import { TableModule } from 'primeng/table'; @NgModule({ declarations: [], - imports: [CoreModule, ThemeSharedModule, ThemeBasicModule], - exports: [CoreModule, ThemeSharedModule, ThemeBasicModule], + imports: [CoreModule, ThemeSharedModule, ThemeBasicModule, TableModule, NgbDropdownModule], + exports: [CoreModule, ThemeSharedModule, ThemeBasicModule, TableModule, NgbDropdownModule], providers: [], }) export class SharedModule {}