Javascript学习-angular开发环境搭建及新建项目并运行

简介: Javascript学习-angular开发环境搭建及新建项目并运行

 今天下午两点的时候,同事忽然说他有两个活,搞不过来了,让我帮我搞一个前端项目,我以为用的是VUE.js,想着前端项目简单!没想到svn下载一看,卧槽,angular。。。。。

   瞬间没了兴趣,我的主攻方向是Java后端服务器开发,虽然咱前端也会,但是确实是不打算再去付出精力搞前端。。。

   废话少说,项目都搞下来了,把它先搞起来吧。。。遇上了就是缘分

   start

一、搭建环境

   node管理依赖,angular/cli 用来管理angular项目的创建、运行、调试等

1、安装node,这个简单,网上有很多教程,一直next就好,我本地有以前安装好的,但是版本应该旧了,所以我先升级一下:

   第一步:查看以前的node版本

$ node -v

image.gif

  第二步:清楚node的cache缓存

$ sudo npm cache cleam -f

image.gif

   第三步:安装n工具

$ sudo npm install -g n

image.gif

   第四步:安装最新版node

$ sudo n stable

image.gif

   OK

   第五步:再次查看版本,你就发现版本号更新了。。。

2、可以安装阿里的淘宝镜像cnpm来代替node本身的npm,以后就可以用cnpm了。因为快!

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

image.gif

3、安装angular/cli

$ cnpm install -g @angular/cli

image.gif

如果提示你没有权限,那就加个sudo,借用下root权限。

到此 环境安装完成!

二、新建angular项目

angular adj.有角的;有尖角的;角度的;角的;用角度量的;方位基点宫的;成角度的;瘦骨嶙峋的

也不知为啥起个这名字,头角峥嵘的意思?

第一步:打开终端,或者用vs里自带的也行,cd到你想要放项目的目录,输入:

$ ng new oneAngular

image.gif

image.png
编辑

问你要给这个项目添加设置路由吗?yes

这玩意应该是会自动给你加个小模版专门管理配置路由,即使是no了,以后也能自己生成,不感兴趣。。。

image.png

编辑

这是选择css的预编译器,scss,然后就create了好多

image.png编辑

打开vs,安装个插件支持angular的开发

image.png编辑

最后 用vs打开项目,就可以开发了。

image.png编辑

三、运行

在终端cd到你的项目根目录下,也就是咱们的 oneAngular 目录下输入:

$ ng serve --open

image.gif

image.png编辑

等待编译完成后,就会打开默认浏览器:等等等等!

image.png编辑

没球意思,仅此记录一下,好了我要写我的接口去了。。。😄

目录
相关文章
|
3月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
182 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
2月前
|
JavaScript 安全 前端开发
关于Node.js,一定要学这个10+万Star项目 !!
一篇关于Node.js的宝藏项目——Node.js Best Practices。该项目在GitHub上已有102k Star,汇集了100+条最佳实践,涵盖架构、安全、性能等多方面。每条实践不仅有简明说明和详细解释,还附带代码示例及资源链接。文中通过三个实战案例(利用CPU多核、避免阻塞事件循环、使用中间件处理错误)展示了其实际应用价值,并推荐了几条对前端转Node.js开发者特别有用的最佳实践。强烈建议每位Node.js开发者学习此项目,理解“怎么做”与“为什么要这么做”,以提升开发能力。
|
4月前
|
人工智能 JavaScript 关系型数据库
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
161 14
【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
|
4月前
|
前端开发 JavaScript Java
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
242 13
【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
|
4月前
|
SQL JavaScript 安全
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
179 11
【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
|
4月前
|
人工智能 JavaScript 安全
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
188 13
【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
|
7月前
|
CDN
如何在项目中使用Moment.js库?
如何在项目中使用Moment.js库?
|
7月前
|
JavaScript 前端开发 安全
JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择
本文深入探讨了JavaScript与TypeScript的对比,分析了两者的特性及在实际项目中的应用选择。JavaScript以其灵活性和广泛的生态支持著称,而TypeScript通过引入静态类型系统,提高了代码的可靠性和可维护性,特别适合大型项目。文章还讨论了结合使用两种语言的优势,以及如何根据项目需求和技术背景做出最佳选择。
204 4
|
7月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
1067 1
|
9月前
|
算法 JavaScript 前端开发
第一个算法项目 | JS实现并查集迷宫算法Demo学习
本文是关于使用JavaScript实现并查集迷宫算法的中国象棋demo的学习记录,包括项目运行方法、知识点梳理、代码赏析以及相关CSS样式表文件的介绍。
第一个算法项目 | JS实现并查集迷宫算法Demo学习

热门文章

最新文章