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编辑

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

目录
相关文章
|
1月前
|
JavaScript 前端开发 开发者
VUE 开发——Node.js学习(一)
VUE 开发——Node.js学习(一)
64 3
|
1月前
|
JavaScript
js学习--制作猜数字
js学习--制作猜数字
37 4
js学习--制作猜数字
|
1月前
|
JavaScript
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
这篇文章介绍了如何将webpack的配置文件分离成开发环境和生产环境的配置文件,以提高打包效率。
46 1
webpack学习五:webpack的配置文件webpack.config.js分离,分离成开发环境配置文件和生产环境配置文件
|
15天前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
21 1
|
16天前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
15 1
|
24天前
|
JavaScript 测试技术 API
跟随通义灵码一步步升级vue2(js)项目到vue3版本
Vue 3 相较于 Vue 2 在性能、特性和开发体验上都有显著提升。本文介绍了如何利用通义灵码逐步将 Vue 2 项目升级到 Vue 3,包括备份项目、了解新特性、选择升级方式、升级依赖、迁移组件和全局 API、调整测试代码等步骤,并提供了注意事项和常见问题的解决方案。
|
2月前
|
算法 JavaScript 前端开发
第一个算法项目 | JS实现并查集迷宫算法Demo学习
本文是关于使用JavaScript实现并查集迷宫算法的中国象棋demo的学习记录,包括项目运行方法、知识点梳理、代码赏析以及相关CSS样式表文件的介绍。
第一个算法项目 | JS实现并查集迷宫算法Demo学习
|
27天前
|
JavaScript 前端开发 测试技术
JavaScript与TypeScript:为何TypeScript成为大型项目的首选
JavaScript与TypeScript:为何TypeScript成为大型项目的首选
28 1
|
28天前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
1月前
|
JavaScript
js学习--制作选项卡
js学习--制作选项卡
37 4