angularjs

angularjs 1.*

Angular

Angular 是一个用 HTML 和 TypeScript 构建客户端应用的平台与框架。

angular.js 的升级版

https://github.com/angular/angular

https://github.com/angular/angular-cli

https://angular.io

https://angular.cn

安装 angular-cli:

$ npm install -g @angular/cli

查看版本:

$ ng v

新建项目:

$ cd <project>
$ ng new <application>

# 严格模式
$ ng new <application> --strict

$ ng generate <schematic> [options]
appShell
application
class
component
directive
enum
guard
interceptor
interface
library
module
pipe
resolver
service
serviceWorker
webWorker

测试项目:

$ cd <my-app>
$ ng serve
// --open会自动打开浏览器
$ ng serve --open

打包:

$ ng build --prod

项目结构

工作区配置：

.editorconfig: 代码编辑器配置
angular.json: 为工作区所有项目指定CLI的默认配置，包括CLI要用到的构建，启动开发服务器和测试工具的配置项。
tsconfig.json: 工作空间所有项目的基本typescript配置。
tslint.json: 工作空间中所有项目的默认的TSlint配置。
src/: 根项目的源文件。
e2e/: 端到端测试文件。

应用配置:

.browserslistrc 配置前端工具之间共享的目标浏览器和node.js版本
karma.conf.js 应用的karma配置
tsconfig.app.json 应用的typescript配置.
tsconfig.spec.json 应用测试的typescript配置。

应用源文件：

app/ 包含定义应用逻辑和数据的组件文件。
assets/ 包含要在构建应用时应该按原样复制的图像和静态文件。
environments/ 包含特定目标环境的构建配置选项。
favicon.ico 应用在标签栏中的图标。
index.html 主页面。
main.ts 应用的入口。
polyfills.ts 为浏览器支持提供polyfill脚本。
styles.css 列出为项目提供样式的css文件。
app/app.component.ts 根组件AppComponent.
app/app.component.html
app/app.component.css
app/app.component.spec.ts 根组件的单元测试.
app/app.module.ts 定义名为AppModule根模块.

Module

angular的模块化系统NgModule, 也就是根模块，习惯命名为AppModule,位于app.module.ts文件。

NgModule是一个带有@NgModule()装饰器的类，该装饰器是一个函数.

重要的属性:

declarations: 可申明对象表，数据本NgModule的组件，指令和管道。
exports：导出表，能在其它模块的组件模板中使用的可申明对象的子集。
imports：导入表，导出了本模块中的组件模板所需的类的其它模块。
providers：本模块向全局服务中贡献的那些服务的创建器。
bootstrap：应用的主视图，称为根组件，是应用中所有其它视图的宿主。

components

组件控制屏幕上被称为视图的一小片区域, 每个angular应用最少有一个根组件。

通过@Component装饰器定义组件.

组件配置选项：

selector: 选择器
templateUrl: 该组件的HTML模板文件相对于组件文件的地址。
template: html
styleUrls: 该组件的CSS文件相对路径.
style: css
providers: 当前组件所需的服务提供者的一个数组。

pipes

管道

directives

指令就是带有@Directive()装饰器的类。

组件是特殊指令，angular还内置了结构型指令和属性型指令，也可以自定义指令。

结构型指(structural)令通过添加，移除或替换DOM元素来修改布局。

属性型指令(attribute)会修改现有元素的外观和行为。

services

服务类：对于与特定视图无关并希望跨组件共享的数据或逻辑，可以创建服务类。

dependency injection

依赖注入可以保持组件的精简和高效。

通过@Injectable装饰器来定义DI。