Mac上Angular的环境搭建

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

安装Angular通常需要以下几个步骤:

  1. 1. 确保你的机器上已经安装了Node.js和npm,这是使用Angular的必要条件。如果没有安装,可以通过官网下载并安装nodejs.org/en/download… 。

  2. 打开终端(Unix / Linux / macOS)或命令提示符(Windows)并输入以下命令安装Angular CLI(命令行工具) :

    npm install -g @angular/cli
  3. 创建一个新的Angular应用程序。在终端中运行以下命令:

    ng new my-app

    这将创建一个名为"my-app"的新应用程序,其中包括Angular框架、基本的文件和文件夹结构和一些默认的样式。这个过程可能需要一些时间,请耐心等待。

  4. 进入刚刚创建的项目目录,并在本地运行开发服务器:

    cd my-app ng serve --open

    运行成功后,你可以在浏览器中访问http://localhost:4200并看到一个默认的Angular欢迎页面。

总的来说,安装Angular需要安装Node.js和npm,然后使用Angular CLI创建一个新的Angular项目,并在本地运行开发服务器以查看你的应用程序。如果出现任何问题,可以查看官方文档或向社区寻求帮助。

要求

  1. Node.js
    下载地址,当然也可以用brew install node来安装。

  2. npm package manager
    当我用brew安装node.js的时候,npm也一并被安装了

安装Angular CLI

npm install -g @angular/cli

配置编辑器

官网的第四步就开始编辑Angular组件了,但工于利其事必先利其器,一个文件一个文件的编辑太麻烦了,咱先把编辑器配置好。
常用的Angular编辑器有Visual Studio Code、WebStorm、Sublime Text


 

Development environment

If you plan to complete this tutorial on your local computer, you must install the required software. If you have already installed some of the required software, you must verify that it is the correct version.

Perform these steps in a command-line tool on the computer you want to use for this tutorial.

IMPORTANT: If you plan to use StackBlitz to do the lessons, you can proceed to the first lesson. You don't need to install any software.

Step 1 - Identify the version of node.js that Angular requires

IMPORTANT: This step is only required if you have a version of node installed, otherwise, proceed to step 2 below.

Angular requires an active LTS or maintenance LTS version of Node. Let's confirm your version of node.js. For information about specific version requirements, see the engines property in the package.json file.

From a Terminal window:

  1. Run the following command: node --version
  2. Confirm that the version number displayed meets the requirements.

Step 2 - Install the correct version of node.js for Angular

If you do not have a version of node.js installed, please follow the directions for installation on nodejs.org

Step 3 - Install the latest version of Angular

With node.js and npm installed, the next step is to install the Angular CLI which provides tooling for effective Angular development.

From a Terminal window:

  1. Run the following command: npm install -g @angular/cli
  2. Once the installation completes, the terminal window will display details of the Angular CLI version installed on your local computer.

Step 4 - Install integrated development environment (IDE)

You are free to use any tool you prefer to build apps with Angular. We recommend the following:文章来源地址https://www.toymoban.com/news/detail-574816.html

  1. Visual Studio Code
  2. As an optional, but recommended step you can further improve your developer experience by installing the Angular Language Service

到了这里,关于Mac上Angular的环境搭建的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • Angular-02:环境等说明

    项目名不要带数字 npm版本过低安装工具时加上版本号 现项目完整的工具链:angular + ngZorro + rxjs + ngrx + sass vscode好用插件分享: 名称 说明 Auto Close Tag 自动闭合html标签 Auto Import 自动引包(可自动生成文件路径提示方便文件导入) Angular Files 一键生成angular需要的文件 Chinese (

    2024年02月08日
    浏览(30)
  • 二甲医院信息管理系统源码 his系统源码 java+Angular+JavaScript

    云HIS系统采用SaaS软件应用服务模式,提供软件应用服务多租户机制,实现一中心部署多机构使用。主要包含收费计费、药品管理、门诊医生工作站、住院医生工作站、护士工作站、数据统计、电子病历、医保接口等功能,能够满足医院及诊所日常业务开展的需要。     设计

    2024年02月11日
    浏览(45)
  • 关于 Angular 和 Node.js 版本的问题

    只有 Angular 12 才支持 Node.js 16 吗?Angular 10 呢? StackOverflow 有朋友抱怨关于 Angular 和 Node.js 版本的问题: 我的实际工作中,经常不得不启动旧的 Angular 项目,其中包含已弃用的 Angular 依赖项。 因为我经常运行最新的 Node.js 版本(至少是最新的 LTS 版本),所以我经常遇到无法

    2024年02月04日
    浏览(48)
  • 如何在 Angular 中使用环境变量

    简介 如果你正在构建一个使用 API 的应用程序,你会想在开发过程中使用测试环境的 API 密钥,而在生产环境中使用生产环境的 API 密钥。在 Angular 中,你可以通过 environment.ts 文件创建环境变量。 在本教程中,你将学习如何在 Angular 中使用环境变量。 如果你想跟着本文操作,

    2024年02月20日
    浏览(47)
  • Angular系列教程之zone.js和NgZone

    在Angular中,zone.js是一个非常重要的库,它为我们提供了一种跟踪和管理异步操作的机制。它的核心概念是Zone,它可以帮助我们捕获和处理异步操作的上下文。 当我们执行异步操作(例如定时器、网络请求或者订阅Observables)时,往往需要确保这些操作可以正确地传播并影响

    2024年01月17日
    浏览(42)
  • 一文了解Angular、React 和 Vue.js的区别

    前端开发人员在开始一个新项目时首先要回答的问题是:我应该选择哪个框架? 哪个框架更适合我的需求? 在本文中,我们将向您快速概述当前使用的最常见的前端框架,旨在帮助您选择最能满足您需求的框架。这些框架是 Angular、React和 Vue.js。   一、介绍 Angular是一个包

    2024年02月08日
    浏览(55)
  • 前端框架之争: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日
    浏览(93)
  • 如何使用前端框架(React、Angular、Vue.js等)?该如何选择?

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

    2024年02月07日
    浏览(60)
  • 深入Angular:(转&翻)Do you still think that NgZone (zone.js) is required for change detection in Angular?

    原文链接:IndepthApp 前言概览:注意区分NgZone和zone.js, 更多细节在Angular跟新策略篇,尚未翻译完成。 本文主要解释了Angular是如何基于zone.js实现NgZone。 同时阐述如何在不使用zone.js的情况下,实现手动更新。文章最后部分将描述自动跟新策略何时会失效。 我看过的大多数文章

    2024年01月16日
    浏览(54)
  • 如何在 Angular 中使用 ng2-charts 来使用 Chart.js

    介绍 Chart.js 是一个流行的 JavaScript 图表库, ng2-charts 是 Angular 2+ 的一个包装器,用于在 Angular 中集成 Chart.js。 在本教程中,您将使用 Chart.js 和 ng2-charts 在 Angular 应用程序中创建示例图表。 要完成本教程,您需要: 本地安装了 Node.js,您可以按照《如何安装 Node.js 并创建本地

    2024年02月20日
    浏览(47)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包