Angular 安装与创建第一项目

这篇具有很好参考价值的文章主要介绍了Angular 安装与创建第一项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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/

Angular 安装与创建第一项目,前端,angular.js,前端,javascript

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模块

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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端框架之争:Vue.js vs. React.js vs. Angular

    🎉欢迎来到Web前端专栏~前端框架之争:Vue.js vs. React.js vs. Angular ☆* o(≧▽≦)o *☆嗨~我是IT·陈寒🍹 ✨博客主页:IT·陈寒的博客 🎈该系列文章专栏:架构设计 📜其他专栏:Java学习路线 Java面试技巧 Java实战项目 AIGC人工智能 数据结构学习 🍹文章作者技术和水平有限,如果

    2024年02月07日
    浏览(91)
  • 如何使用前端框架(React、Angular、Vue.js等)?该如何选择?

    聚沙成塔·每天进步一点点 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而

    2024年02月07日
    浏览(56)
  • Angular学习笔记一之项目构建与模块创建

    Angular是三大框架之一,是最早开始出现并流行的框架。它是使用HTML、CSS、TypeScript编写的一个重量级框架,为大型应用开发而设计。使用Angular开发出来的客户端应用是高度模块化的。Angular提供了cli工具,组件和模块都可以使用cli工具提供的命令行来创建。Angular对于状态管理

    2024年02月07日
    浏览(41)
  • Angular之创建项目报错:setTimeout is not defined

    零基础的宝们,跟着视频学习Angular中,会教授大家如何创建一个新项目。 但是在操作时就会遇到无法创建的问题。 接下来我们一起来看看,本人Angular起步时卡在家门口的问题。 在已经安装了nodejs的情况下,被建议使用cnpm命令全局安装 Angular CLI cnpm install -g @angular/cli 它是这

    2024年02月16日
    浏览(33)
  • Angular开发之——安装Angular CLI并初始化项目(02)

    Angular CLI介绍及开发环境准备 安装Angular CLI开发工具 使用Angular CLI初始化Angular项目 简单体验Angular 2.1 Angular CLI介绍 目前,无论你使用什么前端框架,都必须要使用到各种NodeJS工具,Angular也不例外。与其他框架不同,Angular从一开始就走的“全家桶”式的设计思路,因此@angul

    2024年02月07日
    浏览(35)
  • window下安装docker并运行angular项目

    1、使用场景 本地有一个node项目,node 版本是 v16.13.2,在本地安装的angular 是 15.2.4 但是测试服上面的node 版本是 14.19.3,angular 是1.0.0-beta.28.3 ,会导致angular项目的 ng build 打包不了。但是不能升级版本,因为这个测试服务器上面的东西也是接手离职同事的,不知道上面都有些啥

    2024年02月09日
    浏览(37)
  • 大型医院云HIS系统:采用前后端分离架构,前端由Angular语言、JavaScript开发;后端使用Java语言开发 融合B/S版电子病历系统

    一套医院云his系统源码 采用前后端分离架构,前端由Angular语言、JavaScript开发;后端使用Java语言开发。融合B/S版电子病历系统,支持电子病历四级,HIS与电子病历系统均拥有自主知识产权。 文末卡片获取联系! 基于云计算技术的B/S架构的医院管理系统(简称云HIS),采用前后

    2024年02月03日
    浏览(47)
  • angular框架简介基础与使用(全文2w8字)前端框架angular

    本文的所有内容,可以在我的博客上看到,下面是地址。建议去博客看,因为csdn的这篇图片我没上传。 可以转载,但请注明出处 我的博客—点击跳转 https://numb.run Angular是谷歌开发的一款开源的web前端框架,诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀

    2024年02月02日
    浏览(41)
  • Angular:引领未来的前端框架

    Angular是一款由Google开发的强大前端框架,具有丰富的特性和卓越的性能。本文将介绍Angular的基本概念、特点、应用场景以及与其他框架的对比。 一、引言 随着Web应用程序的日益复杂,前端框架在开发过程中扮演着越来越重要的角色。Angular作为一款由Google主导的前端框架,

    2024年01月22日
    浏览(42)
  • 前端Angular框架基础知识(一)

    1.1 数据绑定 数据驱动DOM:将组件 类 (.ts文件)中的数据显示在组件 模板 (.html文件)中,当类中的数据发生变化会自动同步到模板中. Angular中使用差值表达式进行数据绑定, {{ }}语法 1.2 属性绑定 1.2.1 普通属性 使用【属性名称】为元素绑定DOM对象属性 使用【attr.属性名称】为元

    2024年01月17日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包