Google's AngularJS Style Guide

• 语言: 英语
• 格式: .pdf
• 来源: github.com/fgaray

摘要

本文档是为Google工程师编写的AngularJS应用风格指南，主要适用于使用Closure的项目。文档强调了AngularJS与Closure结合使用的最佳实践，包括模块管理、控制器和作用域的设计、服务和指令的实现、依赖注入的规范、命名空间的选择以及测试方法。文档还特别提到Google的JavaScript风格指南要求，如避免使用$符号作为自定义属性的前缀，并推荐使用'controller as'样式以提高代码可维护性和可测试性。

AI总结

# 《Google's AngularJS Style Guide》中文总结

## 1. 核心目标
本文档为Google工程师使用AngularJS和Closure提供风格指南，适用于Google内部代码，外部开发者可根据自身需求参考。

## 2. 主要内容

### 2.1 Angular语言规则
- **依赖管理**：使用Closure的`goog.require`和`goog.provide`管理依赖。
- **模块**：
- 模块应通过`name`属性引用其他模块。
- 主应用模块应位于根客户端目录。
- **编译器标志**：使用JSCompiler和推荐的AngularCompilerFlags。
- **控制器与作用域**：
- 控制器应作为类实现，方法定义在`MyCtrl.prototype`。
- 推荐使用“controller as”风格（Angular 1.2+）。
- **服务**：
- 使用`module.service`注册服务类。
- 除非需要初始化逻辑，否则优先使用`module.service`而非`module.provider`或`module.factory`。

### 2.2 Angular样式规则
- **命名规范**：
- 保留`$`用于Angular内置属性和服务，避免自定义变量使用`$`。
- 示例：
- 正确：`$scope.myModel = { value: 'foo' }`
- 错误：`$scope.$myModel = { value: 'foo' }` 或 `$scope.myModel = { $value: 'foo' }`
- **自定义元素**：
- IE8需要特殊支持（如html5-shiv hacks）以启用CSS样式。

### 2.3 最佳实践
- **测试**：
- 推荐使用Jasmine + Karma或Closure测试。
- Angular提供适配器支持模块加载和注入器。
- **应用结构**：
- 控制器应放在嵌套子目录，组件（服务、指令）放在`components`目录。
- **作用域继承**：
- 注意作用域的原型继承问题，避免因作用域链导致的变量覆盖。
- **依赖注入**：
- 使用`@ngInject`注解简化依赖注入，避免手动注入配置。
- **文件管理**：
- 使用`goog.provide`定义模块，避免重复字符串。
- 示例：
- 正确：`angular.module(my.submoduleA.name)`
- 错误：`angular.module('my.submoduleA')`

### 2.4 其他注意事项
- **编译器标志**：
- 使用`--generate_exports`处理`@export`方法。
- 使用`--remove_unused_prototype_props_in_externs=false`和`--export_local_property_definitions`处理`@export`属性。
- **外部类型文件**：
- 使用Angular外部类型文件确保类型安全，避免变量混淆。

## 3. 链接与资源
- Angular最佳实践文档
- Angular官方GitHub仓库
- 相关Meetup视频（非Google专属）

## 4. 总结
本文档为Google内部AngularJS开发提供规范，强调Closure集成、模块化开发、命名规范和测试实践。适用于希望遵循Google风格的开发者，但外部开发者可根据实际需求灵活调整。