AngularJS – How to Code Quickly with Sublime Text Editor

2

After working on AngularJS for sometime now, I was looking for an editor which helps to code efficiently and effectively with AngularJS. This is when I discovered Sublime Text Editor. This article presents tips on what needs to be done to write AngularJS code with Sublime Text Editor.

I have to confess that it has been a fulfilling experience to code in AngularJS with Sublime once installation and configuration is done. I was able to complete my AngularJS hello world program within few minutes. Trust me, it is worth your time. Let me know what you think about it.



Do the following and enjoy the Angular ride much more than ever:

  • Download and install Sublime Text Editor from http://www.sublimetext.com/.
  • Download Angular Sublime package (zip file) developed by Angular-UI team from this page: https://github.com/angular-ui/AngularJS-sublime-package. This page consists of greater details on further customizing the Sublime for AngularJS.
  • Unzip and name the root package (angularjs-sublime-packager-master) as “AngularJS”. Make sure you have all the files just within this package.
  • Copy AngularJS folder.
  • Open Sublime Text Editor and paste “AngularJS” folder by opening “Preferences > Browse Packages”
  • Paste some of the following configuration (JSON format) by opening the “Preferences > Settings – User”. The file would look like following:
    // Settings in here override those in "Default/Preferences.sublime-settings", and
    // are overridden in turn by file type specific settings.
    {
    	"auto_complete_selector": "source - comment, meta.tag - punctuation.definition.tag.begin",
    	"auto_complete_triggers":
            [
                {
                "characters": "ng-controller=\"*",
                "selector": "punctuation.definition.string"
                }
            ]
    }
  • Close Sublime and open it again. And, try your AngularJS hello world program. You could check the preferences related with AngularJS and customize appropriately as shown in following screenshot.
    Sublime AngularJS Preferences

    Sublime AngularJS Preferences



Ajitesh Kumar
Share.

2 Comments

  1. Nice post. Very useful.
    Sorry, but I could not understand one of the points in your post.

    That is:
    “Paste some of the following configuration (JSON format) by opening the “Preferences > Settings – User”.

    • SACHIN N WASMATKAR on

      There has to be an escape character before double quote for sublime to understand the auto triggering of angular controller as shown below. This will take care of issue while saving the settings.
      “characters”: “ng-controller=\”*”,

Leave A Reply

Time limit is exhausted. Please reload the CAPTCHA.