详解Angular 开发环境搭建

Angular 是一款开源 JavaScript 框架，由Google 维护，用来协助单一页面应用程序运行的。它的目标是增强基于浏览器的应用，使开发和测试变得更加容易。目前最新的 Angular 版本是 v4.2.3

开始搭建 Angular 开发环境

搭建 Angular 开发环境需要的步骤：

  1. Node.js
  2. 配置 npm
  3. Angular CLI

安装 Node.js

下载安装Node.js，下载最新的 LTS 版本即可，目前最新的版本是 v6.11.0 LTS

配置 npm

安装好 Node.js 之后需要配置一下 npm 国内源

$ npm config set registry=https://registry.npm.taobao.org/

或者 使用 nrm 去管理 npm 源

$ npm i nrm -g
$ nrm use taobao

由于 node-sass 包的下载链接被墙了，所以要配置一下 node-sass 的国内源

代码如下:

$ npm config set sass_binary_site="https://npm.taobao.org/mirrors/node-sass/"

安装 Angular CLI

Angular CLI 用于创建、编译、发布 Angular 项目

$ npm i @angular/cli -g

创建测试项目

打开终端，创建一个基于 scss 样式的 Angular 项目

$ ng new my-app --style=scss

项目创建成功后会提示 Project 'my-app' successfully created.，然后进入项目目录并运行试试吧

$ cd my-app && ng serve -o

更多 Angular CLI 的命令请参考 Angular CLI 官网

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • .Net Core+Angular Cli/Angular4开发环境搭建教程

    .Net Core+Angular Cli/Angular4开发环境搭建教程

    一.基础环境配置 1.安装VS 2017 v15.3或以上版本 2.安装VS Code最新版本 3.安装Node.js v6.9以上版本 4.重置全局npm源,修正为 淘宝的 NPM 镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org 5.安装TypeScript cnpm install -g typescript typings 6.安装 AngularJS CLI cnpm install -g @angul

  • AngularJS入门教程之学习环境搭建

    学习AngularJS的一个好方法是逐步完成本教程,它将引导您构建一个完整的AngularJS web应用程序. 该web应用是一个Android设备清单的目录列表,您可以筛选列表以便查看您感兴趣的设备,然后查看设备的详细信息. 本教程将向您展示AngularJS怎样使得web应用更智能更灵活,而且不需要各种扩展程序或插件. 通过本教程的学习,您将: 1.阅读示例学习怎样使用AngularJS的客户端数据绑定和依赖注入功能来建立可立即响应用户操作的动态数据视图. 2.学习如何使用AngularJ

  • AngularJs入门教程之环境搭建+创建应用示例

    AngularJs入门教程之环境搭建+创建应用示例

    本文简单讲述了AngularJs环境搭建+创建应用的方法.分享给大家供大家参考,具体如下: 概述 AngularJS是Google工程师研发的一款JS框架,官方文档中对它的描述是,它是完全使用JavaScript编写的客户端技术,同其他历史悠久的Web技术(HTML,CSS等)配合使用,使得Web开发变得更简单.更高效.它是笔者用过的比较有特色的一款框架,以HTML作为模版语言并扩展HTML属性,使得应用组件开发保持高度的清晰和一致.本系列文章將以实际的案例简单的介绍AngularJs的特性和用

  • 详解.Net Core + Angular2 环境搭建

    本文介绍了.Net Core + Angular2 环境搭建,具体如下: 环境搭建: 1)node.js版本>5.0,NPM版本>3.0,TypeScript版本>2.0(全装最新版就好了) 2)安装NTVS 1.2(node tools for vs),TSVS dev 1.4(TS for VS) 3)构建package.json,tsconfig.json,gulp.js文件 1.package.json { "name": "template.ang

  • 详解Angular 开发环境搭建

    Angular 是一款开源 JavaScript 框架,由Google 维护,用来协助单一页面应用程序运行的.它的目标是增强基于浏览器的应用,使开发和测试变得更加容易.目前最新的 Angular 版本是 v4.2.3 开始搭建 Angular 开发环境 搭建 Angular 开发环境需要的步骤: Node.js 配置 npm Angular CLI 安装 Node.js 下载安装Node.js,下载最新的 LTS 版本即可,目前最新的版本是 v6.11.0 LTS 配置 npm 安装好 Node

  • 详解python开发环境搭建

    详解python开发环境搭建

    虽然网上有很多python开发环境搭建的文章,不过重复造轮子还是要的,记录一下过程,方便自己以后配置,也方便正在学习中的同事配置他们的环境. 1.准备好安装包 1)上python官网下载python运行环境(http://www.jb51.net/softs/416037.html),目前比较稳定的是python-3.5.2 2)上pycharm官网下载最新版的IDE(http://www.jb51.net/softs/299378.html),官网提供了mac.windows和linux三种版

  • 详解Hadoop 运行环境搭建过程

    一,集群搭建步骤 1.先在一台虚拟机配置jdk,hadoop 2.克隆 3.修改网络等相关配置 当我们使用虚拟机时,可能自然而然的会想上面的步骤一样先搭建一台虚拟机,做好相关配置,然后进行克隆,继而修改一些网络配置来搭建集群,但是在生产过程中是买好的服务器,不存在克隆这一说,所以在此采用的步骤是: 1.建立一台虚拟机(仅带jdk安装包) 2.克隆 3.修改网络等相关配置 4.配置第一个hadoop节点,编写集群分发脚本使其他虚拟机完成配置 二,具体搭建过程 这里使用三台虚拟机来完成集群搭建,ha

  • 详解vue-cli开发环境跨域问题解决方案

    前后端分离开发中必要会遇到的问题-跨域.在使用vue开发的时候,开始为了解决跨域问题.采用的是CORS(Cross-origin resource sharing).后台在响应头中添加Access-Control-Allow-Origin.这样就可以跨域调后台接口了. 在前几天无意中看到了config的index.js文件中有一个proxyTable属性,通过配置可以解决开发环境的跨域 开发期间的API代理 当将此样板与现有后端集成时,通常需要在使用dev服务器时访问后端API.为了实现这一点,

  • 详解iOS WebDriverAgent 环境搭建

    详解iOS WebDriverAgent 环境搭建

    WebDriverAgent简介 WebDriverAgent是Facebook 在去年的 SeleniumConf 大会上推出了一款新的iOS移动测试框架.当时的推文申明,还只支持模拟器,不过在今年4月更新的版本中,官方宣称支持真机测试了,大家可以查看官方github 的介绍:https://github.com/facebook/WebDriverAgent 下面摘录一段官方对于WebDriverAgent的介绍字段: WebDriverAgent 在 iOS 端实现了一个 WebDrive

  • 详解ObjectARX开发环境的创建与开发实例Hello World(VS2005+AutoCad2008+ObjectArx2008)

    在一个做CAD二次开发的公司做Web开发,感觉可提升的空间很小. 有必要研究一下公司的产品开发,以利发展. 一.首先安装好vs05与cad2008 安装cad的时候也没有什么特别,加载到虚拟光驱,安装过程中有个错误提示,不影响继续. 二.安装ObjectArx2008直接打开解压缩到某个目录即可. 比如C:\ObjectARX 2008 然后打开C:\ObjectARX 2008\utils\ObjARXWiz目录,运行ArxWizards.msi 这样在新建C++项目的时候会出现ObjectA

  • 详解Angular开发中的登陆与身份验证

    前言 由于 Angular 是单页应用,会在一开始,就把大部分的资源加载到浏览器中,所以就更需要注意验证的时机,并保证只有通过了验证的用户才能看到对应的界面. 本篇文章中的身份验证,指的是如何确定用户是否已经登陆,并确保在每次与服务器的通信中,都能够满足服务器的验证需求.注意,并不包括对具体是否具有某一个权限的判断. 对于登陆,主要是接受用户的用户名密码输入,提交到服务器进行验证,处理验证响应,在浏览器端构建身份验证数据. 实现身份验证的两种方式 目前,实现身份验证的方法,主要有两个大类: Co

  • 详解Angular CLI + Electron 开发环境搭建

    本文介绍了Angular CLI + Electron 开发环境搭建,分享给大家 用 @angular/cli 配合 Electron 构建桌面软件开发环境,可以在 Electron 中使用 Angular 的各种特性,使开发桌面软件像开发网站一样简单.快捷,而且可以模块化,紧跟最新技术趋势. 安装 Angular CLI 和 Electron 首先使用 npm 安装 Angular Cli: $ npm i -g @angular/cli 然后安装 Electron $ npm i -g el

  • Android Studio开发环境搭建教程详解

    Android Studio开发环境搭建教程详解

    对于移动端这块,笔者之前一直都是进行iOS开发的,也从来没用过Java.但是因为进入了Google Android全国大学生移动互联网创新挑战赛(进入官网)的总决赛(笔者"西部计算机教育提升计划"的项目被直接推荐进入决赛),这个比赛要求一定要提交apk程序,所以我不得不赶紧学习一下Android开发了. 下面就对自己学习的过程做一个记录. 一.安装Android Studio 笔者用的计算机配置如下: Mac下安装Android Studio应该更简单一些,只需要下载一个Android

  • 鸿蒙OS开发环境搭建之DevEco Studio IDE下载安装过程详解

    整理了一下鸿蒙OS开发环境的搭建过程,希望对大家有所帮助.点赞关注大家安排上!!! 安装Node.js环境 下载地址:https://nodejs.org/zh-cn/ 选择长期支持版即可. 打开安装包,接下去一路傻瓜式安装. 安装好后,打开CMD窗口,输入 node -v 可以查看到node.js版本就算安装成功了 安装HUAWEI DevEco Studio 下载地址:https://developer.harmonyos.com/cn/develop/deveco-studio#downl

随机推荐