1. 下载nodejs 并且安装
https://nodejs.org/en
2. 打开命令窗口,验证是否安装成功
C:\Users\Harry>node -v
v18.16.0
C:\Users\Harry>npm -v
9.5.1
3. 安装Angular CLI
C:\Users\Harry>npm install -g @angular/cli
added 239 packages in 9s
npm notice
npm notice New minor version of npm available! 9.6.7 -> 9.7.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.7.1
npm notice Run npm install -g npm@9.7.1 to update!
npm notice
经过不算漫长的等待,你的Angular CLI
就装好了。确认一下:
C:\Users\Harry>ng v
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 16.1.0
Node: 18.16.0
Package Manager: npm 9.5.1
OS: win32 x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.1601.0 (cli-only)
@angular-devkit/core 16.1.0 (cli-only)
@angular-devkit/schematics 16.1.0 (cli-only)
@schematics/angular 16.1.0 (cli-only)
4. 新建Angular项目
C:\Users\Harry>ng new ai_service_ui
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE ai_service_ui/angular.json (2735 bytes)
CREATE ai_service_ui/package.json (1044 bytes)
CREATE ai_service_ui/README.md (1065 bytes)
CREATE ai_service_ui/tsconfig.json (901 bytes)
5. 启动项目
cd 你的项目中
C:\Users\Harry>cd ai_service_ui
然后启动
C:\Users\Harry\ai_service_ui>ng serve
? Would you like to share pseudonymous usage data about this project with the Angular Team
at Google under Google's Privacy Policy at https://policies.google.com/privacy. For more
details and how to change this setting, see https://angular.io/analytics. Yes
Thank you for sharing pseudonymous usage data. Should you change your mind, the following
command will disable this feature entirely:
ng analytics disable
Global setting: enabled
Local setting: enabled
Effective status: enabled
√ Browser application bundle generation complete.
Initial Chunk Files | Names | Raw Size
vendor.js | vendor | 2.28 MB |
polyfills.js | polyfills | 332.99 kB |
styles.css, styles.js | styles | 230.29 kB |
main.js | main | 48.11 kB |
runtime.js | runtime | 6.52 kB |
| Initial Total | 2.88 MB
Build at: 2023-06-20T14:58:31.261Z - Hash: cbf12963274fa959 - Time: 15056ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
6. 访问页面 http://localhost:4200/
7 其它
安装primeng
npm install primeng --save
npm install primeicons --save
安装PrimeNG的主题库
npm install primeflex --save
然后,在angular.json
文件中的styles数组中引入所选主题的CSS文件。例如:
"styles": [
"src/styles.css",
"node_modules/primeicons/primeicons.css",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/primeflex/primeflex.css", // 引入主题的CSS文件
// 其他样式文件
],
在您的Angular应用中使用PrimeNG:您可以在您的组件中引入PrimeNG模块,并使用PrimeNG组件。例如,您可以在您的模块文件中引入PrimeNG模块文章来源:https://www.toymoban.com/news/detail-719619.html
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ButtonModule } from 'primeng/button'; // 引入PrimeNG组件
@NgModule({
declarations: [],
imports: [CommonModule, ButtonModule], // 使用PrimeNG组件
})
export class YourModule { }
安装fontawesome文章来源地址https://www.toymoban.com/news/detail-719619.html
npm install font-awesome --save
到了这里,关于Angular 安装与创建第一项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!