angular-ui / angularjs-atom

An AngularJS package for Github's Atom editor

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-atom's Issues

Uncaught TypeError: this.textEditor.displayBuffer.getMaxScrollTop is not a function

Atom Version: 1.1.0
System: Microsoft Windows 10 Pro
Thrown From: angularjs package, v0.3.3

Stack Trace

Uncaught TypeError: this.textEditor.displayBuffer.getMaxScrollTop is not a function

At /C:/Users/Guillem/.atom/packages/minimap/lib/minimap.coffee:169

TypeError: this.textEditor.displayBuffer.getMaxScrollTop is not a function
  at Minimap.module.exports.Minimap.getTextEditorMaxScrollTop (C:\Users\Guillem\.atom\packages\minimap\lib\minimap.coffee:200:46)
  at Minimap.module.exports.Minimap.getTextEditorScrollRatio (C:\Users\Guillem\.atom\packages\minimap\lib\minimap.coffee:216:36)
  at Minimap.module.exports.Minimap.getCapedTextEditorScrollRatio (C:\Users\Guillem\.atom\packages\minimap\lib\minimap.coffee:223:50)
  at Minimap.module.exports.Minimap.getScrollTop (C:\Users\Guillem\.atom\packages\minimap\lib\minimap.coffee:334:17)
  at atom-text-editor-minimap.MinimapElement.update (C:\Users\Guillem\.atom\packages\minimap\lib\minimap-element.coffee:343:73)
  at C:\Users\Guillem\.atom\packages\minimap\lib\minimap-element.coffee:323:8

Commands

Config

{
  "core": {
    "disabledPackages": [
      "angularjs-helper",
      "language-javascript-jsx",
      "es6-javascript",
      "linter-pep8",
      "autocomplete-clang",
      "linter-jscs"
    ]
  }
}

Installed Packages

# User
angularjs, v0.3.3
highlight-selected, v0.10.1
language-babel, v0.15.7
language-batch, v0.3.3
language-cmake, v0.1.4
language-javascript-better, v1.7.1
language-protobuf, v0.5.0
linter, v1.8.1
linter-csslint, v1.1.0
linter-tidy, v1.0.1
minimap, v4.13.4
minimap-git-diff, v4.1.8
minimap-linter, v1.0.0
minimap-selection, v4.3.1
open-recent, v2.3.0
react, v0.12.10
sync-settings, v0.6.0

# Dev
No dev packages

html snippets not working

html snippets not working. I use Atom on Debian 8 64bits

Package.getStylesheetsPath is deprecated.

Store package style sheets in the styles/ directory instead of stylesheets/ in the angularjs package

Package.getStylesheetsPath (/Applications/Atom.app/Contents/Resources/app.asar/src/package.js:460:9)
Package.getStylesheetPaths (/Applications/Atom.app/Contents/Resources/app.asar/src/package.js:471:32)
Package.loadStylesheets (/Applications/Atom.app/Contents/Resources/app.asar/src/package.js:453:38)
<unknown> (/Applications/Atom.app/Contents/Resources/app.asar/src/package.js:183:19)
Package.measure (/Applications/Atom.app/Contents/Resources/app.asar/src/package.js:163:15)
Package.load (/Applications/Atom.app/Contents/Resources/app.asar/src/package.js:177:12)

Package.getStylesheetsPath is deprecated.

Store package style sheets in the styles/ directory instead of stylesheets/ in the angularjs package

Package.getStylesheetsPath (C:\Users\farid\AppData\Local\atom\app-0.198.0\resources\app.asar\src\package.js:464:9)
Package.getStylesheetPaths (C:\Users\farid\AppData\Local\atom\app-0.198.0\resources\app.asar\src\package.js:475:32)
Package.loadStylesheets (C:\Users\farid\AppData\Local\atom\app-0.198.0\resources\app.asar\src\package.js:457:38)
<unknown> (C:\Users\farid\AppData\Local\atom\app-0.198.0\resources\app.asar\src\package.js:187:19)

ng-options not colored

ng-options is not colored like other angular attributes (like ng-model) on select inputs.

Overrides emmet

Hi, since I've installed this plugin, emmet tab autocompletion no longer works on HTML (Angular) files. It still works with ctrl+e.

Remove semicolons from end of autocompletions/snippets

I think overall it would be better to allow the user to continue chaining and have them add the semicolon themselves. In addition, coffeescript does not need the semicolon.

don't highlight JavaScript outside html tag

When you use partials normally don't have a complete html structure, sometimes the JavaScript is not included in other html tags. I have an example here.

script it's NOT highlight correctly.

If it is inside the fieldset tag. the highlight works correctly

With the default html highlighter of Atom works correctly.

Package.loadSettings is deprecated.

Store package settings files in the settings/ directory instead of scoped-properties/

Package.loadSettings (/Users/michaelenfinger/Desktop/Atom.app/Contents/Resources/app.asar/src/package.js:586:9)
<unknown> (/Users/michaelenfinger/Desktop/Atom.app/Contents/Resources/app.asar/src/package.js:188:43)
Package.measure (/Users/michaelenfinger/Desktop/Atom.app/Contents/Resources/app.asar/src/package.js:167:15)
Package.load (/Users/michaelenfinger/Desktop/Atom.app/Contents/Resources/app.asar/src/package.js:181:12)

ng-src parses protocol relative links as comments

Found on Atom 1.0.4 with AngularJS-Atom v0.3.0 on Mac OSX 10.10.3. Replicated on another machine with same specs and install.

When set to HTML (Angular) and using protocol relative links with ng-src (e.g. //path/to/src instead of http://path/to/src), the path is parsed incorrectly and interpreted as a comment, which flubs the rest of the file and prevents tab autocompletes.

Any ideas on this?

APM Install angularjs-atom not working

what is the command for the atom package manager? is this not published on it? its not on the readme.

Package.getStylesheetsPath is deprecated.

Store package style sheets in the styles/ directory instead of stylesheets/ in the angularjs package

Package.getStylesheetsPath (/opt/atom/resources/app.asar/src/package.js:430:9)
Package.getStylesheetPaths (/opt/atom/resources/app.asar/src/package.js:441:32)
Package.loadStylesheets (/opt/atom/resources/app.asar/src/package.js:423:38)
<unknown> (/opt/atom/resources/app.asar/src/package.js:167:19)

Package.loadSettings is deprecated.

Store package settings files in the settings/ directory instead of scoped-properties/

Package.loadSettings (/opt/atom/resources/app.asar/src/package.js:552:9)
<unknown> (/opt/atom/resources/app.asar/src/package.js:168:43)
Package.measure (/opt/atom/resources/app.asar/src/package.js:147:15)
Package.load (/opt/atom/resources/app.asar/src/package.js:161:12)

Package.getStylesheetsPath is deprecated.

Store package style sheets in the styles/ directory instead of stylesheets/ in the angularjs package

Package.getStylesheetsPath (/Applications/Atom.app/Contents/Resources/app/src/package.js:448:9)
Package.getStylesheetPaths (/Applications/Atom.app/Contents/Resources/app/src/package.js:459:32)

Package.getStylesheetsPath is deprecated.

Hi,
I'm getting this warning.
I'm using the version 1.0, I don't know why it doesn't allow me to install the v.2.0.
I'm using the last version of Atom ( v.0.197.0 ).

Store package style sheets in the styles/ directory instead of stylesheets/ in the angularjs package

Package.getStylesheetsPath (C:\Users\jmadrigal\AppData\Local\atom\app-0.197.0\resources\app.asar\src\package.js:464:9)
Package.getStylesheetPaths (C:\Users\jmadrigal\AppData\Local\atom\app-0.197.0\resources\app.asar\src\package.js:475:32)
Package.loadStylesheets (C:\Users\jmadrigal\AppData\Local\atom\app-0.197.0\resources\app.asar\src\package.js:457:38)
<unknown> (C:\Users\jmadrigal\AppData\Local\atom\app-0.197.0\resources\app.asar\src\package.js:187:19)

Package.getStylesheetsPath is deprecated.

Store package style sheets in the styles/ directory instead of stylesheets/ in the angularjs package

Package.getStylesheetsPath (/Users/michaelenfinger/Desktop/Atom.app/Contents/Resources/app.asar/src/package.js:464:9)
Package.getStylesheetPaths (/Users/michaelenfinger/Desktop/Atom.app/Contents/Resources/app.asar/src/package.js:475:32)
Package.loadStylesheets (/Users/michaelenfinger/Desktop/Atom.app/Contents/Resources/app.asar/src/package.js:457:38)
<unknown> (/Users/michaelenfinger/Desktop/Atom.app/Contents/Resources/app.asar/src/package.js:187:19)

Deprecated Atom APIs will be removed June 1st

Atom will no longer load this package after June 1st without changes. There is one deprecation on the latest version (0.3.0) of this package:

1. Use Workspace::onDidAddTextEditor instead

Visit https://gist.github.com/benogle/6d09e295c84b717ef9b4 and search for your package name to see up-to-date deprecations.

If this package has been replaced by another package or functionality in core, please reply with this information.

See atom/atom#6867 for more info. Thanks!

Package.loadSettings is deprecated.

Store package settings files in the settings/ directory instead of scoped-properties/

Package.loadSettings (/usr/local/share/atom/resources/app.asar/src/package.js:547:9)
<unknown> (/usr/local/share/atom/resources/app.asar/src/package.js:168:43)

Atom Version: 0.193.0-356bb7c

Package.loadSettings is deprecated.

Store package settings files in the settings/ directory instead of scoped-properties/

Package.loadSettings (/usr/local/share/atom/resources/app/src/package.js:565:9)
<unknown> (/usr/local/share/atom/resources/app/src/package.js:187:43)

Atom: 0.189.0-edd46e4

Provide angular semantic highlighting.

Currently atom does not properly highlight "{{scope.myvar}}", it highlights everything the string color.
And inside ng attributes

  <span ng-show="transaction.paymentAmount !=== undefined">C</span>

WebStorm handles angular highlighting nicely.

Syntax highlighting is not consistent

Why does the new syntax hghlighting for Angular JS (especially as attributes) work in some places but not others?

See below:

The top-most ng-click scopes as:

But the other one scopes as:

There's no reason why one works and one doesn't...

add keywords into package.json

http://blog.atom.io/2015/03/30/keywords-on-atom-io.html

Autocomplete doesn't work while writing jade

Also have this package installed: https://atom.io/packages/language-jade

Package.getStylesheetsPath is deprecated.

Store package style sheets in the styles/ directory instead of stylesheets/ in the angularjs package

Package.getStylesheetsPath (/usr/local/share/atom/resources/app/src/package.js:448:9)
Package.getStylesheetPaths (/usr/local/share/atom/resources/app/src/package.js:459:32)

Atom: 0.189.0-edd46e4

Initial version

Hey @subhaze I'm not sure if you've checked out atom.io at all or have any interest in it, but if you do let me know and I'll send you an invite so we can claim the angularjs package for it!

use Autocomplete-plus

Regarding div element generating a class attribute

Question: When generating Div element it automatically generates a class attribute. Is this angular ui package doing this? If so is there a way I can modified so it does not generate a class attribute?

Started using angular ui package.

Notice when I started using it. When generating Div element it automatically generates a class attribute.
I looked through the code but couldn't figure out for sure.

Goal: - so my overall goal is to only have a class when I use the emmet convention of div.classname to generate a class.

Just a quick other note:
I use the emmet package as well - ( I remapped the tab key in that package to ="unset!" and use the ctrl-e to work with emmet)

thanks

Deprecated selector in `angularjs/styles/angularjs.less`

In angularjs/styles/angularjs.less:

Starting from Atom v1.13.0, the contents of atom-text-editor elements are no longer encapsulated within a shadow DOM boundary. This means you should stop using :host and ::shadow pseudo-selectors, and prepend all your syntax selectors with syntax--. To prevent breakage with existing style sheets, Atom will automatically upgrade the following selectors:

• atom-text-editor .entity.name.tag.block.any.html.angular, atom-text-editor::shadow .entity.name.tag.block.any.html.angular, atom-text-editor .entity.other.attribute-name.html.angular, atom-text-editor::shadow .entity.other.attribute-name.html.angular => atom-text-editor .entity.name.tag.block.any.html.angular, atom-text-editor.editor .syntax--entity.syntax--name.syntax--tag.syntax--block.syntax--any.syntax--html.syntax--angular, atom-text-editor .entity.other.attribute-name.html.angular, atom-text-editor.editor .syntax--entity.syntax--other.syntax--attribute-name.syntax--html.syntax--angular

• atom-text-editor .punctuation.definition.block.begin.angular, atom-text-editor::shadow .punctuation.definition.block.begin.angular, atom-text-editor .punctuation.definition.block.end.angular, atom-text-editor::shadow .punctuation.definition.block.end.angular => atom-text-editor .punctuation.definition.block.begin.angular, atom-text-editor.editor .syntax--punctuation.syntax--definition.syntax--block.syntax--begin.syntax--angular, atom-text-editor .punctuation.definition.block.end.angular, atom-text-editor.editor .syntax--punctuation.syntax--definition.syntax--block.syntax--end.syntax--angular

Automatic translation of selectors will be removed in a few release cycles to minimize startup time. Please, make sure to upgrade the above selectors as soon as possible.

Package.getStylesheetsPath is deprecated.

Store package style sheets in the styles/ directory instead of stylesheets/ in the angularjs package

Package.getStylesheetsPath (/usr/local/share/atom/resources/app.asar/src/package.js:430:9)
Package.getStylesheetPaths (/usr/local/share/atom/resources/app.asar/src/package.js:441:32)

Atom Version: 0.193.0-356bb7c

Any suggestion for snippets's prefix name

firstly, Atom is not support multiple prefixes(see http://discuss.atom.io/t/multiple-snippets-key/2297) and prefixes started with special characters.(see atom/snippets#16) (or I don't know the way)

I use ngm or ngma as prefix.(you can see here) I get these name from JetBrain's angularjs-plugin. Because I'm former WebStorm user.

But As @ProLoser said, it's not looks good and hard to remember. any suggestion for snippets's prefix name?

Grammar detection is too loose

Howdy!
First off, many thanks for the plugin, I find it really helpful when I'm building Angular apps. 👍

Secondly, alas, this week I'm working on a Polymer project, which is effectively nothing but HTML files. AngularJS-Atom's auto-detection is detecting all of my files as Angular, which is problematic for particularly style modules (wherein the entire file is just one style tag and some HTML imports), insomuch that they lose syntax highlighting altogether.

ng-model-options not colored correctly

The -options part not colored

Autocomplete without keypress

Hi,

Great plugin! I love it so far, just had a question about it though. Is there any way to have angularjs-atom autocomplete without having to press ctrl+space? I was hoping for behavior similar to an IDE where it is automatic. If not, are there plans to implement this?

Thanks

release v0.0.4

How about do you think v0.0.4?
There are pretty changes after merging atom-angularjs.
So I didn't release new version. I'm not sure we have consensus about snippet, auto-completes, etc...
but we need to release new version if there isn't any suggestion about that.

Adding "" simbols on autocomplete?

When I used Sublime the Angular plugin autocompleted with the ="" simbols, so you would type <div ngi and picking the "ng-if" suggestion would insert <div ng-if="" and move the cursor between the ""

Is there a chance to add this to the plugin?

Syntax highlighting doesn't work with data- attributes

It'd be nice if the syntax highlighting worked with attributes prefixed with data-.

Uncaught TypeError: Cannot read property 'focusScope' of undefined

[Enter steps to reproduce below:]

1. ...
2. ...

Atom Version: 0.201.0
System: Microsoft Windows 7 Professional
Thrown From: angularjs package, v0.3.0

Stack Trace

Uncaught TypeError: Cannot read property 'focusScope' of undefined

At /c:/Users/pk/.atom/packages/scope-inspector/lib/scope-path-view.coffee:89

TypeError: Cannot read property 'focusScope' of undefined
  at ScopePathView.module.exports.ScopePathView.onLeaveButton (C:\Users\pranav.OFS1\.atom\packages\scope-inspector\lib\scope-path-view.coffee:47:29)
  at HTMLDivElement.handler (D:\tools\atom\app-0.201.0\resources\app.asar\src\space-pen-extensions.js:112:34)
  at HTMLDivElement.jQuery.event.dispatch (D:\tools\atom\app-0.201.0\resources\app.asar\node_modules\space-pen\vendor\jquery.js:4681:9)
  at HTMLDivElement.elemData.handle (D:\tools\atom\app-0.201.0\resources\app.asar\node_modules\space-pen\vendor\jquery.js:4359:46)

Commands

Config

{
  "core": {
    "themes": [
      "atom-dark-ui",
      "one-dark-syntax"
    ],
    "disabledPackages": [
      "vim-mode"
    ]
  }
}

Installed Packages

# User
angularjs, v0.3.0
block-travel, v1.0.2
column-select, v0.2.0
hex, v0.5.0
highlight-selected, v0.9.1
js-refactor, v0.3.0
linter, v0.12.6
linter-csslint, v0.0.13
linter-gjslint, v0.0.5
linter-jshint, v0.1.5
linter-jsonlint, v0.1.4
linter-less, v0.4.0
linter-scss-lint, v1.0.4
neon-selection, v0.3.2
open-recent, v2.2.2
project-colorize, v0.2.0
quick-jump, v0.0.4
refactor, v0.4.1
regex-railroad-diagram, v0.7.1
scope-inspector, v0.2.1
word-jumper, v0.2.0
zentabs, v0.8.4

# Dev
No dev packages

It's Alive message hides tabs

The It's ALIVE! message covers tabs and stays displayed the entire time the package is enabled. While the message is cute, it completely negates any benefits of using this plugin.

Blocking 4 of my 7 open tabs

Tested In

I've verified this bug on both Windows 7 & Windows 8. I'm using Atom 0.121.0 with package version 0.0.4

Proposed Solutions

• Make the message temporary. Maybe display it for only 15 seconds.
• Remove the message all together. As a developer, I know which packages I've enabled or not.

Workaround

• Enable developer tools
• Remove the message from the DOM

Specs don't pass

Just like the title says, version 0.0.5 doesn't pass the specs test suite.

Package.loadSettings is deprecated.

Store package settings files in the settings/ directory instead of scoped-properties/

Package.loadSettings (/Applications/Atom.app/Contents/Resources/app.asar/src/package.js:582:9)
<unknown> (/Applications/Atom.app/Contents/Resources/app.asar/src/package.js:184:43)
Package.measure (/Applications/Atom.app/Contents/Resources/app.asar/src/package.js:163:15)
Package.load (/Applications/Atom.app/Contents/Resources/app.asar/src/package.js:177:12)
PackageManager.loadPackage (/Applications/Atom.app/Contents/Resources/app.asar/src/package-manager.js:355:14)
PackageManager.loadPackages (/Applications/Atom.app/Contents/Resources/app.asar/src/package-manager.js:325:14)

Inconsistent syntax highlighting

atom v1.8.0 (package: angualrjs v0.3.4)
I noticed inconsistencies in angular's {{}} markup highlighting. There are three different cases in this HTML and they are highlighted differently

Package.loadSettings is deprecated.

Hi,
I'm getting this warning.
I'm using the version 1.0, I don't know why it doesn't allow me to install the v.2.0.
I'm using the last version of Atom ( v.0.197.0 ).

Store package settings files in the settings/ directory instead of scoped-properties/

Package.loadSettings (C:\Users\<user>\AppData\Local\atom\app-0.197.0\resources\app.asar\src\package.js:586:9)
<unknown> (C:\Users\<user>\AppData\Local\atom\app-0.197.0\resources\app.asar\src\package.js:188:43)
Package.measure (C:\Users\<user>\AppData\Local\atom\app-0.197.0\resources\app.asar\src\package.js:167:15)
Package.load (C:\Users\<user>\AppData\Local\atom\app-0.197.0\resources\app.asar\src\package.js:181:12)

Add ="" to directive autocomplete

Not sure why you settled with just ng-click, instead you should have the autocomplete do ng-click="" and place the cursor between the quotes.

Syntax highlighting looks weird with scope variable that are objects

Add syntax highlighting to Angular elements

It would be great if ng-* flags were highlighted with a different color in the HTML, that way it would be doubly-easy to scan the doc and see what's going on.

re-consider syntax highlight

related with simurai/duotone-light-syntax#4

Can't indent with tab key

When I have this package installed, I cannot use the tab key on a new line to indent. When I disable the package I can indent again. When I run the Key Binding Resolver (command+.) I see the following:

This started with the 0.3.2 release

Syntax Highlighting would be amazing.

In fact, if this package did only one thing, that would probably be the most useful. I don't care about highlighting ng-if, etc. What I want is the angular expressions to be highlighted as if they were javascript. So recognizing ng-if and then highlighting the expression inside the quotes according to JS syntax. Same with anything inside double curly brackets {{highlighted in here}}

Package.getStylesheetsPath is deprecated.

Store package style sheets in the styles/ directory instead of stylesheets/ in the angularjs package

Package.getStylesheetsPath (/Users/rodrigocosta/Downloads/Atom.app/Contents/Resources/app.asar/src/package.js:464:9)
Package.getStylesheetPaths (/Users/rodrigocosta/Downloads/Atom.app/Contents/Resources/app.asar/src/package.js:475:32)
Package.loadStylesheets (/Users/rodrigocosta/Downloads/Atom.app/Contents/Resources/app.asar/src/package.js:457:38)
<unknown> (/Users/rodrigocosta/Downloads/Atom.app/Contents/Resources/app.asar/src/package.js:187:19)

HTML snippets not working

For Atom 0.120.0 and AnularJS-Atom 0.0.4, javascript snippets are working as expected, but all HTML snippets aren't. Nothing happens when HTML prefix + tab is entered.