Brad Green from
the AngularJS team recently
tweeted about a package that was released for the Sublime Text editor that
adds AngularJS support so I thought I’d do a quick write-up on how to use it
since it’s really nice to have available. Although Sublime Text is quite popular
now days, I’m going to approach this post from the beginner standpoint and
provide a step-by-step look at getting the package running. Information about
the AngularJS Sublime Text Package can be found here. Some of the key features include:
- Code completion of core AngularJS directives (ng-model, ng-repeat, etc.)
- Code completion for key AngularJS objects and components such as directive
- Support for custom directive code completion
- Enhanced functionality within AngularJS HTML templates defined in a page
- Ability to customize the attributes, element directives, etc.
Step 1: Install Sublime Text
If you don’t already have Sublime Text installed head over to http://www.sublimetext.com/3 and install
it. Version 3 is currently in beta but I’ve been using it awhile without any
issue. It’s not a free tool ($70 but well worth it) but there’s a free trial
Step 2: Visit the Package Control Site
An excellent package manager for Sublime Text can be found at https://sublime.wbond.net/installation.
It can be used to install a variety of editor enhancements (packages) such as
the AngularJS package I’ll discuss here so I highly recommend getting it
Follow the text shown on the homepage to get the Package
Control tool installed – it only takes a minute or so to get going.
Step 3: Install the AngularJS Package
After installing the package control you’ll want to restart Sublime Text.
After it restarts perform the following steps:
- Press ctrl+shift+p (Windows) or
cmd+shift+p (OS X) to open the command pallet.
- Type Package and select Install Package
from the options that display
- Once the Install Package dialog displays enter
AngularJS and press Enter.
Note: If you install Sublime Text 2 (instead of 3) you’ll need
to follow the step shown here. To get to the user preferences select
Preferences –> Settings – User from the
Step 4: Get Busy Coding
Once the AngularJS package is installed you’ll be shown a message about some
of the features added in the current release:
- Quick Panel search of directives/controllers/filters/etc.
GoTo definition for directives
- GoToDocs for core AngularJS directives
- Directive completions for your custom defined directives
I started by creating a new HTML file (ctrl+n or cmd+n) and adding the
ng-app directive. Here’s what I see in Sublime Text:
As you create controllers, factories, and other AngularJS components you’ll get
code help when accessing some of the key AngularJS objects:
Some nice snippets are included for creating modules, directives, filters, and
more. For example, if I start typing module and select the
module snippet the following module code will be output:
If I type directive and select that snippet the following (very
helpful) code is output:
Additional snippets are available and you can even extend the built-in list
with new ones by going to Preferences –> Package
Completions – User and adding custom snippets into the file.
Several additional features are available such as navigating to files and
help. Find additional information about the package at https://github.com/angular-ui/AngularJS-sublime-package#plug-in-details.