2019年9月12日に開催された、Angularを用いたモダンWeb開発セミナーの受講メモです

3 年 ago
韵, 科
1 minute

参加的目的

作为业务系统开发的一部分，收集开发语言/框架信息（2019年版）。

手册研讨会概述

2019/09/12举办的现代Web开发研讨会，以Angular为主题开始。

    • 主な内容

 

    • 　- Angularのこれまでの歴史やその使いどころ

現在の周辺環境からサポート状況確認
Angularを構成する主な要素をAngular CLIをベースにしたデモを交えて解説、およびハンズオン
Angular専用 UI ライブラリIgnite UI for Angular について解説
Angular + Ignite UI for Angularをベースとしたアプリケーション開発をハンズオン形式で体験

我学到的东西

    • 感想として、Anglarで全てをスクラッチ開発するのは厳しい(難易度が高い)と感じた。

 

    • セミナーで紹介していただいた商用UI製品(Ignite)などを活用することが必要そう。

 

    Ignite UIはAnglarに限定せずにWebシステムに導入できそうなので、今後評価／検討をしてみたい。

迷上了道

    • プロキシ問題

自分のNW環境では作業だったため、プロキシ(認証あり)の設定が必要でしたが、事前に以下の案内をいただいていたので設定できました。
参考リンク：[Node.js] npm の proxy と registry 設定

$ npm -g config set proxy http://username:password@prox.example.com:8080
$ npm -g config set https-proxy http://username:password@prox.example.com:8080
$ npm -g config set registry http://registry.npmjs.org/
$ npm config list

ng new my-app時に、gitコマンド実行個所がエラー → GitのPATHを通して再実行

翻译：研讨会目标是什么

理解和掌握SPA和Angular的概述和特点。

    • 最良な開発プラットフォームの選択ができる状態になる

 

    最低限のAngularアーキテクチャをおさえる

单页应用的构造和特点（与传统的Web应用相比）

1. 服务器渲染
ASP.NET，JSP

2. 客户端渲染方法包括MVC、Spring、JSON、XML、Silverlight等。

3. 单页应用
使用 JavaScript 构建应用程序

水疗的好处

    • サーバとクライアントの分離

 

    • JavaScriptアプリの将来的な転用

 

    • UIの柔軟性

 

    • オフライン対応(Service Worker)をはじめとしたPWA

 

    Webコンポーネントとしての部品再利用性

SPA适合/不适合

    • マルチデバイス／マルチブラウザ対応 → 〇

 

    • 静的コンテンツ、Blogなど → ×

 

    • SEO対策 → ×

 

    • RIA(Flash,Silverlight)からの移行 → 〇 (来年でEOS。非常に多い)

 

    開発後、〇年塩漬けしたい → × (WebブラウザVUP対応など必要。Angularのリリースサイクルにも追従必要)

为了顺利更新

    • 常に最新のブラウザやFrameworkの動向をキャッチアップ

 

    • テスト自動化は必須。スクリーンショットの差異のテストなども実現可能

 

    • Frameworkのバージョンアップを阻害しない( 特定バージョンに依存するライブラリを使わない。メンテナンス頻度や依存ライブラリなどを確認する)

 

    ロジックは可能な限りAngular非依存で書く

Angular的历史和现状

2009年，AngularJS是由Google以及个人和企业社群共同开发的。之后发生了一系列变迁，现在已经转变为Angular，并且不再兼容。

开发图像

    • Components → TypeScriptのclass (= JavaScriptのClass)

日付入力部品、情報入力部品など。再利用性のあるものを任意に構成できる

Metadata

メタデータ

Template

View(見た目)の定義

Data binding

処理とDOMをつなげる

Interpolation
Property binding
Event binding
Two-way binding —> 双方向

Service

アプリケーション内における共通的な処理
(例：ログ、認証、通信、その他共通的なロジック)

Dependency Injection(依存性注入)

コンポーネントにクラスのインスタンスを提供
自動的にインスタンス生成
シングルトン

示範

    • ngコマンドでプロジェクト作成

 

    • node_modules —> かなりの数のライブラリ群。npmでインターネット経由で取得

 

    • srcフォルダ —> ソースを書いていく

 

    (codeコマンドでVS Codeを起動)

其他 tā)

Stack Blitz 是一个在线的 VS Code。它可以轻松创建 Angular 的演示环境。

bannerAds