angular的项目基本配置的了解
创建Angular的脚手架
1.在全局安装Angular脚手架环境(安过就不用在安了)
npm install -g @angular/cli
2.在本地文件夹中创建angular项目(找好要安装到那个目录中,在那个目录下cmd)
3.进入项目 启动项目
npm start 或者 ng serve(ng serve --open --open代表自动打开浏览器 简写为 -o)
ng serve --port 4300(改变默认端口号)
angular的版本
Angular.js 代表1.x版本 现在依然在维护中,不在做升级 它是一个框架模式是 MVC
Angular 代表2.x版本以上 它的版本升级比较快 它的框架是 MVVM
Angular 欧美公司 企业用的比较多
Angular 是谷歌开发的
typeScript是微软开发的 js超级塔并不是一门新的语言 它是在js的基础上增加了数据定义类型 真正意义上去实现面向对象的概念
项目文件夹目录
e2e 端到端的测试
node_modules 第三方包管理
src 代码文件夹
.editorconfig 代码编辑器的配置
.gitignore 指定git应忽略的不必追踪的文件
README.md 根应用的简介文档
angular.json
为工作区中的所有项目指定cli的默认配置,包括cli要用到的构建、启动开发服务器和测试工具的配置项,比如TSLint,Karma和Protractor。
package.json
配置工作空间中所有项目可用的npm包依赖。有关此文件的具体格式和内容
tsconfig.json
工作空间中各个项目的默认 TypeScript配置
tslint.json
工作空间中各个项目的默认 TSLint配置
src 文件夹中的配置
app 根组件相关的配置文件
assets 静态资源管理
environments/
包含特定目标环境的构建配置项。默认情况下,有一个无名的标准开发环境和一个生产("prod")环境。你还可以定义其他的目标环境配置
favicon.ico
用作该应用在标签栏中的图标
index.html
当有人访问你的站点的时候,提供服务的主要HTML页面,CLI会在构建你的应用时自动添加所有的JavaScript和css文件,所以你通常不用手动添加任何<script>或者<link>标签
main.ts 入口文件
polyfills.ts 浏览器支持的脚本
style.css 样式文件
test.ts 测试文件
app这个根组件的配置
app-routing.modul.ts 路由相关的配置文件(单独下载的)
app/app.component.ts
为应用的根组件定义逻辑,名为 AppComponent 。当你向应用中添加组件和服务时,与这个根组件相关联的视图就会成为视图树的根
app/app.component.html
定义与根组件 Appcomponent 相关的HTML模板
app/app.component.css
为根组件 AppComponent 定义了基本的CSS 样式表
app/app.component.spec.ts
为根组件 AppComponent定义一个单元测试
app/app.module.ts
定义了名为AppModule的根模块,它会告诉Angular如何组装应用。这里最初只声明一个 AppComponent。当你向应用中添加更多组件时,它们也必须在这里声明
在angular中 快速创建一个组件
ng g c component/index(后面这个是文件夹名字)