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

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.
ラベル:

コメント

コメントを投稿

このブログの人気の投稿

[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][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] Use WebSocket with ws

Intro Until last time , I had used node-web-rtc to try WebRTC. But because the example was a little complicated for I understood the core functions of using WebRTC. So I look for other frameworks or libraries. PeerJS is a famous library for WebRTC. peers/peerjs: Peer-to-peer data in the browser. - GitHub peers/peerjs-server: Server for PeerJS - GitHub PeerJS - Simple peer-to-peer with WebRTC A problem is I don't know how to integrate to the Nest.js project. I couldn't find examples. So I don't choose at least this time. What shall I choose? According MDN, WebRTC doesn't specify strictly what technology is used on server application for connecting two devices. Signaling and video calling - Web APIs | MDN But in many examples include MDN's one use WebSocket. samples-server/s/webrtc-from-chat at master · mdn/samples-server · GitHub So I try WebSocket in the Nest.js project. Use WebSocket in a Nest.js project Nest.js has a function for using We...
コメントを投稿
続きを読む