用菜鳥的視角去 認識 Angular 2+ （1. 項目結構）

前言

由於工做的緣由，如今是在使用 Angular6+ 對項目進行開發以及 Angular的 UI 框架進行開發，因此對 Angular 也有了必定的瞭解。 藉此系列文章， 也但願系列文章， 能幫助可能即將使用Angular 的 開發人員，能起到必定的上手的做用， 那就再好不過了。

關於Angular

1. AngularJs !== Angular 2+
2. Angular 2+ 有很好的中文版文檔 www.angular.cn/
3. 基於 Angular 咱們能夠構建適用於全部平臺的應用。好比：Web 應用、移動 Web 應用、移動應用和桌面應用等

爲何用 Angular

1. 因爲所處環境，後端人員較多，且後端人員也在進行前端任務的開發，那Angular的思想，並結合Typescript，使得後端程序員能很快上手並構建前端頁面。
2. Angular是一個真正意義上的框架，全部解決方案都會在Angular裏，例如 http 請求， 表單系統， 路由，動態html 等等。
3. Angular有一套屬於本身的開發節奏和項目結構， 使得在 大型項目裏，可以在很是多人開發的狀況下仍然保持着 結構健全和可維護。

爲何用 Angular

1. 公司在用
2. Angular在配合 Typescript 的靜態檢查 能夠提早知道許多問題所在。這是 JS 作不到的，且 Typescript 與 Angular已是深度交融了
3. 不須要再去 npm 過多的其餘東西 例如 常見的 axios
4. 學習成本對我來講並不高，完成開發級別 其實很容易入手
5. Google 固然也是一大重要緣由
6. 三個框架確定都得玩玩(哈哈哈哈哈哈哈)

安裝Angular

www.angular.cn/cli 請按照文檔進行安裝，能夠說是十分傻瓜了。

部分Angular 項目結構(src裏已經有寫的東西了，不過正好能夠當作看一個在開發的項目)

介紹項目前的必要知識

1. Module 模塊

   官方也有對這個的着重介紹，不少人的博客也會提到NgModule

   這裏我想說說我對Module這個概念的理解：

   例子： 一臺電腦 = 顯示器 + 主機 + 鍵鼠

   Angular視角：

   一臺電腦 = 顯示器模塊 + 主機模塊 + 鍵鼠模塊

   顯示器模塊 = 底座組件(component) + 顯示器屏幕組件(component) + 電線組件(component)

   主機模塊 = 顯卡組件(component) + 操做系統服務(service) + 機箱組件(component) + CPU組件(component) + ...

   鍵鼠模塊 = 鍵盤模塊(Module) + 鼠標模塊(Module)

   鍵盤模塊 = 鍵盤組件(component) + 鏈接線(component)

   鼠標模塊 = 鼠標組件(component) + 鏈接線(component)

   ...

   在個人理解裏 模塊就是把組件、服務和其餘(例如指令,管道)合成一個功能塊。 當我引入這個模塊以後,就能夠使用這個功能塊的功能。

src

固然就是咱們的頁面放的地方啦。

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { WelcomeComponent } from './welcome/welcome.component';
import { RefreshComponent } from './refresh/refresh.component';
import { AlertComponent } from './alert/alert.component';

const routes: Routes = [
{ path: '', component: WelcomeComponent },
{ path: 'layout', loadChildren: './layout/layout.module#LayoutModule' },
{ path: 'refresh', component: RefreshComponent },
{ path: 'alert', component: AlertComponent }
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
複製代碼

我第一次看這個文件

1. routes 使用過 Vue 的就知道， 這是一個路由數組,每一個對象 有 path 路徑, component 天然就是加載的組件
2. : Routes 每一篇Typescript的入門教程 都會講的 類型聲明。
3. loadChildren 翻譯過來就是加載兒子, 推斷一下，應該是加載子集的東西。(是的， 它的做用就是 懶加載 某個子模塊)
4. @NgModule({}) 看不太懂，可是 imports exports 是能理解， 導入了路由， 導出了路由。(實際@NgModule 是一個裝飾器,詳細能夠參見 Typescript裝飾器(不難),也就明白其運做原理了)
5. exports class ..... 導出這個路由模塊

我如今看這個文件

1. 根路由的定義。懶加載與否的設定
2. @NgModule裝飾器給當前 AppRoutingModule 添加了 引入和導出的元數據.
3. RouterModule屬性的路由對象 爲 routes
4. 並導出RouterModule，能給其餘模塊使用

app.component.ts

我第一次看這個文件

1. @Component() 不太懂， 可是selector templateUrl,styleUrls 能夠懂。(@Component也是裝飾器, 給AppComponent添加上面三個屬性)
2. title = 'condee-ui-ng' 對應就是 組件的數據。 Vue 的 data, react 的 state

我如今看這個文件

1.@Component 裝飾器 給 AppComponent 添加了三個元數據,告訴 Angular 到哪裏獲取它須要的主要構造塊，以建立和展現這個組件及其視圖。 並導出了AppComponent。 2. AppComponent 裏 能夠編寫組件本身的靜態屬性。

...

（未完待續）