碼農視角 - Angular 框架起步
開發環境
1、npm
安裝最新的Nodejs，便包含此工具。類似Nuget一樣的東西，不過與Nuget不同的是，這玩意完全是命令行的。然後用npm來安裝開發環境，也就是下邊的angular cli。
2、Angular Cli
通過命令行創建項目，“編譯”代碼，啟動調度環境等功能。angular本身使用typescript編寫，需要通過ng命令，將相關的ts代碼轉換成js代碼，以便在瀏覽器中運行。
安裝angular cli
npm install -g @angular/cli
3、IDE
復雜的界面中，通過IDE可以大大提高開發的效率。官方推薦的IDE有：
Angular IDE by Webclipse
Built first and foremost for Angular. Turnkey setup for beginners; powerful for experts.
IntelliJ IDEA
Capable and Ergonomic Java * IDE
Visual Studio Code
VS Code is a Free, Lightweight Tool for Editing and Debugging Web Apps.
Webstorm
Lightweight yet powerful IDE, perfectly equipped for complex client-side development and server-side development with Node.js
代碼結構
1、程序入口
推薦將啟動代碼放一個單獨的文件裏，比如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‘;
一個承載腳本的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>
2、模塊
模塊可以認為是一個個獨立的ts文件，當然要求這些文件裏有export出來的類型。
3、組件
可以認為是控制器
4、模板
即視圖，可以寫在組件內，也可以單獨的html文件。
調試測試
具體參考：https://angular.io/guide/testing
打包部署
具體參考：https://angular.io/guide/deployment
框架結構
1、模板
2、表單
3、依賴註入
4、Http客戶端
5、測試
6、路由與導航
第三方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.
碼農視角 - Angular 框架起步