angularjs

angularjs 1.*

https://github.com/angular/angular.js

https://angularjs.org/

https://github.com/rev087/ng-inspector


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。

routing