对于角我们知道,其是一款来自谷歌的用HTML和打印稿构建客户端应用的平台与的开源网页框架。而角本身就是用打印稿开发而成的。它将核心功能和可选功能作为一组打印稿库进行实现,可以根据需求把它们导入到应用中。角的基本构造块是NgModule,它为组件提供了编译的上下文环境.NgModule会把相关的代码收集到一些功能集中。事实上角应用就是由一组NgModule定义出的。应用只会有会有一个用于引导应用的根模块,当然了我们可以根据需要定义需要子根模块,通常我们还会引用其他特性的模块或者我们的自定义模块。
那我们要怎么样才能快速搭建和部署Angualr项目呢?
搭建技巧
-
<李>准备工作
-
<李>安装nodejs。安装稳定版本
节点。js安装包及×××地址为:https://nodejs.org/en/download/?/p> 李 <李>安装cnpm。这个是由于墙的原因,通过这个方式,使我们在构建项目的时候不会花过多的时间。通过cnpm我们设置淘宝源作为代理,加速我们的安装进程
npm安装- g cnpm——注册表=https://registry.npm.taobao.org
李 <李>使用npm/cnpm安装角/cli。
<代码> npm安装- g @angular/cli或者cnpm安装- g @angular/cli 李
-
<李>直接安装:
<代码> ng新angulardemo
这个过程,我们需要等待相当一段时间,让项目安装好相关的依赖
不过嘛,我们可以使用命令·npm安装angulardemo——skip-install·创建项目之后,会直接跳过npm安装这个环节,之后我们可以通过
<代码> cd angualrdemo> cnpm安装让我们的项目通过国内淘宝源进行安装依赖李 李
-
<李>通过命令ng服务——开放会打开默认端口4200进行访问李
<李>如果不想通过给端口则是通过ng——服务端口[]在方括号里面输入端口号来运行项目
通过这三个简单的操作,我们就可以建立起来一个简单角项目。好了,我们既然已经建立了这么要一个角项目了,那么我们当然很需要了解一下这个框架所生成的文件
目录结构分析
观察这个项目我们会发现,角的目录结构过分的错落有致,接下来,我们不妨分析一下这个列表以提高我们对这个框架的理解,系统中所创建的每个文件又有什么意义,文件中的代码又起到什么作用
首层目录:
角。json:工作区中所有项目的默认CLI配置,包括CLI使用的构建选项,运行选项,测试工具选项(比如TSLint,业力,量角器)等
李 李
e2e:在e2e下是端到端(端到端)测试
node_modules:我们安装的第三方模块都放置在这里,提供给整个工作区的npm包
src:项目所有的文件都放在这里
package.json:整个项目的配置文件,即npm的配置文件。配置用于工作区中所有项目的包依赖项。
README.md:自动生成的项目说明文档
tsconfig。json:打印稿编译器的配置,工作区中所有应用的默认打印稿配置。包括打印稿选项和角模板编译器选项。
tslint.json:给TSLink和CodeStyle用的配置信息,使代码风格一致
src层目录:
应用:组件,以及应用程序/模块放置的模块,我们新建的组件、服务、模块等组件对象都是存储在这个文件夹里面,整个程序的入口也在这个地方,这个文件夹也是我们发挥的舞台。
资产:静态资源。包含图像文件和其它文件,当构建应用时会被原样复制到构建目标中。
browserslist:支持的浏览器配置
环境:为各个目标环境准备的文件。包含针对特定目标环境的配置选项。默认情况下有一个未命名的标准开发环境和一个名叫“prod"的产品环境。你可以定义一些额外的目标环境配置。
ico
index . html:位于主页面
karma.conf.js
main.ts:应用的主要入口
polyfills.ts:填充库帮我们把这些不同点进行标准化,可能遇到socket . io的错误
styles: css全局的公共的风格文件
test.ts:单元测试的入口
tsconfig.app。json:打印稿的配置文件,继承自工作区级的tsconfig。json文件。
tsconfig.spec。json:继承自工作区级的tsconfig。json文件。
tslint。json:继承自工作区级的tsconfig。json文件。角搭建与分析(一)
