angular學(xué)習(xí)之從零搭建一個(gè)angular4.0項(xiàng)目
話說現(xiàn)在angular更新迭代太快了，從前幾年用angular版本去搭建項(xiàng)目時(shí)還是1.x版本，到現(xiàn)在都已經(jīng)是angular4.0了（直接跳過了3.0），由于公司要求用到angular4.0，所以就不能只是了解一下了，誰讓我那么熱愛學(xué)習(xí)了（咳咳！此處有一個(gè)推眼鏡的動(dòng)作），廢話不多說，直接上手，首先用到的工具會(huì)有angular4.0、angular-cli、npm(v3.10.8)、node(v6.2.0)
上述node和npm包管理器版本是我本機(jī)的版本號(hào)，這個(gè)版本不要太低應(yīng)該都沒問題
angular腳手架各版本
node和npm版本
接著，新建一個(gè)文件夾，隨便命名，我這里就起了一個(gè)angular4.0-demo，然后就可以愉快的安裝所需要的工具了。
第一步
安裝全局的angular-cli， npm install -g @angular/cli
第二步
查看各插件是否已經(jīng)安裝，ng -v會(huì)出來一堆東西，如第一個(gè)圖所示！
第三步
生成項(xiàng)目 代碼為：ng new 項(xiàng)目名稱
第四步
現(xiàn)在已經(jīng)創(chuàng)建完成了，cd進(jìn)入項(xiàng)目，會(huì)看到一些這樣的東西，說明已經(jīng)創(chuàng)建完成了，接下來就是執(zhí)行項(xiàng)目就可以了，跟vue2.0一樣，此時(shí)執(zhí)行用到的代碼為：ng serve --open（和vue的npm run dev效果是一樣，自動(dòng)監(jiān)聽修改內(nèi)容），這一點(diǎn)也是不同于angularjs（官方稱1.x為angularjs，過了2.0就直接稱為angular）
最后執(zhí)行完之后就會(huì)彈出來一個(gè)頁面，就是要生成的頁面了
生成的頁面
好了，那么基本的搭建已經(jīng)完成了，去試試吧！
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了Angular 獨(dú)立組件入門教程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要為大家詳細(xì)介紹了AngularJS表單驗(yàn)證,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
使用AngularJS創(chuàng)建單頁應(yīng)用的編程指引
這篇文章主要介紹了使用AngularJS創(chuàng)建單頁應(yīng)用的編程指引,AngularJS是一款高人氣的JavaScript庫,需要的朋友可以參考下2015-06-06
詳解Angular2 關(guān)于*ngFor 嵌套循環(huán)
這篇文章主要介紹了詳解Angular2 關(guān)于*ngFor 嵌套循環(huán)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
angularjs項(xiàng)目的頁面跳轉(zhuǎn)如何實(shí)現(xiàn)（5種方法）
本篇文章主要介紹了詳解angularjs項(xiàng)目的頁面跳轉(zhuǎn)如何實(shí)現(xiàn) ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
Angularjs中ng-repeat-start與ng-repeat-end的用法實(shí)例介紹
這篇文章主要給大家介紹了Angularjs中ng-repeat-start與ng-repeat-end的用法，文章開始先進(jìn)行了簡(jiǎn)單的介紹，而后通過完整的實(shí)例代碼詳細(xì)給大家介紹這兩者的用法，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12
AngularJs bootstrap搭載前臺(tái)框架——js控制部分
本文主要介紹AngularJs bootstrap搭載前臺(tái)框架js控制部分的資料，這里有實(shí)現(xiàn)代碼，有興趣的小伙伴可以參考下2016-09-09
AngularJS基礎(chǔ) ng-open 指令簡(jiǎn)單實(shí)例
本文主要介紹AngularJS ng-open 指令,這里幫大家整理了ng-open指令的基本資料,有需要的小伙伴可以參考下2016-08-08
angular select 默認(rèn)值設(shè)置方法
下面小編就為大家?guī)硪黄猘ngular select 默認(rèn)值設(shè)置方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
在實(shí)際工作中,我們經(jīng)常需要一個(gè)基于后端API驗(yàn)證值的驗(yàn)證器,下面這篇文章主要給大家介紹了關(guān)于angular異步驗(yàn)證器防抖的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03