碼農視角 - Angular 框架起步

時間 2019-11-12

標籤視角 angular 框架起步欄目 AngularJS 简体版

原文原文鏈接

開發環境

一、npmhtml

安裝最新的Nodejs，便包含此工具。相似Nuget同樣的東西，不過與Nuget不一樣的是，這玩意徹底是命令行的。而後用npm來安裝開發環境，也就是下邊的angular cli。web

二、Angular Clitypescript

經過命令行建立項目，「編譯」代碼，啓動調度環境等功能。angular自己使用typescript編寫，須要經過ng命令，將相關的ts代碼轉換成js代碼，以便在瀏覽器中運行。npm

安裝angular clibootstrap

npm install -g @angular/cli

三、IDE瀏覽器

複雜的界面中，經過IDE能夠大大提升開發的效率。官方推薦的IDE有：app

Angular IDE by Webclipse
Built first and foremost for Angular. Turnkey setup for beginners; powerful for experts.框架

IntelliJ IDEA
Capable and Ergonomic Java * IDEwebstorm

Visual Studio Code
VS Code is a Free, Lightweight Tool for Editing and Debugging Web Apps.ide

Webstorm
Lightweight yet powerful IDE, perfectly equipped for complex client-side development and server-side development with Node.js

代碼結構

一、程序入口

推薦將啓動代碼放一個單獨的文件裏，好比main.ts。經過ng new 命令建立的項目文件裏main.js內容以下：

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule);

一個承載腳本的HTML頁面:index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Test2</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

二、模塊

模塊能夠認爲是一個個獨立的ts文件，固然要求這些文件裏有export出來的類型。

三、組件

能夠認爲是控制器

四、模板

即視圖，能夠寫在組件內，也能夠單獨的html文件。

調試測試

具體參考：https://angular.io/guide/testing

打包部署

ng build

具體參考：https://angular.io/guide/deployment

框架結構

一、模板

二、表單

三、依賴注入

四、Http客戶端

五、測試

六、路由與導航

第三方UI組件

ag-Grid

A datagrid for Angular with enterprise style features such as sorting, filtering, custom rendering, editing, grouping, aggregation and pivoting.

Amexio - Angular Extensions

Amexio (Angular MetaMagic EXtensions for Inputs and Outputs) is a rich set of Angular components powered by Bootstrap for Responsive Design. UI Components include Standard Form Components, Data Grids, Tree Grids, Tabs etc. Open Source (Apache 2 License) & Free and backed by MetaMagic Global Inc

Angular Material 2

Material Design components for Angular

Clarity Design System

UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional experiences

DevExtreme

50+ UI components including data grid, pivot grid, scheduler, charts, editors, maps and other multi-purpose controls for creating highly responsive web applications for touch devices and traditional desktops.

jQWidgets

Angular UI Components including Grids, Charts, Scheduling and more.

Kendo UI

One of the first major UI frameworks to support Angular

ng-bootstrap

The Angular version of the Angular UI Bootstrap library. This library is being built from scratch in Typescript using the Bootstrap 4 CSS framework.

ng-lightning

Native Angular components & directives for Lightning Design System

ngx-bootstrap

Native Angular directives for Bootstrap

Onsen UI

UI components for hybrid mobile apps with bindings for both Angular & AngularJS.

Prime Faces

PrimeNG is a collection of rich UI components for Angular

Semantic UI

UI components for Angular using Semantic UI

Vaadin

Material design inspired UI components for building great web apps. For mobile and desktop.

Wijmo

High-performance UI controls with the most complete Angular support available. Wijmo’s controls are all written in TypeScript and have zero dependencies. FlexGrid control includes full declarative markup, including cell templates.