スキップしてメイン コンテンツに移動

Create pages with Angular 1

What I did

I created some pages with Angular.
Because I wanted to use on my work, I had to add compatibility of IE11.

The structure of pages

Top page
L Page1
L Page2
L Contents1
L Contents2
* Contents1 and Contents2 were shown and hidden by URL parameter.

Setup

Environments

  • npm : ver.6.13.1
  • Angular : ver.8.2.14
  • Angular-cli : ver.8.3.19
  • VSCode : ver.1.41.0-insider

Create project

ng new product-sample

I didn't add router, and I choosed CSS.

Read configuration file

Angular How-to: Editable Config Files - Premier Developer

First, I added config file.
Most of all things I did were written in the blog.

First, I tried using DI and calling load method in AppConfig's constructor.
But when I had done like that, I couldn't use in the class constructors and ngOnInits what had been depended on AppConfig.
Because at that time, the loading had not been finished yet, so I could get undefined.

app-config.service.ts (failed)


import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { environment } from 'src/environments/environment';
import { ApplicationSettings } from './models/application-settings';

@Injectable({
  providedIn: 'root'
})
export class AppConfig {
  private applicationSettings: AppConfig;

  public get settings(): AppConfig{
    return this.applicationSettings;
  }
  constructor(private http: HttpClient) {}
  public load(){
    const jsonFile = `assets/config.${environment.name}.json`;
    return new Promise<void>((resolve, reject) => {
      this.http.get(jsonFile).toPromise()
        .then((response : AppConfig) => {
          this.applicationSettings = <AppConfig> response;
          resolve();
      }).catch((response: any) => {
         reject(`Could not load file '${jsonFile}': ${JSON.stringify(response)}`);
      });
  });
  }
}

top-page.component.ts (failed)


import { Component, OnInit } from '@angular/core';
import { AppConfig } from '../app-config.service';

@Component({
  selector: 'app-top-page',
  templateUrl: './top-page.component.html',
  styleUrls: ['./top-page.component.css']
})
export class TopPageComponent implements OnInit {

  constructor(private settings: AppConfig) { 
    // undefined
    console.log("constructor " + settings.settings.message);
  }

  ngOnInit() {
    // undefined
    console.log("nginit " + settings.settings.message);
  }
  executeSomeEvent(){
    // OK
    console.log("event " + settings.settings.message);
  }
}

By the provider, loaded the config file first, and then, components' constructors and ngOnInit were called.

app.module.ts


import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { HttpClientModule }    from '@angular/common/http';
import { AppComponent } from './app.component';
import { TopPageComponent } from './top-page/top-page.component';
import { AppConfig } from './app-config.service';

export function initializeApp(settings: AppConfig) {
  return () => settings.load();
}
@NgModule({
  declarations: [
    AppComponent,
    TopPageComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [
    {
      provide: APP_INITIALIZER,
         useFactory: initializeApp,
         deps: [AppConfig], multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
Providers - Angular

Add compatibility of IE11

Show page on IE11

By default, IE11 couldn't show the page of Angular.
According to the issue below, I modified some files.
ng serve/test/e2e does not work with Internet Explorer 11 - Issue #14455 - angular/angular-cli - GitHub

I met a problem because I had not understand I must write my project's name at serve block in angular.json.

angular.json (failed)


"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
      ...
  },
  "configurations": {
    "production": {
     ...
    },
    "es5": {
      "browserTarget": "app:build:es5"
    }
  }
},

angular.json (OK)


"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
      ...
  },
  "configurations": {
    "production": {
     ...
    },
    "es5": {
      "browserTarget": "product-sample:build:es5"
    }
  }
},

I also added the serve command for IE to package.json's scripts.

package.json


{
  "name": "product-sample",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "ngs": "ng serve --configuration es5"
  },
  ...

Use CSS Grid layout

Angular added compatibility of many CSS functions(ex. Flexbox).
But the Grid layout might not be used by default.

top-page.component.html


<div id="grid-frame">
    <div class="cell-title" id="cell-title-1">cell1</div>
    <div class="cell-body" id="cell-body-1">hello</div>
    <div class="cell-title" id="cell-title-2">cell2</div>
    <div class="cell-body" id="cell-body-2">World</div>
</div>

top-page.component.css


#grid-frame{
    height: 30%;
    width: 90%;
    display: grid;
    grid-template-columns: 10% 10%;
    grid-template-rows: 15% 85%;
}
.cell-title{
    background-color: aliceblue;
    border: solid 1px #000000;
    height: 100%;
    width: 100%;
}
.cell-body{
    border: solid 1px #000000;
    height: 100%;
    width: 100%;
}
#cell-title-1{
    grid-column: 1;
    grid-row: 1;
}
#cell-title-2{
    grid-column: 2;
    grid-row: 1;
}
#cell-body-1{
    grid-column: 1;
    grid-row: 2;
}
#cell-body-2{
    grid-column: 2;
    grid-row: 2;
}

The results of Firefox and IE11.

Firefox



IE11



Autoprefixer was used in Augular. But the setting for using Grid layout was missed.
So I had to add it.

top-page.component.css


/* autoprefixer grid: autoplace */
#grid-frame{
    height: 30%;
    width: 90%;
    display: grid;
    grid-template-columns: 10% 10%;
    grid-template-rows: 15% 85%;
}
...
Building and serving Angular apps - Angular

A problem had still been here.
"grid-column" and "grid-row" were ignored by IE11.


So I had to modify the HTML.

top-page.component.html (before)


<div id="grid-frame">
    <div class="cell-title" id="cell-title-1">cell1</div>
    <div class="cell-body" id="cell-body-1">hello</div>
    <div class="cell-title" id="cell-title-2">cell2</div>
    <div class="cell-body" id="cell-body-2">World</div>
</div>

top-page.component.html (after)


<div id="grid-frame">
    <!-- title cells -> body cells -->
    <div class="cell-title" id="cell-title-1">cell1</div>
    <div class="cell-title" id="cell-title-2">cell2</div>
    <div class="cell-body" id="cell-body-1">hello</div>
    <div class="cell-body" id="cell-body-2">World</div>
</div>
I also wanted to use CSS variables. But I hadn't understand how to set for Autoprefixer yet.
Next time, I will add some components.
ラベル:

コメント

コメントを投稿

このブログの人気の投稿

[Angular][ASP.NET Core] Upload chunked files

Intro I wanted to send files to Web application (made by ASP.NET Core). If the file size had been small, I didn't need do any special things. But when I tried to send a large file, the error was occurred by ASP.NET Core's limitation. Though I could change the settings, but I didn't want to do that, because I hadn't known the file sizes what would been actually using. So I splitted the data into chunks first, and sent them. After receiving all chunks, I merged them into one file. There might be some libraries or APIs (ex. Stream API) what did them automatically, but I couldn't find them. What I did [ASP.NET Core] Make CORS enabled [Angular] Split a large file into chunks [Angular][ASP.NET Core] Send and receive data as form data [ASP.NET Core] Merge chunks into one file [ASP.NET Core] Make CORS enabled Because the client side application(Angular) and the server side application(ASP.NET Core) had been separated, I had to make CORS(Cross-Origin Requests) ...
コメントを投稿
続きを読む

[Nest.js] Show static files

Intro I wanted to use Nest.js and WebRTC(node-webrtc). NestJS - A progressive Node.js framework Documentation | NestJS - A progressive Node.js framework And because I wanted to try with simple page(not use JavaScript frameworks), I added static HTML, CSS, JavaScript into a Nest.js project. Prepare Install First, I installed @nestjs/cli. First steps | NestJS - A progressive Node.js framework As same as last time , I couldn't do global install because I had used Volta. But I could installed by volta. volta install @nestjs/cli Create project nest new nest-web-rtc-sample volta pin node@12 Run npm start After doing "npm start", I could getting "Hello World!" from http://localhost:3000. Add static files I could add static files by two ways. @nestjs/serve-static First one of them was using "serve-static". Serve Static | NestJS - A progressive Node.js framework npm install --save @nestjs/serve-static And I needed adding a module into app.modu...
コメントを投稿
続きを読む

[Angular] Sending file with Observable and showing loading screen

Intro When I tried sending file data on last time, I had confused with "promise.then", "async/await" and "Observable". [Angular][ASP.NET Core] Upload chunked files So I wanted to distinct them, and this time, I tried to use "Observable" because HttpClient return Observable<any>. Call observables in order I sended file in these steps. Read file by FileReader Create directory for saving chunks send and saving chunks merge chunks to one file and delete chunks Each steps used the former steps result. So I could write by Promise.then like below. this.executeStep1() // return Promise<UploadResult> .then(result => this.executeStep2(result)) // return Promise<UploadResult> .then(result => this.executeStep3(result)) // return Promise<UploadResult> .catch(reason => console.log(reason)); Result I could write with pipe & flatMap. file-uploader.service.ts public upload(file: File): Observable<U...
コメントを投稿
続きを読む