前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Angular开发实践(一):环境准备及框架搭建

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

作者头像
laixiangran
发布2018-04-11 16:33:11
1.3K0
发布2018-04-11 16:33:11
举报
文章被收录于专栏:前端布道

引言

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

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

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

环境准备

  • 全局安装NodeJs(>6.9.x),包含npm(>3.x.x)
  • 全局安装angular-cli
代码语言:javascript
复制
npm install -g @angular/cli
  • IDE推荐使用WebStorm

框架搭建

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

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

代码语言:javascript
复制
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目录

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

根目录

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

根目录

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

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-03-22,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端布道 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 引言
  • 环境准备
  • 框架搭建
  • 项目文件概览
    • src文件夹
      • 根目录
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档