Angular入门之环境搭建（VS code）

最新推荐文章于 2024-03-29 15:15:06 发布
VIP文章 最新推荐文章于 2024-03-29 15:15:06 发布
阅读量1.7w 收藏 15
点赞数 3
分类专栏： Angular2.0+ 文章标签： angular2-0 typescript vs-code plugin node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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

安装步骤

  1. 安装Node.js
    在Node.js官网下载合适的版本，然后按照提示的步骤安装即可,
    不必再去安装npm,安装Node.js时,会自动安装npm
    简单的说，Node.js就是一个服务器端的JavaScript环境。NPM是随同Node.js一起安装的包管理工具，能解决Node.js代码部署上的很多问题。二者的详细介绍可参考Node.js和NPM教程

  2. 安装Typescript
    打开终端或cmd，执行如下命令：
    npm install -g typescript

  3. 安装Angular-cli
    执行如下命令：
    npm install -g @angular/cli
    angular-cli它是angular框架官方的一个构建工具，核心是webpack，以及npm做为依赖包
    这个安装过程中可能遇到些奇怪的问题，注意事项及解决办法见文末

  4. 检查版本号
    通过检查版本号，来测试是否安装成功，执行以下命令：
    npm -v 检查npm版本号
    ts

最低0.47元/天 解锁文章
西境的小狮子
关注
  • 3
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解Angular 开发环境搭建
10-19
Angular 是一款开源 JavaScript 框架，使开发和测试变得更加容易,这篇文章主要介绍了详解Angular 开发环境搭建,需要的朋友可以参考下
用 Visual Studio Code 开发 Angular 应用自动生成的 .angular 文件夹
SAP 资深技术专家 Jerry Wang 的技术分享
09-04 346
文件夹是 Angular CLI 的一部分，用于管理项目的构建和开发过程中的一些配置、缓存和临时文件。它的存在有助于提高 Angular 项目的构建性能和开发效率，同时也提供了一种方式来存储和管理项目的一些配置信息。文件夹中包含了一些缓存文件，用于存储先前构建的信息，以加速后续的构建过程。子文件夹：这个子文件夹可能包含构建缓存信息，以便 Angular CLI 可以根据先前的构建信息来优化构建过程。文件夹下的其他可能文件：这里还可能包含其他一些与项目相关的信息，具体取决于项目的需要和配置。
WebStorm 与 VSCode 对比分析
最新发布
宋志辉的博客
03-29 1569
WebStorm是由JetBrains公司开发的一款强大的集成开发环境（IDE），专为现代JavaScript生态系统设计。JetBrains，这家总部位于捷克的公司，以其高质量的开发工具而闻名，例如IntelliJ IDEA、PyCharm等。WebStorm不仅支持JavaScript，还支持TypeScript、Node.js、HTML以及CSS，是一个全功能的IDE，专门为Web开发者打造。Visual Studio Code（VSCode）是由微软开发的一款免费、开源的源代码编辑器。
angular 在vscode 下的hello world
曾立文的博客
09-30 2075
Angulai 是google 公司开发的前端开发框架。Angular 使用 typescript 作为编程语言。typescript 是Javascript 的一个超集，提升了某些功能。本文介绍运行我的第一个angular 程序。
vscode导入基于Angular框架的项目以及环境搭建
qq_36398269的博客
08-14 3290
1. 安装node.js 在官网找到最新版本下载 ： 官网地址：https://nodejs.org/en/ 安装成功后，打开vscode，打开终端，在终端里输入命令“node -v ”查看版本号，如果显示安装版本号则安装成功 2. 安装yarn Yarn提供了丰富的命令使你可以对Yarn包进行许多操作，包括安装、管理、发布等。 上官网，选择稳定版下载： 官网地址：https://yarnp...
Angular 搭建本地开发环境，并在VSCode运行第一个Angular项目
qq_34416331的博客
11-08 7786
本文将介绍如何在window环境Angular环境，并在VSCode上创建第一个Angular项目，并运行起来。 一、 部署 Node.js 安装环境 1.1 下载Node.js安装包 1.2 安装Node.js环境 1.3 验证是否安装成功 1.4 配置环境变量 二、 用VSCode运行Angular项目 2.1安装VSCode 2.2 打开VSCode终端，安装Angula...
配置本地Angular环境并使用VsCode调试Angular前端项目
时光小屋
05-09 2650
在vscode调试控制台的终端窗口, 输入 npm install, 装在angular(如果无法安装, 谷歌查出来的方法都用了还不行, 可以使用yarn, 一样的东东, 命令是yarn install)① 【系统变量】下新建【NODE_PATH】，输入【D:\Develop\nodejs\node_global\node_modules】，express【-g】 全局安装时，会将要安装的模块安装到配置好的路径中，避免占用C盘空间。“我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”
vscode使用angular
qq_20426717的博客
07-20 1506
1、安装angular脚手架 npm install -g @angular/cli 2、执行ng serve报错，打开windows powershell 输入set-ExecutionPolicy RemoteSigned选择A执行 3、设置好权限之后执行ng serve显示一下错误，执行npm install -save-dev @angular-devkit/build-angular 4、执行ng serve就不会报错了 ...
在VSCode中调试angular的方法
热门推荐
Lam's IT Story
07-24 1万+
近期学习angular，今天刚刚在电脑端安装VSCode，使用VSCode打开一个ng new出来的一个angular项目，想要调试，但不知道该怎么操作了。 跟同事交流一下，问问VSCode有没有类似WebStorm那种“傻瓜式”操作，直接点一个按钮就行了。他们说我想多了，VSCode相对来说是一个“轻”的IDE，还是需要通过termimal手动输入命令来启动并调试的，想一想也好，锻炼一下使用a...
AngularJS------使用VSCode创建的Angular项目部署IIS
weixin_33724659的博客
01-16 932
转载： http://www.cnblogs.com/kingkangstudy/p/7699710.html   1.进入项目src，执行命令行：ng build 2.步骤1后会生成dist文件 3.打开IIS，部署即可  
vsCode项目初使用及angular基础知识
我跌跌撞撞奔向你
10-22 873
1.vsCode没有像webstorm中那样傻瓜式的运行项目按钮，启动方式是在终端通过命令方式启动，打开终端方式如下： 启动命令：ng serve 注意：提示找不到package.json时，看下路径是否正确，系统需要根据路径找到package.json的位置，路径不正确时需要通过命令切换到指定的位置。 可配置端口号和启动对应的文字，可以配置多个启动方式 vsCode默认是英文的，改成中文方式的方法： ...
Angular2开发环境搭建教程之VS Code
08-28
不久前WebStorm的频繁卡死终于让我受不鸟了,我决定换个轻量级的编辑器，尝试了Emacs、Sublime text,最后选择了vscode。下面这篇文章主要给大家介绍了关于Angular2开发环境搭建教程之VS Code的相关资料，需要的朋友可以参考下。
详解Angular CLI + Electron 开发环境搭建
08-29
本篇文章主要介绍了Angular CLI + Electron 开发环境搭建，具有一定的参考价值，有兴趣的可以了解一下
VsCode系列：调试之Angular（支持所有调试）
Mr_chen的博客
05-10 4391
VsCode调试Angular 今天博主跟大家聊一聊如何使用VsCode去调试Angular，不喜勿喷，如有建议欢迎补充、讨论！ VSCode有没有类似WebStorm那种“傻瓜式”操作，直接点一个按钮就行了。想多了，VSCode相对来说是一个“轻量级”的IDE，还是需要通过Termimal手动输入命令来启动并调试的。自己鼓捣了一阵，这种半自动的方式也挺好，下面开始试验： 第一步：安装插件 ...
Angular——vscode插件
前端的路上
12-02 1974
TSLint：Typescript语法检查 Prettier：代码格式化 IntelliJ IDEA Keybindings：IDEA风格的快捷键 Angular 7 Snippets：Angular语法填充（标签） Angular Files：生成Angular的文件模板（Component、Module、Pipe等等） Angular Follow Selector：文件跳转（Com...
使用VScode开发Angular
Herishwater的博客
04-19 3103
文章目录前言主题插件快捷键问题记录Vs Code打开新的文件会覆盖窗口中的,怎么改文件夹按照层级结构显示如何快速打开项目参考文献 前言 Visual Studio Code（简称VS Code）是一个由微软开发，同时支持Windows、 Linux 和 macOS 等操作系统且开放源代码的代码编辑器，它支持测试，并内置了 Git 版本控制功能，同时也具有开发环境功能，例如代码补全（类似于 Int...
如何在VS Code 中运行、调试你的第一个Angular2程序
Just do it!
04-30 1万+
准备   在使用 VS Code进行调试之前，需要做一些准备工作，确保必要的环境已经安装，您的Angular2 应用程序已经可以正常编译和运行。 最新版本的 VS Code 谷歌浏览器（其他主流浏览器也可以） 配置   在VS Code 中安装“Debugger for Chrome”拓展程序，安装完成后，重新启动 VS Code。   用 VS C
angular入门教程
07-22
如果你是初学者，以下是一个简单的 Angular 入门教程，帮助你开始学习 Angular： 1. 安装 Angular CLI：首先，你需要安装 Node.js 和 npm（Node 包管理器）。然后，使用 npm 安装 Angular CLI。在命令行中运行以下命令： ``` npm install -g @angular/cli ``` 2. 创建新的 Angular 项目：使用 Angular CLI 创建一个新的 Angular 项目。在命令行中运行以下命令： ``` ng new my-app ``` 这将创建一个名为 "my-app" 的新项目，并自动安装所需的依赖项。 3. 运行应用程序：进入项目目录，然后使用以下命令启动开发服务器： ``` cd my-app ng serve ``` 这将启动一个开发服务器，并在默认端口上运行你的应用程序（通常是 http://localhost:4200）。 4. 编辑应用程序：打开你喜欢的代码编辑器，并导航到 "src/app" 目录。在这里，你将找到应用程序的根组件 "app.component.ts"。你可以编辑这个文件并开始构建你的应用程序。 5. 添加新组件：使用 Angular CLI 生成一个新的组件。在命令行中运行以下命令： ``` ng generate component my-component ``` 这将生成一个名为 "my-component" 的新组件，并自动更新应用程序中的文件和配置。 6. 在应用程序中使用组件：在根组件的模板中使用新生成的组件，或者在其他组件中使用它。 以上是一个简单的 Angular 入门教程。当你熟悉了这些基础知识后，你可以继续学习 Angular 的更多高级主题，如路由、表单处理、服务等。记得查阅官方文档和其他教程资源以获得更多深入的学习。祝你学习愉快！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值