Angular超級入門（二）【環境安裝、HelloWorld程序】

時間 2019-11-07

標籤 angular 超級入門環境安裝 helloworld 程序欄目 AngularJS 简体版

原文原文鏈接

上一篇，咱們介紹和對比了jQuery、Bootstrap、Ajax等等。接着，咱們進行Angular.js的介紹css

五、Angular.js框架優勢【重點用來協做分工、數據處理】html

　　與傳統的前端框架不一樣，Angular並非負責更好的頁面顯示和優化的，而是注重分工與協做。咱們知道術業有專攻，也許傳統的前端行業每人負責一個頁面，可是更大型更精緻的單頁面，就須要每一個人負責頁面的一個或多個子模塊了。例如淘寶網的導航欄由專門的前端人員負責編寫，而商品欄部分又由另外一我的負責編寫。它是怎麼作到的呢？簡單的說就是每人寫一個app.html（app1.html、app2.html……appN.html等等），而後在整合的界面中插入app標籤（例如插入<app-1></app-1>）。相應子頁面的元素，仍是由各個子頁面編寫人員單獨負責。前端

　　更進一步的，Angular.js還能夠自定義數據處理，例如向後端請求性別數據，結果返回的是0和1，那麼在angular.js的子組件中，能夠編寫映射，根據國家決定顯示男/女或者male/femalenode

　　總結，Angular.js更像是一個介於前端和後端之間的「中端」框架，負責整合不一樣的前端人員的努力成果。web

【Angular開發流程】typescript

　　不一樣於傳統的js項目直接寫js代碼到js文件而後經過html頁面調用，angular是一整套解決方案。爲了突出數據處理的特性，它強調數據類型的嚴謹性，因而angular目前最受歡迎的開發方式是用typescript編寫。TS（typescript）是微軟開發的一套js升級語言，相比js的不一樣是加入了更加嚴謹的類型檢查機制，防止數據處理中產生過多類型匹配錯誤。npm

　　Angular的開發需用用到node.js（提供項目目錄初始化、TS程序編譯成js、服務器調試運行等功能），當項目目錄初始化後，咱們會發現生成了一個很是很是大的文件夾，其中包含了衆多的js、css、html、ts等文件，初學者會感到很是不適應。在下面的小節中咱們會一步步地理順這些項目文件夾以及文件。後端

【Angular.js開發環境準備】瀏覽器

IDE集成開發環境：VSCode——>https://code.visualstudio.com/bash

編譯環境：node.js——————>https://nodejs.org/en/（彷佛網絡不太穩定）

【須要經過node.js安裝的插件】

Angular CLI（Command Line Interface），安裝命令爲——> $ npm install -g @angular/cli@1.7.4

（若是被牆或者下載緩慢，能夠更換包源後再安裝，更換爲淘寶源的命令$ npm config set registry https://registry.npm.taobao.org）

【安裝完angular腳手架（CLI）後，能夠使用ng命令進行項目管理】

建立項目文件夾——> $ ng new my-app

會生成如圖所示的目錄結構

【用VSCode編輯器打開編輯】

選擇打開文件夾

選取剛剛用ng命令生成的項目文件夾

打開後的效果圖

這樣咱們就成功在IDE中打開這個工程文件夾了。

【試着運行】

打開cmd命令行，進入到剛纔經過腳手架生成的新工程目錄my-app中，輸入以下命令：

npm run start

node.js就會啓動一個web服務器，此時在瀏覽器輸入以下地址，就能打開該angular項目的頁面：

localhost:4200

效果如圖：

【接下來作點什麼】

試着更改一下頁面？咱們會發覺不懂從何下手，整個工程文件夾下滿目琳琅的文件。憑着直覺判斷，通常會認爲src目錄下保存着源碼，而index.html是一個網站的入口文件。那麼咱們就看看src文件夾下，果真有index.html，打開看看：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyApp2</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>

發覺body下邊什麼也沒有，只有一個<app-root></app-root>，那麼頁面具體內容是在哪裏體現的呢？

答案在配置文件裏。咱們打開src文件夾下的app文件夾，會發現裏面有不少組件同樣的東西：

其中的app.component.html就是頁面顯示的內容部分：

咱們將裏邊的內容改成以下：

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    HelloWorld to {{ title }}!
  </h1>
</div>

從新打開localhost:4200頁面：

發現頁面變爲咱們想要的內容了。因而，第一個angular的helloworld程序編寫完成