创建一个Angular项目

最新推荐文章于 2024-08-16 17:25:13 发布
最新推荐文章于 2024-08-16 17:25:13 发布
阅读量686 收藏
点赞数
分类专栏： angular 文章标签： vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43086349/article/details/120231221
版权
这篇博客详细介绍了如何使用Visual Studio Code(VSCode)或命令行工具创建一个新的Angular项目。步骤包括选择目录，通过ng new命令初始化项目，决定是否添加路由和样式，安装依赖，启动项目，并在浏览器中预览运行结果。这是一个适合前端开发者的学习指南。
摘要由CSDN通过智能技术生成

创建一个Angular项目

工具：VS Code 或者cmd

1.找一个目录，存angular工程文件的目录；
2.在终端输入cd 目录路径 ，进入目录；
3.输入命令ng new 文件名；
4.接下来选择是否需要添加路由，样式；
5.输入命令 npm install，等在下载完成；
6.然后用VS Code 打开项目；
7.找到package.json文件，进入后，查看scripts下的start命令，然后执行该命令，启动项目。
8.打开浏览器，输入http://localhost:4200，即可看到运行起来的web页面，如下图所示。

在这里插入图片描述

半梦半醒间幸运_
关注
专栏目录
Angular 环境搭建及项目的创建
dave的技术成长之路
01-25 1484
一、环境搭建 1、安装nodejs node - v ：查看版本 npm -v ：查看npm 的版本 2、安装cnpm 疑问：npm和cnpm 都是什么？ npm(node package manager):nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等） cnpm：是一个完整的npmjs.org镜像，可以用此版本替代npm，俗称：中国NPM镜像，由淘宝阿里提供！ 安装命令： npm install -g cnpm --registry=https://registry.npm.
使用vscode创建angular2应用
yuanyuanhefangfang的博客
03-31 941
前置：安装最新的npm与node 1.使用vscode创建，创建一个workspace，然后使用vscode打开 2.创建一个新终端 3.在终端中全局安装angular cli 使用命令 npm install -g @angular/cli 4.然后使用angular cli的命令创建新angular2项目骨架 使用命令 ng new项目名称 5.使用cd命令进入项目目...
VS Code调试Angular——方便快捷好学
向阳而生
04-19 3079
前言        首先说下我们一直在用的最复杂的方法中用到的Chrome Dev Tools 绝对是目前最爽的 JavaScript 调试工具之一，一方面可以通过在代码 debugger 或 直接在 Sources 中添加断点，并且可以直接进入 Typescript 源代码，真的无可挑剔。然……我们一般在开发Angular，首先需要在CMD终端 （或VSCODE TERMINAL）启动 ng s...
Angular 搭建本地开发环境，并在VSCode运行第一个Angular项目
最新发布
qq_36078699的博客
08-16 213
① 【系统变量】下新建【NODE_PATH】，输入【D:\Develop\nodejs\node_global\node_modules】，原文链接：https://blog.csdn.net/qq_34416331/article/details/102942501。② 将【用户变量】下的【Path】修改为【D:\Develop\nodejs\node_global】express【-g】 全局安装时，会将要安装的模块安装到配置好的路径中，避免占用C盘空间。其中的地址为Node.js的实际安装路径。
利用VS Code开发你的第一个AngularJS 2应用程序
11-28
前言 之前已经给大家介绍了Angular2开发环境搭建教程之VS Code，本文将详细介绍利用VS Code如何开发AngularJS2应用程序的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。 运行环境： 1、Windows 10 2、Node 6.7.0 3、npm 3.10.8 4、TypeScript 2.0.3 创建项目 1、创建文件夹：angular2-quickstart，启动VS Code，打开刚创建的文件夹：angular2-quickstart。 2、在根文件夹（angular2-quickstart）下，创建package.json文件：
使用 VS Code 创建 Angular 项目
biyusr的专栏
11-13 1203
使用 VS Code 创建 Angular 项目
angular学习之从零搭建一个angular4.0项目
08-30
本文将指导读者从零开始搭建一个 Angular 4.0 项目，涵盖了项目的创建、安装依赖项、生成项目结构等方面的知识点。 一、Angular 项目搭建准备 在开始搭建 Angular 项目之前，需要准备以下工具： * Angular 4.0：...
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
08-27
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结 Angular CLI是Angular项目的命令行界面工具，可以创建项目、添加文件以及执行一大堆开发任务。使用Angular CLI可以快速创建Angular项目，下面是使用...
Angular_FP：我的第一个Angular项目
02-12
- 入门配置：通过`ng new`命令创建新的Angular项目，设置项目目录结构和基础配置。 2. **TypeScript**： - TypeScript是JavaScript的超集，提供静态类型、类和接口等特性，增强了代码的可读性和可维护性。 - 在...
使用VScode开发Angular
Herishwater的博客
04-19 3202
文章目录前言主题插件快捷键问题记录Vs Code打开新的文件会覆盖窗口中的,怎么改文件夹按照层级结构显示如何快速打开项目参考文献 前言 Visual Studio Code（简称VS Code）是一个由微软开发，同时支持Windows、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器，它支持测试，并内置了 Git 版本控制功能，同时也具有开发环境功能，例如代码补全（类似于 Int...
推荐项目：VSCode Angular Snippets
gitblog_00066的博客
04-16 284
推荐项目：VSCode Angular Snippets vscode-angular-snippetsAngular Snippets for VS Code项目地址:https://gitcode.com/gh_mirrors/vs/vscode-angular-snippets 在现代前端开发中，效率是关键。为了帮助Angular开发者提升编码速度和一致性，John Papa创建了一个名为...
Angular入门之环境搭建（VS code）
火侬智能科技
04-01 2846
https://blog.csdn.net/maiowu1001/article/details/76600558环境Win 64 node:6.11.1 npm:3.10.10 Typescript:2.4.2 VS code:1.14.0安装步骤安装Node.js 在Node.js官网下载合适的版本，然后按照提示的步骤安装即可, 不必再去安装npm,安装Node.js时,会自动安装npm 简单...
vsCode项目初使用及angular基础知识
我跌跌撞撞奔向你
10-22 933
1.vsCode没有像webstorm中那样傻瓜式的运行项目按钮，启动方式是在终端通过命令方式启动，打开终端方式如下： 启动命令：ng serve 注意：提示找不到package.json时，看下路径是否正确，系统需要根据路径找到package.json的位置，路径不正确时需要通过命令切换到指定的位置。 可配置端口号和启动对应的文字，可以配置多个启动方式 vsCode默认是英文的，改成中文方式的方法： ...
配置本地Angular环境并使用VsCode调试Angular前端项目
时光小屋
05-09 3283
在vscode调试控制台的终端窗口, 输入 npm install, 装在angular(如果无法安装, 谷歌查出来的方法都用了还不行, 可以使用yarn, 一样的东东, 命令是yarn install)① 【系统变量】下新建【NODE_PATH】，输入【D:\Develop\nodejs\node_global\node_modules】，express【-g】 全局安装时，会将要安装的模块安装到配置好的路径中，避免占用C盘空间。“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”
小白第一次创建angular项目
wnk1997的博客
06-17 177
第一次搞angular，国内用的比较少1.进去vs code,在终端全局安装cli 2.创建新项目 这个时候可能会报错 ng.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.c 解决方法如下，原文：https://blog.csdn.net/qq_41576643/article/details/107106802： 3.然后项目就生成好了，这个时候cd my-app,把终端文件目录改到生成的项目，最后npm install一下，生成依赖，最后 ng s
Angular2开发环境搭建之VS Code
天马3798
11-30 6090
一、设置开发环境Node  JsAngular2开发环境主要依赖Node Js和Npm，需要node 6.9.x和npm  3.x.x 以上的版本 。查看版本命令使用  node -v和  npm -v.二 、Angular2或以上版本 使用 Angular  CLI命令行工具，可以快速创建项目 、添加文件以及执行大堆开发 任务 ，比如测试、打包和发布。然后全局安装 Angular CLI 。np...
怎么创建一个angular项目
04-26
要创建一个 Angular 项目，请按照以下步骤进行操作： 1. 先确认已经安装了 Node.js 和 npm。 2. 打开命令行工具，运行以下命令来安装 Angular CLI： ``` npm install -g @angular/cli ``` 3. 进入你想要创建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值