[Dev tip] Using the AngularJS Package for Sublime Text


Brad Green from the AngularJS team recently tweeted about a package that was released for the Sublime Texteditor 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.

image

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:

image

  • Once the Install Package dialog displays enter AngularJS and press enter.

image

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:

image
As you create controllers, factories, and other AngularJS components you’ll get code help when accessing some of the key AngularJS objects:

image
Some nice snippets are included for creating modules, directives, filters, and more. For example, if I start typingmodule and select the module snippet the following module code will be output:

image

If I type directive and select that snippet the following (very helpful) code is output:

image

Additional snippets are available and you can even extend the built-in list with new ones by going toPreferences –> 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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s