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搭建脚手架的更多相关文章

  1. nodejs-使用multer实现多张图片上传,express搭建脚手架

    nodejs-使用multer实现多张图片上传,express搭建脚手架 在工作中,我们经常会看到用户有多张图片上传,并且预览展示的需求.那么在具体实现中又该怎么做呢? 本实例需要nodejs基础,本 ...

  2. 使用yeoman搭建脚手架并发布到npm

    前言 最近主要在写前端的模板类项目,由于其中的webpack配置和引进数据注入ejs模板的方法大同小异,所以萌发出把该模板框架提取出来作为一个常用的脚手架,也方便以后同事可以进行复用. 之前在看< ...

  3. Vue:Vue2.0搭建脚手架

    随着Vue.js越来越火爆,更多的项目都用到Vue进行开发,在实际的开发项目中如何搭建脚手架呢?今天就来跟大家分享一下如何使用vue-cli搭建脚手架. 一.安装node.js 1.进入官网https ...

  4. React 如何搭建脚手架

    React 如何搭建脚手架   npm install -g create-react-app    //安装 create-react-app react-demo    // react-demo ...

  5. Vue搭建脚手架2

    Vue2.0搭建Vue脚手架(vue-cli) 在网上找了很多的搭建脚手架教程,但都不求甚解.终于找到2个比较好的教程,读者可对比阅读1和2,在这里分享给大家,希望对初学者有所帮助.ps:高手请绕道. ...

  6. Vue搭建脚手架1

    Vue2.0搭建Vue脚手架(vue-cli) 此文章参考了网上一些前人的技术分享,自己拿过来总结一下.此文章是基于webpack构建的vue项目,并实现简单的单页面应用.其中利用到的相关技术会简单加 ...

  7. 基于requirejs和angular搭建spa应用

    接上篇,angular 实战部分,angular比较适合spa项目,这里不借助任何seed和构建工具,直接从零搭建,基本的angular项目结构大致包含如下几个部分: 1)app.js 入口 2)in ...

  8. Vue2.0搭建脚手架流程

    介绍 Vue.js是一套构建用户界面的渐进式框架.Vue 只关注视图层,采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 安装node.js ...

  9. VUE系列一:VUE入门:搭建脚手架CLI(新建自己的一个VUE项目)

    一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分 ...

随机推荐

  1. Internet路由-主机路由表和转发表

    1.路由表 路由信息最终要存储在用于路由器的主机或者专业路由器上,存放这些信息的地方称为路由表.其中包含三元素:目标地址,掩码,下一跳. 1.1.查询路由表的开销 有人认为查询路由表是一件和交换机查询 ...

  2. LCA【洛谷P2971】 [USACO10HOL]牛的政治Cow Politics

    P2971 [USACO10HOL]牛的政治Cow Politics 农夫约翰的奶牛住在N (2 <= N <= 200,000)片不同的草地上,标号为1到N.恰好有N-1条单位长度的双向 ...

  3. anglarJs分页

    首先在页面引入分页插件 <script src="../plugins/angularjs/pagination.js"></script> <lin ...

  4. 3D电影转2D普通电影,电脑上看

    下了一些电影,打开发现是左右两个一样的画面,什么情况?原来这就是传说中的3D,怎么像正常电影一样的看呢?第一反应去搜3D眼镜,价钱倒是不贵,但是不应急呀,肿么办?以下是观看方法: 一.看电脑上有QQ影 ...

  5. jquery知识点结合使用

    1.在页面的某个具有id的element内插入其他element,并给其增加悬浮提示. $('#id').after('<div id='box'></div>'); $('# ...

  6. redis安装及应用

    Redis安装及主从配置 server2,3,4. 安装 tar zxf redis-4.0.1.tar.gz cd redis-4.0.1 yum install -y gcc make make ...

  7. Netcore中实现字段和属性注入

    https://www.cnblogs.com/loogn/p/10566510.html 简单来说,使用Ioc模式需要两个步骤,第一是把服务注册到容器中,第二是从容器中获取服务,我们一个一个讨论并演 ...

  8. sf01_什么是数据结构

    数据结构解决什么问题 如何在计算机中存储数据和信息,采用什么样的方法和技巧加工处理这些数据,都是数据结构需要努力解决的问题. 解决问题的步骤 使用计算机解决问题的步骤:分析具体问题得到数学模型,设计解 ...

  9. 分布式思想和rpc解决方案介绍

    1.RPC的诞生 RPC(Remote Procedure Call)远程过程调用,通过这个rpc协议,调用远程计算机上的服务,就像调用本地的服务一样. 不同的服务部署在不同的机器上面,并且在启动后在 ...

  10. CSAPP阅读笔记-链接-第七章-P464-P500

    链接概述 经预处理器->编译器->汇编器处理后,源文件可被转化为一组可重定位目标文件,链接器将它们组合起来形成可执行文件. 每个可重定位目标文件由不同的“代码节”和“数据节”组成,每一个节 ...