Angular最新教程-第一节环境搭建和新建项目

简介: Angular最新教程-第一节环境搭建和新建项目

步骤一:安装开发环境

在开始学习angular之前,我们要先设置好开发环境。
一般现在的的开发环境基本上都是nodejs,
因为基本上都有使用了nodejs的npm管理和安装依赖包。
如果你的电脑上已经安装过nodejs,那你可以现在命里行中输入node -v 和 npm -v查看他们的版本。

image.png

angular 要求node 6.9.x 和 npm 3.x.x 以上的版本。
如果你电脑上的版本低于要求,那么可以到官网重新下载nodejs,覆盖安装就好了。
安装的方法有很多种,参照nodejs官网:https://nodejs.org/download


步骤二:安装TypeScript

安装完nodejs接着就可以安装TypeScript了。
运行命令:$ npm install -g typescript

image.png

TypeScript 作为JavaScript的超集,
TS无论可读性、可维护性、上手的容易程度、写代码的速度,都非常明显地优于JS。
可能未开始之前,你会觉得,刚学了一个JavaScript,现在又要学一个TypeScript。
但其实只要你动手敲几行代码,你就会发现,其实TypeScript比JavaScript要容易的多。


步骤三:安装Angular CLI

Angular CLI是一个命令行界面工具,它可以创建项目、添加文件以及执行一大堆开发任务,比如测试、打包和发布。
Angular CLI是一个功能很强大的开发工具,你甚至可以用它来创建组建,使得整个项目的代码风格保持一致。
安装Angular CLI只要运行命令:$ npm install -g @angular/cli

image.png


步骤四:安装VS Code

这里我们选择的开发工具是VS Code。
可能你已经有了自己用的很习惯的开发工具,
比如我自己之前一直使用的是webstorm。
但是现在还是下载了VS Code。
因为VS Code可以直接Debug Angular应用(下一节课中讲解)了。
还可以增加插件,用来检测代码规范。
直接官网下载安装即可。https://code.visualstudio.com/
安装完成,如下图。

image.png


步骤五:安装Angular TypeScript Snippets for VS Code

这个插件用于在VS Code中添加了angular的代码片段。
效果如下:

image.png

在你要新建任何东西之前,你可以先查阅一下,已有片段。
常见的有

image.png


更多详情可查看:https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2
安装过程:
点击侧边栏的扩展按钮。

image.png

搜索并安装angular v4 typescript snippets

image.png


步骤六:新建示例项目

打开命令行窗口,运行下列命令(注意当前文件目录,在哪运行就在那新建项目)
(为了防止项目找不着了,我们先cd到d盘。如果你能搞清楚当前目录,可忽略这一步。)

image.png

$ ng new oniplan-ng
ng new 是angular的新建项目的cli,后面跟着的是项目的名字,你可以取一个你自己喜欢的名字。

image.png

执行命令还是挺快的,但是到 Installing packages for tooling via npm.这行之后,会比较慢,因为要安装很多npm的依赖。
总的来说安装时间比较久,耐心等候就好。


步骤七:启动开发服务

进入项目目录,并启动开发服务。

cd oniplan-ng
ng serve –open

ng serve命令会启动开发服务器,监听文件变化,并在修改这些文件时重新构建此应用。
使用–open(或-o)参数可以自动打开浏览器并访问http://localhost:4200/。
详细的cli说明可以查阅https://cli.angular.io/
(有用到的基本上后面的教程中都会讲解)

image.png

如果你看到这个界面,那说明,你的环境搭建和新建项目已经完成了。

这节课的内容就到这里结束了。
感谢您的阅读。
我是莽夫,希望你开心。

目录
相关文章
|
16天前
|
API 开发者 UED
PrimeFaces:JSF的魔法衣橱,解锁UI设计的无限可能!
【8月更文挑战第31天】本文介绍如何结合 JSF(JavaServer Faces)和 PrimeFaces 构建美观且功能强大的现代用户界面。PrimeFaces 提供丰富的 UI 组件库,包括按钮、输入框、数据网格等,支持现代 Web 标准,简化界面开发。文章通过具体示例展示如何使用 `<p:inputText>` 和 `<p:calendar>` 等组件创建用户表单,并用 `<p:dataTable>` 展示数据集合,提升 JSF 应用的易用性和开发效率。
24 0
|
16天前
|
UED
JSF文件下载:解锁终极文件传输秘籍,让你的Web应用瞬间高大上!
【8月更文挑战第31天】掌握JSF文件下载功能对构建全面的Web应用至关重要。本文通过具体代码示例,详细介绍如何在JSF中实现文件下载。关键在于后端Bean中的文件读取与响应设置。示例展示了从创建实体类到使用`<h:commandLink>`触发下载的全过程,并通过正确设置响应头和处理文件流,确保文件能被顺利下载。这将显著提升Web应用的实用性与用户体验。
28 0
|
16天前
|
Java Spring
🔥JSF 与 Spring 强强联手:打造高效、灵活的 Web 应用新标杆!💪 你还不知道吗?
【8月更文挑战第31天】JavaServer Faces(JSF)与 Spring 框架是常用的 Java Web 技术。本文介绍如何整合两者,发挥各自优势,构建高效灵活的 Web 应用。首先通过 `web.xml` 和 `ContextLoaderListener` 配置 Spring 上下文,在 `applicationContext.xml` 定义 Bean。接着使用 `@Autowired` 将 Spring 管理的 Bean 注入到 JSF 管理的 Bean 中。
29 0
|
16天前
|
开发者 安全 SQL
JSF安全卫士:打造铜墙铁壁,抵御Web攻击的钢铁防线!
【8月更文挑战第31天】在构建Web应用时,安全性至关重要。JavaServer Faces (JSF)作为流行的Java Web框架,需防范如XSS、CSRF及SQL注入等攻击。本文详细介绍了如何在JSF应用中实施安全措施,包括严格验证用户输入、使用安全编码实践、实施内容安全策略(CSP)及使用CSRF tokens等。通过示例代码和最佳实践,帮助开发者构建更安全的应用,保护用户数据和系统资源。
28 0
|
16天前
|
容器 iOS开发 Linux
震惊!Uno Platform 响应式 UI 构建秘籍大公开!从布局容器到自适应设计,带你轻松打造跨平台完美界面
【8月更文挑战第31天】Uno Platform 是一款强大的跨平台应用开发框架,支持 Web、桌面(Windows、macOS、Linux)及移动(iOS、Android)等平台,仅需单一代码库。本文分享了四个构建响应式用户界面的最佳实践:利用布局容器(如 Grid)适配不同屏幕尺寸;采用自适应布局调整 UI;使用媒体查询定制样式;遵循响应式设计原则确保 UI 元素自适应调整。通过这些方法,开发者可以为用户提供一致且优秀的多设备体验。
30 0
|
16天前
|
开发者 C# C++
揭秘:如何轻松驾驭Uno Platform,用C#和XAML打造跨平台神器——一步步打造你的高性能WebAssembly应用!
【8月更文挑战第31天】Uno Platform 是一个跨平台应用程序框架,支持使用 C# 和 XAML 创建多平台应用,包括 Web。通过编译为 WebAssembly,Uno Platform 可实现在 Web 上运行高性能、接近原生体验的应用。本文介绍如何构建高效的 WebAssembly 应用:首先确保安装最新版本的 Visual Studio 或 VS Code 并配置 Uno Platform 开发环境;接着创建新的 Uno Platform 项目;然后通过安装工具链并使用 Uno WebAssembly CLI 编译应用;最后添加示例代码并测试应用。
35 0
|
16天前
|
iOS开发 Android开发 MacOS
从零到全能开发者:解锁Uno Platform,一键跨越多平台应用开发的神奇之旅,让你的代码飞遍Windows、iOS、Android、macOS及Web,技术小白也能秒变跨平台大神!
【8月更文挑战第31天】从零开始,踏上使用Uno Platform开发跨平台应用的旅程。只需编写一次代码,即可轻松部署到Windows、iOS、macOS、Android及Web(通过WASM)等多个平台。Uno Platform为.NET生态带来前所未有的灵活性和效率,简化跨平台开发。首先确保安装了Visual Studio或VS Code及.NET SDK,然后选择合适的项目模板创建新项目。项目结构类似传统.NET MAUI或WPF项目,包含核心NuGet包。通过简单的按钮示例,你可以快速上手并构建应用。Uno Platform让你的技术探索之旅充满无限可能。
22 0
|
16天前
|
前端开发 开发者 安全
JSF支付功能大揭秘:探索如何在Java世界中实现安全无缝的在线支付体验
【8月更文挑战第31天】在电子商务和在线交易日益普及的今天,实现在线支付功能已成为许多Web应用的必备需求。JavaServer Faces (JSF) 作为一种流行的Java Web框架,提供了丰富的组件和工具来构建用户界面,包括与支付网关集成以实现在线支付。支付网关是处理信用卡和借记卡支付的系统,在商家和银行之间起到桥梁作用。本文将探讨如何使用JSF与支付网关集成,以及实现在线支付功能时需要考虑的关键点
29 0
|
16天前
|
开发者 前端开发 开发框架
JSF与移动应用,开启全新交互体验!让你的Web应用轻松征服移动设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,移动设备的普及使得构建移动友好的应用变得至关重要。尽管JSF(JavaServer Faces)主要用于Web应用开发,但结合Bootstrap等前端框架,也能实现优秀的移动交互体验。本文探讨如何在JSF应用中实现移动友好性,并通过示例代码展示具体实现方法。使用Bootstrap的响应式布局和组件可以确保JSF页面在移动设备上自适应,并提供友好的表单输入和提交体验。尽管JSF存在组件库较小和学习成本较高等局限性,但合理利用其特性仍能显著提升用户体验。通过不断学习和实践,开发者可以更好地掌握JSF应用的移动友好性,为Web应用开发贡献力量。
25 0
|
16天前
|
前端开发 UED
Angular 动画教程超赞!掌握让应用更具交互性的技巧,开启精彩的前端动画之旅!
【8月更文挑战第31天】在现代前端开发中,提升用户体验至关重要,而动画是增强应用交互性的有效手段。Angular 提供了强大的动画功能,可轻松添加各种动画效果。本文介绍了 Angular 动画的基本概念、使用动画模块、事件触发动画、动画序列与并行执行、性能优化及结合第三方动画库等最佳实践。通过遵循这些实践,可以充分发挥 Angular 动画的优势,提升用户体验。下面是一个简单的示例应用,展示了如何使用 Angular 动画实现元素的显示和隐藏效果。
24 0