AngularJS Sublime Text 包

安装选项

• 包管理器
• 下载此存储库，将其重命名为 'AngularJS'，并将其放置在您的 Packages 文件夹中。您可以在 Sublime Text 中通过 首选项 > 浏览包... 找到此文件夹。
• 将存储库克隆到您的 Packages 文件夹中 git clone git://github.com/angular-ui/AngularJS-sublime-package.git AngularJS

推荐设置

更新您的用户设置如下。此设置更新将自动打开 HTML 属性的完成列表。您可以添加其他预处理器的作用域，以便自动显示列表。

(这是 ST3 的默认设置)

// Controls what scopes auto complete will be triggered in)
"auto_complete_selector": "source - comment, meta.tag - punctuation.definition.tag.begin"

(这是 ST3 的默认设置，但没有 'text.haml')

// For haml you could add
"auto_complete_selector": "source - comment, meta.tag - punctuation.definition.tag.begin, text.haml"

// add for auto triggering controller completions within the ng-controller=""
"auto_complete_triggers":
    [
        {
            "characters": "ng-controller=\"*",
            "selector": "punctuation.definition.string"
        }
    ]

键映射

super+ctrl+l

如果尚未索引：索引当前项目；如果已索引：打开包含定义列表的快速面板以搜索 [命令：angularjs_find]

super+ctrl+alt+l

尝试跳转到定义（项目必须首先索引） [命令：angularjs_go_to_definition]

super+shift+ctrl+l

尝试在当前光标位置打开浏览器中的指令文档 [命令：angularjs_go_to_documentation]

---

注意

上述键映射也可能被其他插件使用，因此您可能需要通过 首选项 > 键绑定 - 用户 来重新映射它们。

要检查另一个插件是否使用上述键映射，您只需打开 ST 控制台（ctrl+）并写入 sublime.log_commands(True)，这将记录 ST 中运行的所有命令。

---

命令面板

• AngularJS：重建搜索索引
• AngularJS：删除缓存
• AngularJS：修剪缓存（从索引中删除缺失的文件）
• AngularJS: 查看定义
• AngularJS: 切换 - 禁用所有补全
• AngularJS: 切换 - 禁用索引指令补全
• AngularJS: 切换 - 禁用索引隔离补全
• AngularJS: 切换 - 禁用内置指令补全
• AngularJS: 切换 - 禁用内置元素补全
• AngularJS: 切换 - 禁用JS补全
• AngularJS: 切换 - 启用 data- 前缀

补全选项

首选项 > 包设置 > AngularJS > 补全 - 用户

您可以使用以下属性来扩展或覆盖默认的补全。

extended_attribute_list: []; 允许您使用更多属性扩展插件

angular_elements: [*]; 作为HTML元素使用的默认指令列表

filter_list: [*]; 默认过滤器列表

core_attribute_list: [*]; 默认过滤器列表

[*] - 将任何这些属性添加到您的用户文件中，将覆盖该设置的默认值

示例 补全 - 用户

{
    "extended_attribute_list":[
        ["my-directive\tMy Directives", "my-directive=\"${1:string}\"$0"],
    ]
}

查看默认的补全设置（首选项 > 包设置 > AngularJS > 补全 - 默认）以获取更多示例。

补全设置

首选项 > 包设置 > AngularJS > 设置 - 用户

js_scope: “source.js - string.quoted - comment - meta.brace.square”；返回JS补全的Scope

filter_scope: “text.html string.quoted”；返回过滤器的Scope

js_prefixes: [“,”]; 添加不希望触发补全的字符

disable_all_completions: false,

disable_indexed_directive_completions: false; 索引之下的任何指令的裸骨补全

disable_indexed_isolate_completions: false; 尝试提供用作元素的指令的隔离作用域补全

disable_default_directive_completions: false;

disable_default_element_completions: false;

disable_default_js_completions: false;

enable_data_prefix: bool (false); 将 'data-' 前缀添加到属性补全中，请注意，您仍然必须键入 'ng-' 以获取自动完成列表

示例 设置 - 用户，启用 “data-” 前缀

{
    "enable_data_prefix": true
}

索引选项

首选项 > 包设置 > AngularJS > 设置 - 用户 （需要重新索引项目）

用于查找的正则表达式期望定义以以下示例之一开始

filter('interpolate', ['version', function(version) { ...

.filter('interpolate', ['version', function(version) { ...

('chained').filter('interpolate', ['version', function(version) { ...

/**
 *  If you use something other than `app` as a variable name
 *  you will need to update the `match_expressions` setting
 *  and change `app` to some other name.
 */
app.filter('interpolate', ['version', function(version) { ...

angular.module('myApp', [])

如果您需要，可将 app 更改为其他名称

match_expression: "((^[ \\\\t]*\\.{0}|^[ \\\\t]*{0}|angular\\.{0}|\\)\\.{0}|app\\.{0})[ ]*\\([ ]*[\"\\'])([\\w\\.\\$]*)([\"\\'])"

如果您要匹配一组名称，请将 app 更改为 (app|somethingElse|foo) 并将以下设置更改为 4

match_expression_group: 3

match_definitions: [“controller”， “directive”， “module”， “factory”， “filter”]; 确定索引的定义类型

excluded_dirs: [“node_modules/”]; 排除文件夹的全局设置

exclude_file_suffixes: [“min.js”， “angular.js”]; 通过其后缀排除文件

按项目排除文件夹

通过打开您的项目设置文件 项目 > 编辑项目 来排除项目级别的文件夹

示例

"settings":
    {
        "AngularJS":
        {
            "exclude_dirs": ["someFolder/*/lib/angular/*"]
        }
    }

按项目包括文件夹

您可以通过在项目中设置 AngularJS 的 folders 变量来覆盖默认的项目文件夹（项目 > 编辑项目）

示例

{
    "folders":
    [
        {
            "follow_symlinks": true,
            "path": "/Users/username/Projects/example"
        }
    ],
    "settings": {
        "AngularJS": {
            "folders": [
                "/Users/username/Projects/example/ng/src",
                "/Users/username/Vendors/someother/lib/outside/of/project"
            ]
        }
    }
}

您可以在文件夹路径中使用类似shell的通配符，这些通配符通过 glob 模块展开。

快速面板选项

首选项 > 包设置 > AngularJS > 设置 - 用户 （仅适用于Sublime Text 3）

show_file_preview: bool(true); 当您键入时，当前文件和定义将在缓冲区中显示

示例 设置 - 用户，隐藏文件预览

{
    "show_file_preview": false
}

插件详细信息

语法文件

提供语法文件，HTML（Angular.js），可以将其设置为视图，以将HTML作用域添加回<script type="text/ng-template">标签。

自动完成

提供自动完成核心AngularJS指令，如ng-repeat，ng-click，以及您创建的任何自定义指令。

以下自动完成需要您对项目进行索引

(通过super+ctrl+l索引您的项目)

提供任何指令的自动完成，作为HTML元素，以ngDir作为前缀，以便通过模糊搜索轻松查找。

提供特定于用作元素的任何指令的isolate作用域自动完成（在右侧提示绑定类型），以isolate作为前缀，以便通过模糊搜索轻松查找。

您还可以获取HTML标记中过滤器的自动完成。在键入|（管道加一个空格）后，通过ctrl+space触发自动完成列表，您应该能找到索引在自动完成列表中的所有过滤器。

当光标处于ng-controller=""的双引号内时提供controller自动完成。您可以通过“推荐设置”部分中的设置自动触发此功能

转到定义位置

一旦您的项目索引后，您可以在光标位于指令/服务/等处时使用键盘快捷键super+alt+ctrl+l，您将被带到包含定义的文件。

快速面板定义查找

通过快速面板快速查找您的指令/过滤器/模块/工厂。一旦您的项目被索引，可以通过从命令板执行“AngularJS：重建搜索索引”命令或执行快捷键super+ctrl+l以第一次打开快速面板搜索。

每次保存文件时，该文件将被重新索引，如果已经触发索引，以便快速面板搜索保持最新。

JavaScript自动完成

全局上下文

• angular - angular
• $animate - $animate
• $animateProvider - $animateProvider
• $cacheFactory - $cacheFactory(cacheId[, options])
• $compile - $compile(element, transclude, maxPriority)
• $compileProvider - $compileProvider
• $controller - $controller(constructor, locals)
• $controllerProvider - $controllerProvider
• $exceptionHandler - $exceptionHandler(exception[, cause])
• $exceptionHandlerProvider - $exceptionHandlerProvider
• $filter - $filter(name)
• $filterProvider - $filterProvider
• $http - $http
• $httpBackend - $httpBackend
• $injector - $injector
• $interpolate - $interpolate(text[, mustHaveExpression, trustedContext])
• $interpolateProvider - $interpolateProvider
• $interval - $interval
• $locale - $locale
• $location - $location
• $locationProvider - $locationProvider
• $log - $log
• $logProvider - $logProvider
• $parse - $parse(expression)
• $parseProvider - $parseProvider
• $provide - $provide
• $q - $q
• $rootElement - $rootElement
• $rootScope - $rootScope
• $rootScopeProvider - $rootScopeProvider
• $sce - $sce
• $sceDelegate - $sceDelegate
• $sceDelegateProvider - $sceDelegateProvider
• $sceProvider - $sceProvider
• $scope - $scope
• $templateCache - $templateCache
• $timeout - $timeout
• $window - $window
• $cookies - $cookies
• $cookieStore - $cookieStore
• $resource - $resource(url[, paramDefaults, actions])
• $route - $route
• $routeParams - $routeParams
• $routeProvider - $routeProvider
• $sanitize - $sanitize(html)
• $swipe - $swipe

上下文特定

• angular

  • 绑定
  • 引导
  • 复制
  • 元素
  • 等于
  • 扩展
  • forEach
  • fromJson
  • 身份
  • 注入器
  • isArray
  • isDate
  • isDefined
  • isElement
  • isFunction
  • isNumber
  • isObject
  • isString
  • isUndefined
  • lowercase
  • mock
  • 模块
  • noop
  • toJson
  • uppercase
  • 版本

• $animate

  • addClass
  • 进入
  • 离开
  • 移动
  • removeClass

• $animateProvider

  • classNameFilter
  • 注册

• $compileProvider

  • aHrefSanitizationWhitelist
  • 指令
  • imgSrcSanitizationWhitelist

• $controllerProvider

  • 注册

• $exceptionHandlerProvider

  • 模式

• $filterProvider

  • 注册

• $http

  • 删除
  • 获取
  • 头部
  • JSONP
  • POST
  • PATCH
  • 默认值
  • 待处理请求

• $httpBackend

  • 期望
  • 期望DELETE
  • 期望GET
  • 期望HEAD
  • 期望JSONP
  • 期望PATCH
  • 期望POST
  • 期望PUT
  • 刷新
  • 重置期望
  • 验证无待处理期望
  • 验证无待处理请求
  • 当...
  • 当DELETE
  • 当GET
  • 当HEAD
  • 当JSONP
  • 当POST
  • 当PUT

• $injector

  • 注解
  • 获取
  • 有...
  • 实例化
  • 调用

• $interpolateProvider

  • 结束符号
  • 开始符号

• $interval

  • 取消
  • 刷新

• $locale

  • id

• $location

  • 全路径
  • 哈希值
  • 主机
  • 路径
  • 端口号
  • 协议
  • 替换
  • 搜索
  • URL

• $locationProvider

  • 哈希前缀
  • html5模式

• $log

  • 调试
  • 错误
  • 信息
  • 记录日志
  • 警告
  • 断言为空
  • 重置

• $logProvider

  • 启用调试

• $parseProvider

  • 记录等待的Promise警告
  • 暴露Promise

• $provide

  • 常数
  • 装饰器
  • 工厂方式
  • 提供者
  • 服务
  • 值

• $q

  • 所有...
  • 延迟
  • 拒绝
  • 当...

• $rootScope, $scope

  • $apply
  • $broadcast
  • $destroy
  • $digest
  • $emit
  • $eval
  • $evalAsync
  • $new
  • $on
  • $parent
  • $root
  • $watch
  • $watchCollection
  • $id

• $rootScopeProvider

  • digestTtl

• $sce

  • getTrusted
  • getTrustedCss
  • getTrustedHtml
  • getTrustedJs
  • getTrustedResourceUrl
  • getTrustedUrl
  • parse
  • parseAsCss
  • parseAsHtml
  • parseAsJs
  • parseAsResourceUrl
  • parseAsUrl
  • trustAs
  • trustAsHtml
  • trustAsJs
  • trustAsResourceUrl
  • trustAsUrl
  • isEnabled

• $sceDelegate

  • getTrusted
  • trustAs
  • valueOf

• $sceDelegateProvider

  • resourceUrlBlacklist
  • resourceUrlWhitelist

• $sceProvider

  • enabled

• $timeout

  • 取消
  • 刷新

• $cookieStore

  • 获取
  • PATCH
  • 移除

• $route

  • 重新载入
  • 当前...
  • 路由规则

• $routeProvider

  • 否则
  • 当...

• $swipe

  • 绑定

• mock

  • 输出
  • 模块

• 事件

  • $locationChangeStart
  • $locationChangeSuccess
  • $destroy
  • $includeContentLoaded
  • $includeContentRequested
  • $routeChangeError
  • $routeChangeStart
  • $routeChangeSuccess
  • $routeUpdate
  • $viewContentLoaded

• 属性

  • $addClass
  • $observe
  • $removeClass
  • $set
  • $updateClass
  • $attr

详细

详细_$http

$http('GET|POST|PUT|DELETE', url, post, function(status, response){
  // success
}, function(status, response){
  // error
});

详细_$filter

$filter('currency|date|filter|json|limitTo|linky|lowercase|number|orderBy|uppercase')(array, expression);

详细_$interval

$interval(fn, delay, count, invokeApply)

详细_$timeout

$timeout(function(){

}, delay);

详细_directive

directive('', ['', function(){
  // Runs during compile
  return {
    // name: '',
    // priority: 1,
    // terminal: true,
    // scope: {}, // {} = isolate, true = child, false/undefined = no change
    // controller: function($scope, $element, $attrs, $transclude) {},
    // require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
    // restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment
    // template: '',
    // templateUrl: '',
    // replace: true,
    // transclude: true,
    // compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
    link: function($scope, iElm, iAttrs, controller) {

    }
  };
}]);

详细_module

/**
*  Module
*
* Description
*/
angular.module('', []).

提供者

配置

config(['',function() {

}])

常数

constant('name', value)

控制器

controller('name', ['', function(){

}])

工厂方式

factory('name', ['', function(){
  return function name(){

  };
}])

运行

run('name', ['', function(){

}])

服务

service('name', ['', function(){

}])

值

value('name', value)