前言

當(dāng)前，AngularJS作為Javascript的MVC（也有人說(shuō)是MV*，暫且不糾結(jié)這個(gè)）框架被廣泛使用，它為更快且更容易地開(kāi)發(fā)響應(yīng)式的Web提供了強(qiáng)大的機(jī)制。作為MVC框架，它將Web前端代碼分成三個(gè)組件Model，View和Controller。因此，在data model,應(yīng)用邏輯（Controllers）和view展示之間有明確的分離，讓你更容易地關(guān)注關(guān)鍵的開(kāi)發(fā)區(qū)域。view接收來(lái)自model的數(shù)據(jù)來(lái)展示。當(dāng)用戶(hù)通過(guò)點(diǎn)擊或者敲擊鍵盤(pán)和應(yīng)用交互時(shí)，controller通過(guò)改變模型中的數(shù)據(jù)進(jìn)行響應(yīng)。最終，view得到了發(fā)生在model中的變化這個(gè)通知，從而它能更新展示的內(nèi)容。

最近我在給一個(gè)不懂計(jì)算機(jī)的朋友做一個(gè)小的應(yīng)用程序，我想用Angular來(lái)做。一般我們?cè)贗DE上開(kāi)發(fā)的時(shí)候都會(huì)用npm start或者ng serve來(lái)啟動(dòng)一個(gè)內(nèi)部服務(wù)器，可是如果我把開(kāi)發(fā)好的程序給朋友，怎么才能讓他能夠在自己的瀏覽器中打開(kāi)呢？我這里選擇了nginx服務(wù)器來(lái)部署我的程序。

一、新建Angular程序

1.安裝nodejs

2.安裝淘寶鏡像

npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安裝angular cli

npm install -g @angular/cli

4.新建項(xiàng)目

ng new myProj

5.安裝依賴(lài)包

在有package.json的目錄下cnpm install

6.IDE中運(yùn)行

ng serve 或 npm install， 在localhost:4200中查看

二、打包

ng build,會(huì)在項(xiàng)目文件夾下生成dist文件，里面是打包后的文件。

三、部署

在nginx官網(wǎng)中下載nginx

把dist文件夾下的打包文件拷貝到nginx/html下并重命名為myProj

修改conf/nginx.conf文件
location / {
   root html/myProj;
   index index.html index.htm;
  }

點(diǎn)擊nginx.exe啟動(dòng)nginx

在瀏覽器中輸入localhost:80即可看到項(xiàng)目

這個(gè)時(shí)候，我們只需要把nginx打包發(fā)給朋友，然后告訴他點(diǎn)擊nginx.exe后，在瀏覽器中輸入localhost:80即可。

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

最新評(píng)論