詳解Angular cli配置過(guò)程記錄
1.首先調(diào)出命令行工具，運(yùn)行命令全局安裝Angular -cli
npm i -g @angular/cli
安裝過(guò)程中我的命令行工具內(nèi)出現(xiàn)了警告和報(bào)錯(cuò)信息，我沒(méi)有管它，因?yàn)槲以诤罄m(xù)使用中并沒(méi)有遇到什么麻煩。
安裝完成后可通過(guò)命令行ng v查看安裝的版本信息，我的是這樣的
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 8.3.3
Node: 10.16.3
OS: darwin x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.803.3
@angular-devkit/core 8.3.3
@angular-devkit/schematics 8.3.3
@schematics/angular 8.3.3
@schematics/update 0.803.3
rxjs 6.5.3
看到這個(gè)就說(shuō)明基本上沒(méi)什么問(wèn)題，已經(jīng)全局成功安裝了angular-cli
2.使用命令行ng new myapp生成項(xiàng)目,過(guò)程中會(huì)有些配置選項(xiàng)的選擇，根據(jù)自己的需求選擇不同的配置就行.
我選擇了使用angular路由和less
? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? Less
等待安裝完成，安裝安成的目錄是這樣子的
Angular-cli目錄
打開(kāi)項(xiàng)目，在項(xiàng)目中運(yùn)行命令行ng serve --open，angular-cli會(huì)自動(dòng)在瀏覽器中運(yùn)行，我運(yùn)行出來(lái)的界面是這樣子的：
angular-cli安裝完成第一次運(yùn)行結(jié)果圖
這樣子Angular -cli創(chuàng)建新項(xiàng)目就算是完成了。
講一下項(xiàng)目目錄內(nèi)容
node_modules
node_modules文件目錄是我們項(xiàng)目的依賴項(xiàng)，一般這個(gè)要放在.gitignore文件中，像這樣
/node_modules
在使用angular-cli創(chuàng)建的項(xiàng)目中，會(huì)自動(dòng)幫我做記錄好那些需要git忽略的文件。
當(dāng)從git上拉下myapp項(xiàng)目時(shí)，里面是沒(méi)有node_modules目錄的，運(yùn)行命令行npm i 或者npm install就可以重新下載node_modules目錄
src
src目錄一般是放置我們項(xiàng)目的源代碼的地方，一開(kāi)始的時(shí)候有做這些東西
src目錄內(nèi)容
index.html文件是項(xiàng)目的入口文件，在這個(gè)文件<body>中，只放<app-root></app-root>入口點(diǎn)。
這個(gè)就是上面說(shuō)到的? Would you like to add Angular routing?這個(gè)問(wèn)題選擇了yes的結(jié)果，<app-root></app-root>是angular的一個(gè)路由組件
main.ts到包后會(huì)自動(dòng)引入編譯成ES5的js文件
提示：如果想要使用ngModel綁定輸入框內(nèi)容，需要在···app.component.ts中引入 FormsModule模塊,然后放入引入內(nèi)容import```屬性中
import { FormsModule } from '@angular/forms';
imports: [
***
FormsModule
],
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Angular2.js實(shí)現(xiàn)表單驗(yàn)證詳解
這篇文章主要介紹了Angular2.js實(shí)現(xiàn)表單驗(yàn)證的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
Angular.js 實(shí)現(xiàn)數(shù)字轉(zhuǎn)換漢字實(shí)例代碼
這篇文章主要介紹了Angular.js 實(shí)現(xiàn)數(shù)字轉(zhuǎn)換漢字實(shí)例代碼的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
這篇文章主要給大家介紹了關(guān)于Angular管道PIPE的相關(guān)資料,管道的作用就是傳輸,并且不同的管道具有不同的作用,需要的朋友可以參考下2021-06-06
簡(jiǎn)單來(lái)說(shuō)Angular.js是google開(kāi)發(fā)者設(shè)計(jì)和開(kāi)發(fā)的一套前端開(kāi)發(fā)框架，幫助你簡(jiǎn)化前端開(kāi)發(fā)的負(fù)擔(dān)。當(dāng)然，這里有很多其它的前端開(kāi)發(fā)框架，但是如何選擇合適的前端框架對(duì)于我們這些開(kāi)發(fā)人員來(lái)說(shuō)就不是那么容易了！2014-11-11
AngularJS全局scope與Isolate scope通信用法示例
這篇文章主要介紹了AngularJS全局scope與Isolate scope通信用法,結(jié)合格式分析了全局scope和directive本地scope相關(guān)功能、通信用法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-11-11
Angular組件庫(kù)ng-zorro-antd實(shí)現(xiàn)radio單選框選擇
這篇文章主要為大家介紹了Angular組件庫(kù)ng-zorro-antd實(shí)現(xiàn)radio單選框取消選擇實(shí)現(xiàn)問(wèn)題解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了 AngularJS 所有版本下載地址的相關(guān)資料,需要的朋友可以參考下2016-09-09
AngularJS 路由詳解和簡(jiǎn)單實(shí)例
本文主要介紹AngularJS 路由,這里整理了相關(guān)資料進(jìn)行詳細(xì)介紹,并附實(shí)例代碼和實(shí)現(xiàn)效果圖,有需要的小伙伴可以參考下2016-07-07
這篇文章主要介紹了Angular 常用指令實(shí)例總結(jié)整理的相關(guān)資料,本文整理了常用指令，大家可以參考使用，需要的朋友可以參考下2016-12-12
AngularJS實(shí)現(xiàn)樹(shù)形結(jié)構(gòu)(ztree)菜單示例代碼
這篇文章運(yùn)用示例代碼給大家詳細(xì)介紹了利用AngularJS如何實(shí)現(xiàn)樹(shù)形結(jié)構(gòu)(ztree)菜單，文中僅用了幾行AngularJS代碼就是了這個(gè)功能，對(duì)大家日常開(kāi)發(fā)很有幫助，有需要的朋友們可以參考借鑒，下面來(lái)一起看看吧。2016-09-09