初識Angular

文章首發於公衆號：Plus技術棧

初識Angular

Angular 誕生於2009年，由Misko Hevery 等人建立，後爲Google所收購。是一款優秀的前端框架。從09年到今天，發展了十年，Angular的整個生態仍是比較成熟的。

Angular分爲Angular1(也叫AngularJS)和**Angular2+**的版本，Angular2及之後Angular四、5等版本都是基於TypeScript語言，而Angular1是基於JavaScript語言，這兩種版本的Angular徹底能夠當作兩個框架。

在本專欄中將使用最新基於TypeScript的Angular7。TypeScript是JavaScript的超集，語法有點像是前端的Java。學起來也是挺簡單。TS的語法就很少作介紹了，你們能夠去官方文檔看一看，中文官方文檔見此。

在本篇中，我將帶大家搭建一個最簡單Angular編譯運行環境，建立一個工程，達到能訪問的效果。

新建工程

Angular官方文檔 英文好的同窗建議看看。

在安裝Angular以前，須要先安裝Node.js，Angular要求Node.js的版本爲8.x或者10.x。這裏請你們自行安裝，安裝完成後使用node -v命令查看版本。安裝node的同時也會安裝npm這個包管理器，咱們將經過npm命令安裝Angular。

Step1

任意目錄下執行如下命令，安裝angular cli。

npm install -g @angular/cli
複製代碼

Step2

找一個目錄，建立Angular工程，指定工程名(如my-app)。

ng new my-app
複製代碼

默承認以連續按兩個回車。在安裝了angular cli以後，咱們可使用不少ng的命令。

Step3

啓動這個新建的工程

cd my-app
ng serve --open
複製代碼

ng serve命令啓動angular服務，同時監聽你的文件改動，一旦發生變化，工程就會馬上從新編譯，達到實時刷新的效果。這稱之爲熱部署。

--open或者-o選項會自動打開瀏覽器http://localhost:4200/

此時能夠訪問上述網址，看到Angular的歡迎界面。

工程分析

my-app/
├── angular.json           本工程的一些配置
├── e2e                    自動化測試目錄
├── node_modules           第三方依賴包存放目錄
├── package.json           npm工具的配置文件，這裏列出了本工程依賴的第三方包
├── package-lock.json      package.json的補充文件
├── README.md              說明文件
├── src                    代碼目錄
├── tsconfig.json          TypeScript的配置文件
└── tslint.json            tslint的配置文件，定義了TypeScript代碼質量檢查規則，不用管

3 directories, 6 files
複製代碼

my-app的目錄如上所示。其餘暫時不用管。

在my-app目錄下咱們能夠執行一些npm的命令，這些命令在package.json中有列出。

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
 },
複製代碼

好比，npm run start就是執行ng -serve。若是想在啓動的時候指定端口爲8080，能夠這樣修改：

"start": "ng serve --port 8080",
複製代碼

因此執行npm run start也能夠啓動Angular服務。

瞭解了Angular工程的一些啓動配置後，再看看代碼。

在瀏覽器打開默認的網址http://localhost:4200/所展現的頁面html寫在my-app/src/app/app.component.html中。

Angular2之後是基於component(組件)的架構。咱們在my-app/src/app/下輸入

ng generate component example
複製代碼

能夠看到生成了4個文件，並更新了app.module.ts。能夠知道Angular中的一個componet包含了：

example/
├── example.component.css
├── example.component.html
├── example.component.spec.ts
└── example.component.ts

0 directories, 4 files
複製代碼

To Be Continue

上面只是簡單的講了講Angular的環境搭建，那麼有了這樣一個搭好的工程，如何修改若是實現咱們本身想要的頁面呢。這裏推薦你們去看一下Angular官方教程，它裏面的Hero例子寫的很是好。

除了看官方例子外，也能夠等待我以後的更新，接下來我將會寫Angular Material的相關使用，對Angular不熟悉的同窗能夠在接下來的幾篇文章中弄明白如何使用Angular。

源碼見：專題簡介