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

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

目录
相关文章
|
8月前
|
Web App开发 存储 前端开发
使用 Chrome 开发者工具研究一个基于 Angular 开发的网站源代码
使用 Chrome 开发者工具研究一个基于 Angular 开发的网站源代码
41 0
|
6月前
|
JavaScript 前端开发 开发工具
TypeScript 可以与其他流行的开发工具和框架结合使用,如 Angular 和 React 等。具体应用案例解析
TypeScript 可以与其他流行的开发工具和框架结合使用,如 Angular 和 React 等。具体应用案例解析
|
10月前
|
JavaScript API 开发者
为依赖Angular.js的上古项目给VSCode编写$scope定义跳转扩展插件
虽然Angular.js停止更新已经一年了,但依赖它的上古时代的项目并不少。由于都是使用js开发,很难为其提供很好的维护,所以直到今天开发维护也并不愉快。可以说没有开发插件的支持,再成熟老练的框架都发挥困难。
120 0
为依赖Angular.js的上古项目给VSCode编写$scope定义跳转扩展插件
|
XML Web App开发 前端开发
使用VScode开发Angular
使用VScode开发Angular
885 0
使用VScode开发Angular
|
缓存 前端开发 JavaScript
Javascript学习-angular开发环境搭建及新建项目并运行
Javascript学习-angular开发环境搭建及新建项目并运行
84 0
Javascript学习-angular开发环境搭建及新建项目并运行
|
JavaScript 前端开发 开发工具
Angular最新教程-第一节环境搭建和新建项目
Angular最新教程-第一节环境搭建和新建项目
265 0
Angular最新教程-第一节环境搭建和新建项目
|
Web App开发 测试技术 C++
Angular最新教程-第三节在谷歌浏览器中调试Angular
Angular最新教程-第三节在谷歌浏览器中调试Angular
591 0
Angular最新教程-第三节在谷歌浏览器中调试Angular
|
前端开发 数据安全/隐私保护 CDN
Angular最新教程-第六节编写响应式导航栏
Angular最新教程-第六节编写响应式导航栏
356 0
Angular最新教程-第六节编写响应式导航栏
|
资源调度 JavaScript 测试技术
Angular 2.x折腾记 :(1)初识Angular-cli[官方脚手架]及脱坑要点
这个系列的进度有些跳跃性,我尽量直白点解释,但是我不是官方文档,直入主题!!!!
138 0
|
JavaScript 前端开发
如何使用 Visual Studio Code 调试 Angular Schematics 实现
如何使用 Visual Studio Code 调试 Angular Schematics 实现
117 0
如何使用 Visual Studio Code 调试 Angular Schematics 实现