Angular 安装,目录结构介绍
Angular 4.0 安装
-
组件是 Angular 的核心思想
- Angular 支持跨平台，手机 PC 都可以, 是谷歌创建的 JS 框架
- Single-Page-Application 单页应用 一些angular的项目列表
-
中文官网; angular 官网
-
先安装 Node.js (LTS 稳定版) 安装完之后看看自己的 nodejs 版本 (npm -v),
安装完 node.js 我们就可以使用这种 npm 命令了
- 然后安装 Angular CLI 工具： 运行 npm install -g @angular/cli
Tips: Angular 的 code 是用 ts (TypeScript) 编写的， 因此我们需要安装 CLI 工具来将 ts 解析为浏览器可以读取的 js 代码
ng -v 查看 CLI 版本
CLI = command line interface
CLI 官方文档 CLI 官方文档英文版本
安装完了 CLI 就可以执行各种 ng 命令了
- sublime 配置 TypeScript 环境 Ctrl+Shift+P --> package install --> TypeScript
配置 format : 命令行 cd C:\Program Files\Sublime Text 3
npm install --save-dev prettier
npm install --global prettier (貌似这个好用 上面那个不好用)
Ctrl+Shift+P --> package install --> JsPrettier
To add a custom key binding, please reference the following
ctrl+shift+p
选 Preferences: Key Bindings 再右边写：
example which binds the js_prettier command to ctrl+shift+y: 这里不要写 h 会和 html 格式化工具冲突
{
"keys": ["ctrl+shift+y"],
"command": "js_prettier"
}
-
Angular 的版本
- Angular1 = AngularJS 2009 年由 Google 发布
- Angular2 = Angular : 相对于 Angular1，它是一个完全重构之后的架构，与 Angular1 已经没有什么关系了
2016年9月发布
- Angular4 = Angular2+, 对 Angular2 的 bug 做了一些改进, 并且增加了一些功能 2017年正式发布
目录结构
e2e: 端d对端的测试目录， 用来做集成测试的
node_modules 项目的模块依赖目录
package.json 项目初始化管理文件
tsconfig.json ts 的配置文件
tslint.json ts 进行代码检测时候的总体配置文件
README.md 说明书
.gitignore git 代码版本管理忽略的文件
karma.conf.js 是 karma 测试的配置文件
karma.conf.js 编译器的配置文件
src 应用源代码目录，我们的代码也就在这个目录中
- app 我们的主组件等模块信息
- app.component.ts typescript 脚本文件
- app.component.css 组件的样式文件
- app.component.html 组件的模板文件，根组件
- app.component.spec.ts 组件的单元测试文件
- app.module.ts 数据模型定义的文件
- imports : 导入其他 module，其他 module 暴露出的 component、Directive、Pipes等可以在本module的组件中被使用。比如导入 CommonModule 后 Ngif, NgFor 等命令。
import { HeaderComponent } from './header/header.component'; //组件 import {FormsModule} from '@angular/forms'; // form 声明
- declarations : 模块内部 Compnents、Directive、Popes 的列表，声明这个模块中的内部成员， 目前我接触到的就是要写所有组件的".ts 文件里的类名"
declarations: [
AppComponent,
HerosComponent
]
- providers: [],指定应用程序的根级别需要使用的 service. (Angular4 没有模块级别的 service,所有在 NgModule 中声明的 provider 都是注册在根级别的 Dependency Injector 中)
- exports: 用来控制哪些内部成员暴露给外部使用。 导入一个moduleA (module A 里还有 module B) 并不意味着会自动导入 module B 所暴露的公共成员。 除非 module A 中把 module B 写到了export 中。
- bootstrap: [AppComponent] 通常是 app 启动的根组件，一般只有一个 component. bootstrap 中的组件会自动被放入到 entryComponets 中
- entryComponent : 不会在模板中被引用到的组件。 这个属性一般情况下只有 ng 自己使用, 一般是 bootstrap 组件或者路由组件， ng 会自动把 bootstrap、 路由组件放入其中。 除非不通过路由动态将 component 加入 DOM 中，否则不会用到这个属性。
- 所有的 ###.module.ts 数据模型文件 是创建类的文件
- assets 资源文件目录
- environments 环境配置目录
- index.html 是我们的主页面:
- 我们不要在这个文件里写 html code, 它只是一个入口的显示文件
- <app-root>这里我们可以在这里加一个 Loading...</app-root>
我们在运行 ng serve 后，第一次打开项目的时候 http://localhost:4200/， 页面会显示 Loading 的内容，而我们再次刷新页面的时候将不会再次显示 Loading... 这是因为缓存吗？ 不是因为缓存 项目在加载完成后，对代码进行了 DOM 渲染的替换.
- 在页面显示完成以后， 我们的 app-root 最终会被解析成 DOM 对象
- index.html 在查看源代码的时候回发现有一些引入的 JS 代码 如：runtime.js, vendor.js 等
这是因为 Angular 将我们的项目通过 webpack 进行了打包，将一些 JS 文件自动引入到了 index.html 文件中
- main.ts 脚本入口文件
- polyfills.ts 检测兼容的一个文件信息
- style.css 全局的样式信息
- test.ts 单元测试入口文件
