angular-ui / angularjs-sublime-package

AngularJS code completion, snippets, go to definition, quick panel search, and more.

AngularUI - The companion suite for AngularJS

---

Usage

Requirements

• AngularJS v1.0.0+ is currently required.
• jQuery / Plugins (depends on directive). Check specific directive dependencies for more information

Installation

The repository comes with the modules pre-built and compressed into the build/ directory.

angular.module('myApp', ['ui']);

The modules can be found in the Directives and Filters folders. Check out the readme file associated with each module for specific module usage information.

Development

You do not need to build the project to use it - see above - but if you are working on it then this is what you need to know.

Requirements

0. Install Node.js and NPM (should come with)

1. Install local dependencies:

$ npm install

2. Install global dependencies grunt, coffee-script, and testacular:

$ npm install -g testacular coffee-script grunt

Build Files & Run Tests

Before you commit, always run grunt to build and test everything once.

$ grunt

Test & Develop

The modules come with unit tests that should be run on any changes and certainly before commiting changes to the project. The unit tests should also provide further insight into the usage of the modules.

First, start the testacular server:

$ grunt server

Then, open your browser to http://localhost:8080 and run the watch command to re-run tests on every save:

$ grunt watch

Publishing

For core team: if you wish to publish a new version follow these steps:

1. Bump the version number inside package.json
2. Build and test
3. Commit the updated package.json and build/ folder on their own commit
4. Tag the commit: git tag v[maj].[min].[patch]
5. Push the tag: git push [angular-ui] master --tags

angularjs-sublime-package's Issues

$log completion losing the $

if I type $log and then select one of the items lets say $log.error from the dropdown. I end up getting a log.error('error') without the $, so I end up having to go back and enter the $. This happens whether it is a warning, info, log, etc.

Seems to be only the $log ones... Others like the $interpolate completion work fine.

Autocomplete doesn't see the rest of the code anymore

Hi,

After installing the plugin and indexing the project, when I type, I don't have the same access I use to have to variables and functions that are already in the file.

eg:

function(){
    FlashService.clear();

    FlashService.show('User Available');
}

When I start typing the second "FlashService" I have to prompt showing anymore for autocompletion. I don't see the variables anymore too.

Have I done something wrong?

Thanks for your help

Use completions instead of snippets, adding completions of my repository

Hey guys,

I’ve written some completions for Angular.js and @ProLoser suggested that I could add some of my efforts to your project.

I propose using completions instead of snippets:

This has benefits for directive completions as ST doesn’t show them for snippets in HTML. Adding the following line to the user’s .sublime-preferences:

"auto_complete_triggers": [ {"selector": "text.html", "characters": "<"}, {"selector": "source.js", "characters": "$." }, {"selector": "text.html meta.tag", "characters": " " } ]

allows completions to show up whenever the user enters a space in tags. In contrast to snippets completions will be fuzzy searched, e.g. 'ctrl' triggers the 'ng-controller' completion.
This also reduces conflicts with snippets by the user or other plugins. Current triggers like 'view' or 'click', are pretty common and may lead to conflicts with other snippets.

Snippets have the highest priority in Sublime Text and could overwrite snippets by the user.

Priority of Sources for Completions
- Snippets
- API-injected completions
- .sublime-completions files
- Words in buffer

If the user doesn’t edit auto_complete_triggers in his preference file completions may still be triggered by ctrl + space.

I think it’s best to have completions, which don’t come into the way when the user adds his own snippets. I haven’t tried ST3 though, so I don’t know if they changed this behavior.

Windows / Indexing issues

Hi,

I run Win 7 64bit / ST3 2032, and there is a problem while indexing the definitions:

walk_dirs does not parse excluded directories correctly. In walk_dirs, in this line, you have a unix style slash:

if not [skip for skip in self.kwargs['exclude_dirs'] if path + '/' + skip in r]:

It tries to index all it finds in node_modules, and then fails because it cannot find the first .js file it finds:

Exception in thread Thread-7:
Traceback (most recent call last):
  File "X/threading.py", line 639, in _bootstrap_inner
  File "C:\...\AngularJS-sublime-package\AngularJS-sublime-package.py", line 347, in run
    self.walk_dirs()
  File "C:\...\AngularJS-sublime-package\AngularJS-sublime-package.py", line 370, in walk_dirs
    self.parse_file(_file, r, match_expressions)
  File "C:\...\AngularJS-sublime-package\AngularJS-sublime-package.py", line 405, in parse_file
    _file = codecs.open(r+'/'+file_path)
  File "X/codecs.py", line 884, in open
FileNotFoundError: [Errno 2] No such file or directory: 'C:\\PROJECT_ROOT\\node_modules\\generator-angular\\node_modules\\yeoman-generator\\node_modules\\bower\\node_modules\\request\\node_modules\\form-data\\node_modules\\combined-stream\\node_modules\\delayed-stream\\test\\integration/test-delayed-http-upload.js'

Note that the last slash before the file is a unix-style slash, while all others are correct. This is a problem in parse_file, because it does:

_file = codecs.open(r+'/'+file_path)

So it's two bugs, with one common cause:
exclude_dirs is ignored by walk_dirs
Windows slashes are ignored parse_file

because of unix / win path separator mismatch

Additionally, I get the same exception when a value in exclude_dirs has a trailing slash at the end, as in the default "node_modules/"

Sorry I repeated myself so often, I tracked this down iteratively

I solved these issues by using os.sep and os.path.normpath. Not sure if this is the best way, might create a pull request later

Plugin breaks when used together with Laravel Blade Highlighter (syntax)

Hello!
Today I experienced a big issue. When tried to fill Laravel Blade tag with data my ST just broke. After some investigation I realized it happens due to AngularJS plugin, more specifically because of it's code completion. When I set "disable_all_completions" to "false" it is working again. Anyway I tried to put blade.php on list of excluded file suffixes and also added some scopes to scope exclude list and none of this actually worked. The problem happens where I try to write Blade tag with Blade syntax turned on like
@section('')

Then it breaks straight after I put any character between quotes.

EDIT: Since I was using this plugins together before, it has to be connected to some recent commits, like from last 5 days or so.

Any possibilities of adding CoffeeScript support?

Package Control for ST3 cannot find this package

Title says it all.

Error after close all tabs

How to repeat bug

1. Run Sublime without opened tabs.
2. Find some factory or controller by ctrl+command+l and open file in tab.
3. Close tab and try press ctrl+command+l

Traceback (most recent call last):
File "/Applications/Sublime Text.app/Contents/MacOS/sublime_plugin.py", line 526, in run_
return self.run()
File "AngularJS-sublime-package in /Users/max/Library/Application Support/Sublime Text 3/Installed Packages/AngularJS.sublime-package", line 462, in run
File "AngularJS-sublime-package in /Users/max/Library/Application Support/Sublime Text 3/Installed Packages/AngularJS.sublime-package", line 42, in get_folders
File "AngularJS-sublime-package in /Users/max/Library/Application Support/Sublime Text 3/Installed Packages/AngularJS.sublime-package", line 33, in view_settings
AttributeError: 'NoneType' object has no attribute 'settings'
Exception in thread Thread-43:
Traceback (most recent call last):
File "X/threading.py", line 639, in _bootstrap_inner
File "X/threading.py", line 825, in run
File "/Users/max/Library/Application Support/Sublime Text 3/Packages/JSHint Gutter/JSHint.py", line 204, in
self.timer = Timer(1, lambda: view.window().run_command("jshint", { "show_panel": False }))
AttributeError: 'NoneType' object has no attribute 'run_command'

Sublime text's look around auto-completion does not work

Sublime Text 2.0.1 with the latest angularjs-sublime-package

Say you have some variable or any other strings in the file somewhere, and it's automatically added into the auto-completion index, so that it will listed in the auto-completion popup when you type the first few characters. this is a very handy feature but after installing this package it seems to be disabled somehow.

Any settings to change this back or am I missing anything here?

Selecting a word with a $ sign next to it does not highlight other occurrences of the same selection

I'm not sure if it's a bug in ST3 or in this package. But selecting $timeout should highlight other $timeout occurrences in the code, and currently it doesn't.

word_separators was not included in the User Preferences.

Similar ticket was opened in the SublimeText project on GitHub:
sublimehq/sublime_text#212

Edit setting

I am using ST3. now when i type ngb become to ng-bind="expression". so how to can i edit to when type ngb become to {{expression}}. thanks

Error installing package

I try to install the Package and restarting the Sublime Text i get this:
Error trying to parse settings: No data in ~/Library/Application Support/Sublime Text 2/Packages/User/AngularJS-completions.sublime-settings:1:1

[Request] Make Sublime play nice with <script> templates

If possible can you make is so when inside a <\script template="text/ng-template"> it is handled as html instead of JavaScript? Since it is handled as JS I can't use emmet in there.

Or if there is some setting for this direct me to it?

"go to definition" always returns "definition <definition name> could not be found"

Using ST3 on Windows 7, pressing "CTRL + WIN + ALT + l", when the cursor is on any Angular element nothing is found (even after rebuilding search index)

how to make it work

I've copied it to package and rename as AngularJS but it doesn't seem to work..

how to activated it??

Sublime 2

Hello,

I'm new to Sublime, so my question might be obvious to others. I'm using Sublime2. After installing this package, do I update

Sublime Text 2 > Preferences > Settings - User

or

Sublime Text 2 > Preferences > Package Settings > AngularJS > Settings - User

Thanks,
Sei

help

How does this work??? I've installed it & have yet to see anything other then the option to make my HTML into HTML (Angular js) in the bottom right of my screen. Where's the all this wonderful Angular syntax your talking about???

None Sublime SUPER-USER

Hey how about a none Sublime SUPER-USER walk thru on this? How does one make this work?

I'm getting an error

Traceback (most recent call last):
File "/Applications/Sublime Text.app/Contents/MacOS/sublime_plugin.py", line 358, in on_query_completions
res = callback.on_query_completions(v, prefix, locations)
File "/Users/Justin/Library/Application Support/Sublime Text 3/Packages/AngularJS/AngularJS-sublime-package.py", line 373, in on_query_completions
view.score_selector(_scope, ng.settings.get('js_scope'))
File "/Applications/Sublime Text.app/Contents/MacOS/sublime.py", line 715, in score_selector
return sublime_api.view_score_selector(self.view_id, pt, selector)
TypeError: String required

I think i followed the installation directions exactly and both tried installing with the package manager and by cloning the repo. This recurs whenever I try to edit a javascript file.

Angular ui syntax support?

This plugin could help also with angular-ui syntax (ui-view, ui-sref, etc.)?
I've not been able to enable this option...

Thank you in advance!

error when indexing with cmd+cntrl+l in ST3

Sorry if this is the wrong place to file a problem ...

Traceback (most recent call last):
File "/Applications/Sublime Text 3.app/Contents/MacOS/sublime_plugin.py", line 526, in run_
return self.run()
File "/Users/***/Library/Application Support/Sublime Text 3/Packages/AngularJS-sublime-package/AngularJS-sublime-package.py", line 317, in run
if not self.definition_List:
AttributeError: 'AngularjsFindCommand' object has no attribute 'definition_List'

Any thoughts of merging with AngularUI's repo

https://github.com/angular-ui/AngularJs.tmbundle was originally targeted at TextMate and in that way supports Sublime, but it would be cool to merge efforts if at all possible.

Indexing not working. No Indexing found for project

I installed latest version on my macbook. Hitting Cmd + Ctrl + L does nothing. So, when trying to use I get: "AngulaJS: No Indexing found for project". Anything I can look to see what is wrong?

plugins is not working on sublime text 2

I got this error when trying to enable/disable the plugin. It still doesn't work.

reloading /home/erwin/.config/sublime-text-2/Packages/AngularJS/AngularJS-completions.sublime-settings
Traceback (most recent call last):
  File "./AngularJS-sublime-package.py", line 362, in process_attributes
    add_data_prefix = ng.settings.get('enable_data_prefix')
AttributeError: 'NoneType' object has no attribute 'settings'

I am using sublime text 2.0.2 build 2221 on ubuntu 12.04

Disabling Inline Annotation for Dependency Injection

Is there a flag for disabling inline annotation of controller definitions etc for those of us that use things like ngMin and ngAnnotate?

If not, am I doing something wrong? typing in additional dependencies when you are editing an existing controller/service/directive/etc often feels painful and slow, as you have to type them twice!

Update to AngularJS 1.2

Add in completions for AngularJS 1.2

illegal regex parsing triggers the autocompleter

Right after closing an element i press an enter for a new line, but the autocompleter suddenly pops up it doesn't look right.

example:

could it be avoided to happen? thanks.

HTML (Angular.js) Syntax highlight

I've been trying to apply a proper syntax highlight for ng-whatever html attributes.
I've modified the provided AngularJs.tmLanguage adding:

<key>tag-ng-attribute</key>
  <dict>
    <key>match</key>
    <string>\b(ng-[a-zA-Z\-:]+)</string>
    <key>name</key>
    <string>entity.other.attribute-name.ng.html</string>
  </dict> 

right after tag-generic-attribute.

Then I've added:

<dict>
  <key>include</key>
  <string>#tag-ng-attribute</string>
</dict>

right after the #tag-generic-attribute dict.

Then I chose the HTML(Angular.js) syntax for my html page and when I inspect the scope for <div ng-view=""></div> I always get

text.html.basic.angularjs meta.tag.any.html entity.other.attribute-name.html

Am I doing something wrong? Do you have any example of syntax highlight for your AngularJS.tmLanguage definition?

Thanks

indicization/quick panel doesn't work

I've just installed the plugin in sublime 3059.
with ctrl-super-l I always get indexing completed
with ctrl-super-alt-l --> no indexing found for the project
the quick panel is never shown

in the console there are many of these:
Traceback (most recent call last):
File "/usr/local/share/applications/sublime-text-3/sublime_plugin.py", line 526, in run_
return self.run()
File "AngularJS-sublime-package in /home/m3l720/.config/sublime-text-3/Installed Packages/AngularJS.sublime-package", line 504, in run
IndexError: list index out of range

I don't know if I'm doing something wrong, I'm quite new to sublime

What about HTML templating languages like Jade?

I'm not able to trigger any auto-completions in my Jade templates. Does AngularJS-sublime-package not support that yet?

Thoughts on adding Brackets support?

Hey @subhaze I was curious if you had a chance to mess with Adobe Brackets? I was thinking it would be kinda cool if I could 'expand' a directive from the tag (you will have to see the screencast to get what I mean) like they do with CSS.

Completions does not work after $scope.

$on does not trigger a completion menu if typed after $scope..
Also not triggered if pressing Ctrl + Space in that case.

Similar for other methods like $apply

ST3 Stable, 3059 on Win8 x64

Plugin doesn't see all controllers

Doesn't see controllers with this definition

memApp.controller('AccessRightsCtrl', ['$scope', '$http', 'globals', 'Right', function ($scope, $http, globals, Right) {
...

But, see with this

memApp
.controller('AccessRightsCtrl', ['$scope', '$http', 'globals', 'Right', function ($scope, $http, globals, Right) {
...

Project settings: include_dirs ?

Is there something to include directories for indexing instead of excluding? Because I have a rather complex project with a Python backend and a ng-boilerplate based frontend where I only really need to index the src folder. Excluding all the other directories works but it would be very convenient to also have an include_dirs setting :)

$scope tab auto-complete removes $ - ST3

In ST3:

The auto-complete of $scope after pushing tab, removes the $ and leaves only "scope".

bracket in directive definition

Hi, I was curious why the directive snippet has an array like directive('', ['', function(){... when the documentation and most examples I've seen just have directive( " , function(){ ?

Unwanted Angular suggestions after quotes followed by a comma

I'm not sure if i'm the only one with this problem, but i often type arrays or strings in my code to help with testing (look&feel) and when i'm working in my Angular project files i often type something between quotes, followed by a comma. But when i do that, the suggestions of $apply, $broadcast, $destroy and more are suggested.

So for example, when i type:
'',
i get the suggestions in my autocomplete. Right after i insert the comma.

For me this is unwanted behaviour as i might be wanting to go to a new line and by pressing Enter on my keyboard i insert the suggestion.

Am i the only one who has this and finds this annoying?

Auto complete always shows up

I am using ST3 for mainly PHP development, but I develop UI with AngularJS in it. Why autocomplete of AngularJS shows up even after hitting a simple space in the middle of a PHP file?

import custom HTML directives from a js file

Hi, I am new to angular. I am using ionic framework to build html5 mobile apps. I have a ionic-angular.js file where some custom directives ( HTML tags ) are defined.
My current angular user settings look like this

{
  "auto_complete_selector": "source - comment, meta.tag - punctuation.definition.tag.begin"
}

How should I import those elements to that it help my auto-completion while writing .html templates ?

Sublime Text 2

Hi guys,

I installed this plugin on SB2, its been a while since having to install a plugin or modify it to use code completion.

Can anyone recommend the proper settings for this? auto code completion is not working nor is the syntax highlighting.

Please correct readme.md–Seems like you already have presence in sublime's package control.

:)

Some ideas for consistency

Just some random ideas I had. I am currently testing to implement some of them. Curious to hear what you think about them. But feel free to close if it doesn't fir.
I would personally love if the indexing behaved more like ST3's own Go To Symbol:

1.) Is it possible to emulate the behavior where a symbol with multiple definitions can be opened in its own quick panel when you hit enter? Would reduce the clutter. Disadvantage: New panel doesn't show search term; cannot go back to previous panel
2.) Only show a relative path from project root, not the absolute file path. Better yet, if 1) is possible, only show the type + symbol defintion, and show the number of hits, and in the new panel, show the relative path
3.) Show the line number directly after the file path (better use of space)
4.) Emulate the scroll to symbol behavior, when symbol is in the same file

5.) Merge exclude folder patterns from project configuration into plugin. (May Require to refactor the walk_dirs function to use a regex for matching?)
6.) Use project folders. Might be more than one? active_window.folders() only seems to return a folder if there's a project anyway, so this is not too far off Realized folders() returns the project folders already

Add to Package Control

http://wbond.net/sublime_packages/package_control/package_developers#Submitting_a_Package

It would be easier to find this if it was available through Package Control.

Syntax Feature Request

I'd love better syntax highlighting of the HTML to better indicate what is an Angular directive and what is plain HTML.

Elements/Attributes that have hyphens would be different color than elements/attributes that don't have them. This may be too limiting, so we could expose a setting that allows the user to configure which prefixes are angular ones. ng- would be one by default, but users could add other custom ones.

$timeout completion snippet

Hi,

Can we have a $timeout completion snippet?

I know I can add one on my own, just being lazy :-).

ngChange suggests an element based directive, feature or bug?

The docs indicate that ngChange is an attribute we can put on input tags to evaluate upon user changing the value of it, what would an ngChange element give?

BracketHighlighter doesn't highlight tags

When the file type is set to HTML (AngularJS) in the status bar, BracketHighlighter does not highlight matching HTML tags. It does highlight matching quotes, brackets, etc. just not tags.

Switching the status bar menu to HTML works, it's only when set to HTML angular.

ReIndexing the project?

I managed to index my project using super+ctrl+L, now that combo is opening a window to search angular objects with, as documented.

Since than I've added a few more factories and directives, but they won't on code completion nor do you appear on that angular objects window.

What to do?

thanks

Do you have in plans add documentation together with auto completion?

Here is explanation on screenshot https://www.dropbox.com/s/g4own4d4x53gssw/angular-sublime-docs.gif
The idea is to show documentation (could be parsed on the fly from angular website and cached) of the selected angular tag (on sceenshot it is ngController) next to auto complete dropdown list. You could have seen it in eclipse or any other IDE.

snippets in HAML

Love your plugin! Followed your instructions yet only a handful of ng- snippets will work. ng-repeat doesn't work at all.

I use HAML — plan any future plans on implementing these snippets so they will work with HAML?

Thanks