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 available.

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 installed.

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 menu.

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 Settings –> AngularJS –> JavaScript 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.