詳解Angular cli配置過程記錄
1.首先調(diào)出命令行工具，運行命令全局安裝Angular -cli
npm i -g @angular/cli
安裝過程中我的命令行工具內(nèi)出現(xiàn)了警告和報錯信息，我沒有管它，因為我在后續(xù)使用中并沒有遇到什么麻煩。
安裝完成后可通過命令行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
看到這個就說明基本上沒什么問題，已經(jīng)全局成功安裝了angular-cli
2.使用命令行ng new myapp生成項目,過程中會有些配置選項的選擇，根據(jù)自己的需求選擇不同的配置就行.
我選擇了使用angular路由和less
? Would you like to add Angular routing? Yes ? Which stylesheet format would you like to use? Less
等待安裝完成，安裝安成的目錄是這樣子的
Angular-cli目錄
打開項目，在項目中運行命令行ng serve --open，angular-cli會自動在瀏覽器中運行，我運行出來的界面是這樣子的：
angular-cli安裝完成第一次運行結(jié)果圖
這樣子Angular -cli創(chuàng)建新項目就算是完成了。
講一下項目目錄內(nèi)容
node_modules
node_modules文件目錄是我們項目的依賴項，一般這個要放在.gitignore文件中，像這樣
/node_modules
在使用angular-cli創(chuàng)建的項目中，會自動幫我做記錄好那些需要git忽略的文件。
當從git上拉下myapp項目時，里面是沒有node_modules目錄的，運行命令行npm i 或者npm install就可以重新下載node_modules目錄
src
src目錄一般是放置我們項目的源代碼的地方，一開始的時候有做這些東西
src目錄內(nèi)容
index.html文件是項目的入口文件，在這個文件<body>中，只放<app-root></app-root>入口點。
這個就是上面說到的? Would you like to add Angular routing?這個問題選擇了yes的結(jié)果，<app-root></app-root>是angular的一個路由組件
main.ts到包后會自動引入編譯成ES5的js文件
提示：如果想要使用ngModel綁定輸入框內(nèi)容，需要在···app.component.ts中引入 FormsModule模塊,然后放入引入內(nèi)容import```屬性中
import { FormsModule } from '@angular/forms';
imports: [
***
FormsModule
],
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
spring+angular實現(xiàn)導出excel的實現(xiàn)代碼
這篇文章主要介紹了spring+angular實現(xiàn)導出excel的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
基于Angular.js實現(xiàn)的觸摸滑動動畫實例代碼
這篇文章主要介紹了基于Angular.js實現(xiàn)的觸摸滑動動畫實例代碼,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
這篇文章記錄了當時剛學習angular的時候踩的關(guān)于作用域的坑，希望給以后學習Angular作用域的朋友一個提醒，有需要的可以參考學習。2016-08-08
大家都是在Reactive Extensions for Javascript誕生于幾年前，隨著angular2正式版的發(fā)布，它將會被更多開發(fā)者所認知。這篇文章我們來詳細介紹RxJs提供的Observable對象，有需要的朋友們可以參考借鑒。2016-09-09
Angular outlet實現(xiàn)頁面布局示例詳解
這篇文章主要為大家介紹了Angular outlet實現(xiàn)頁面布局示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
這篇文章主要介紹了Angular ng-class的知識，并整理了相關(guān)資料，有興趣的小伙伴可以參考下2016-09-09
今天小編就為大家分享一篇Angular異步變同步處理方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了AngularJS路由刪除#符號解決的辦法的相關(guān)資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
本篇文章主要介紹了Angular 2的管道Pipe的使用方法，詳細的介紹了管道的定義和使用方法，具有一定的參考價值，有興趣的可以了解一下2017-11-11
詳解Webstorm 下的Angular2.0開發(fā)之路(圖文)
這篇文章主要介紹了詳解Webstorm 下的Angular2.0開發(fā)之路(圖文) ，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12