Angular搭建脚手架
1、安装CLI:
cnpm install -g @angular/cli
//卸载: npm uninstall -g @angular/cli npm cache clean
2、检测是否成功:
ng –version or ng v
3、新建项目
ng new ng-app //ng-app可以自己命名项目名称
cd ng-app //进入ng-app
ng serve //启服务
http://localhost:4200/ 访问angular项目
4、项目结构说明
文件 |
说明 |
E2e |
应用的端对端(e2e)测试,用 Jasmine 写成并用 protractor 端对端测试运行器测试。 |
Node_modules |
依赖包 |
Src |
|
App |
Angular应用文件 |
App.module.ts |
|
App.component.ts |
|
assets |
资源文件 |
Environments |
环境配置:开发、部署 |
Index.html |
应用的宿主页面。 它以特定的顺序加载一些基本脚本。 然后它启动应用,将根AppComponent放置到自定义<my-app>标签里。 |
Main.ts |
|
Polyfills.ts |
处理浏览器兼容问题 |
Tsconfig.app.json |
Typescript编译配置 |
Tsconfig.spec.json |
Typescript测试编译配置 |
Typings.d.ts |
类型定义文件 |
//.angular-cli.json |
Cli配置文件 |
.editorconfig |
统一代码风格工具配置,不支持的需要安装插件 |
.gitignore |
Git配置文件 |
//Karma.conf.js |
在测试指南中提到的 karma 测试运行器的配置。 |
//Package.json |
项目指定npm依赖包 |
Protractor.conf.js |
protractor 端对端 (e2e) 测试器运行器的配置。 |
Tsconfig.json |
Typescript编译配置 |
Tslint.json |
Typescript语法检查器 |
4.1根目录
一、三大目录
e2e目录:是端到端(end-to-end)测试;
mode_modules目录:是angular6.1项目所依赖的第三方模块库文件;
src目录:这时放置了我们项目的所有文件。
二、其他文件
.editorconfig:给你的编辑器看的一个简单配置文件
.gitignore: git 排除文件
angular.json: angular cli 的配置文件
package.json:npm 配置文件,项目使用到的第三方依赖包
protractor.conf.js:运行 ng e2e 的时候会用到
README.md:项目的基础文档
tsconfig.json:TypeScript 编译器的配置
tslint.json:运行 ng lint 时会用到
4.2根目录下的src目录
一、src下的三大目录
app目录:我们要编写的项目文件都在这个目录下;
assets目录:放置静态资源;
environments目录:环境文件目录;
二、其他文件
browserslist:前端工具之间共享[目标浏览器]的配置文件
favicon.ico:浏览器书签栏中图标
index.html:主页面 HTML 文件
karma.conf.js:运行 ng test 时会用到它
main.ts:应用的主要入口点
polyfills.ts:腻子脚本(polyfill)能把浏览器对 Web不同点进行标准化
styles.css:全局样式
test.ts:单元测试的主要入口点
tsconfig.app.json:TypeScript 编译器的配置文件
tslint.json:额外的 Linting 配置
4.3根/src/app目录
app.component.css:组件css样式文件
app.component.html:组件html文件
app.component.spec.ts:单元测试文件
app.component.ts:组件typescript文件
app.module.ts:模块文件,用来全局导入声明模块组件和服务等
Angular搭建脚手架的更多相关文章
- nodejs-使用multer实现多张图片上传,express搭建脚手架
nodejs-使用multer实现多张图片上传,express搭建脚手架 在工作中,我们经常会看到用户有多张图片上传,并且预览展示的需求.那么在具体实现中又该怎么做呢? 本实例需要nodejs基础,本 ...
- 使用yeoman搭建脚手架并发布到npm
前言 最近主要在写前端的模板类项目,由于其中的webpack配置和引进数据注入ejs模板的方法大同小异,所以萌发出把该模板框架提取出来作为一个常用的脚手架,也方便以后同事可以进行复用. 之前在看< ...
- Vue:Vue2.0搭建脚手架
随着Vue.js越来越火爆,更多的项目都用到Vue进行开发,在实际的开发项目中如何搭建脚手架呢?今天就来跟大家分享一下如何使用vue-cli搭建脚手架. 一.安装node.js 1.进入官网https ...
- React 如何搭建脚手架
React 如何搭建脚手架 npm install -g create-react-app //安装 create-react-app react-demo // react-demo ...
- Vue搭建脚手架2
Vue2.0搭建Vue脚手架(vue-cli) 在网上找了很多的搭建脚手架教程,但都不求甚解.终于找到2个比较好的教程,读者可对比阅读1和2,在这里分享给大家,希望对初学者有所帮助.ps:高手请绕道. ...
- Vue搭建脚手架1
Vue2.0搭建Vue脚手架(vue-cli) 此文章参考了网上一些前人的技术分享,自己拿过来总结一下.此文章是基于webpack构建的vue项目,并实现简单的单页面应用.其中利用到的相关技术会简单加 ...
- 基于requirejs和angular搭建spa应用
接上篇,angular 实战部分,angular比较适合spa项目,这里不借助任何seed和构建工具,直接从零搭建,基本的angular项目结构大致包含如下几个部分: 1)app.js 入口 2)in ...
- Vue2.0搭建脚手架流程
介绍 Vue.js是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 安装node.js ...
- VUE系列一:VUE入门:搭建脚手架CLI(新建自己的一个VUE项目)
一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分 ...
随机推荐
- 资深专家深度剖析Kubernetes API Server第2章(共3章)
欢迎来到深入学习Kubernetes API Server的系列文章的第二部分.在上一部分中我们对APIserver总体,相关术语及request请求流进行探讨说明.在本部分文章中,我们主要聚焦于探究 ...
- 数据结构6: 静态链表及C语言实现
本节继续介绍线性表的另外一种链式表示——静态链表.(前面介绍的链表称为 动态链表 ). 逻辑结构上相邻的数据元素,存储在指定的一块内存空间中,数据元素只允许在这块内存空间中随机存放,这样的存储结构生成 ...
- CODEVS 1205 单词反转
嗯.... 这道题看起来挺像一个字符串的题,但其实却错了,它实质上却用了一个栈进行了一个模拟(当然还有一种鬼畜的做法,下面也会介绍到..... 首先先看题: 时间限制: 1 s 空间限制: 12800 ...
- maven部署Tomcat(出现空白页面,最终解决)
- HashMap 1.8的源码分析一
public class HashMap<K,V> extends AbstractMap<K,V> implements Map<K,V>, Cloneable, ...
- 使用Mybatis-plus发生org.apache.ibatis.binding.BindingException: Invalid bound statement (not found):
容我慢慢说来,之前是使用springboot+mybatis.我一直采用xml配置文件写sql. 后来采用了mybatis-plus之后,在本地上面测试没有一点问题.一放到服务器就发生这种情况 在本地 ...
- Codeforces Round #335 (Div. 2) C
C. Sorting Railway Cars time limit pe ...
- hdu2067 小兔的棋盘
小兔的棋盘 时间限制:1000/1000 MS(Java / Others)内存限制:32768/32768 K(Java / Others)总提交内容:13029接受的提交内容:6517 问题描述 ...
- 查询mysql单库的修改时间,大小
select database_name,max(last_update) from mysql.innodb_table_stats group by database_name; SELE ...
- my.变身卡
中级 1620 (4--6级) 高级 8323 (7--9级) 赤炎: 1.老鼠精 135 / 150 2.白骨精 750 3.情丝娘子 264 / 294 4.沙和尚 500 5.九头虫 1835 ...