Sharing Top Content from the Angular-sphere.

Sublime Text with AngularJS Package could be good editor for AngularJs development.

Sublime Text with AngularJS Package could be good editor for AngularJs development.

  • Using the AngularJS Package for Sublime Text

    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.

  • 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 2: Visit the Package Control site An excellent package manager for Sublime Text can be found at 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.
  • 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 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.
  • 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.

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 …

@sumcha123: Sublime Text with AngularJS Package could be good editor for AngularJs development.

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:

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:

Once the AngularJS package is installed you’ll be shown a message about some of the features added in the current release:

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.

Dan Wahlin

Comments are closed, but trackbacks and pingbacks are open.