Angular开发实践(一):环境准备及框架搭建

引言

在工作中引入Angular框架将近一年了,在这一年中不断的踩坑和填坑,当然也学习和积累了很多的知识,包括MVVM框架、前后端分离、前端工程化、SPA优化等等。因此想通过Angular开发实践这系列的文章分享下自己的所学,达到交流和分享的目的。

介绍之前,我假定你了解或者熟悉:

  • NodeJs
  • Npm
  • Git
  • Sass
  • TypeScript
  • angular-cli

环境准备

  • 全局安装NodeJs(>6.9.x),包含npm(>3.x.x)
  • 全局安装angular-cli
npm install -g @angular/cli
  • IDE推荐使用WebStorm

框架搭建

angular-start是我在GitHub上维护的一个起步项目,你可以直接下载作为基础开发框架来使用。

你可以通过以下几步快速启动并进行开发:

git clone https://github.com/laixiangran/angular-start.git
cd angular-start
npm install(等待依赖包安装完成,再进行下一步)
npm start

为了启动方便,在package.jsonscripts配置了"start": "ng serve --hmr -o --proxy-config proxy.config.json",可以看到这条命令分别配置了--hmr(启动模块热更新)、-o(自动打开浏览器)、--proxy-config(代理配置)

控制台信息:

控制台信息

浏览器界面:

浏览器界面

项目启动成功了,你可以进行下面的开发了。可能你还想了解下该项目中的文件都是干什么用的,那么我们就来了解下。

项目文件概览

src文件夹

应用代码位于src文件夹中。所有的Angular组件、模板、样式、图片以及应用所需的任何东西都在这里。这个文件夹之外的文件都是为构建应用提供支持用的。

src目录

使用HTML模板、CSS样式和单元测试定义AppComponent组件。 它是根组件,随着应用的成长它会成为一棵组件树的根节点。

根目录

src/文件夹是项目的根文件夹之一。其它文件是用来帮助我们构建、测试、维护、文档化和发布应用的。它们放在根目录下,和src/平级。

根目录

在e2e/下是端到端(end-to-end)测试。它们不在src/下,是因为端到端测试实际上和应用是相互独立的,它只适用于测试你的应用而已。这也就是为什么它会拥有自己的tsconfig.json

原文发布于微信公众号 - 前端布道(FontendPreach)

原文发表时间:2018-03-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏码匠的流水账

聊聊phantomjs的优化措施

phantomjs相当于一个后台浏览器,有点内嵌jetty的味道,通常在自动化测试或者爬虫领域用。

2061
来自专栏伪君子的梦呓

电脑使用 Vysor 控制手机

想用安卓手机一步一步演示个东西给别人看的时候,恰巧遇到对方不在身边;安卓手机上的东西想投影到 Windows 电脑上,用电脑控制手机,却没找到合适的方式;上班时...

2484
来自专栏前端儿

移动前端页面与Chrome的远程真机调试

前几日刚入手新手机小米5,系统真心流畅呀。为啥要买小米5呢,因为要提高生产力呀,好好玩移动前端开发呀哈哈哈

5523
来自专栏「3306 Pai」社区

nginx+php-fpm故障排查

小明初到一家公司做运维的工作,刚来的第一天就开始部署LNMP(Linux+Nginx+MySQL+PHP)环境,结果出现了问题。 他来向我请教。

4521
来自专栏TAPD

关爱程序员从「源码」做起 | 指引

在上一篇中, 小T推荐了TAPD代码管理的神器。 在1024这个特殊的日子里, 关爱程序员就从「源码」做起。 ? 按以下步骤即可轻松get「源码」福利: 公司...

953
来自专栏逸鹏说道

Asp.Net微信登录-电脑版扫描二维码登录

像京东,一号店等网站都实现了用微信来登录的功能,就是用手机上的微信扫一扫网站上的二维码,微信上确认后,即可自动用微信的帐号登录网站。 一、创建网站应用 在微信开...

5907
来自专栏程序员互动联盟

【专业技术】Windows里面如何玩转线程?

我们在编写程序的时候,常常会需要一些线程的delay函数。这个问题说简单也简单,说复杂也复杂。比如很多人读知道delay直接用Windows的API函数Slee...

3484
来自专栏月色的自留地

在Mac上使用vs-code快速上手c语言学习(入门文,老鸟退散)

1K4
来自专栏大数据实战演练

Linux NTP时钟同步

时钟同步在大数据方向,用到的地方很多。举个例子来说吧,像Zookeeper、RegionServer服务都是需要实时和各节点进行通信的。假如各节点差超过30s,...

4852
来自专栏腾讯Bugly的专栏

《移动端本地 H5 秒开方案探索与实现》

对 APP 里的一些使用 H5 实现的功能模块,一般体验都比原生差,那么怎么提高h5加载速度?优化 h5 体验?

1.3K13

扫码关注云+社区

领取腾讯云代金券