AngularJS – How to Code Quickly with Sublime Text Editor

August 28, 2014 by Ajitesh Kumar · 2 Comments
angularjs sublime text editor

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
Latest posts by Ajitesh Kumar (see all)

Ajitesh Kumar

I have been recently working in the area of Data analytics including Data Science and Machine Learning / Deep Learning. I am also passionate about different technologies including programming languages such as Java/JEE, Javascript, Python, R, Julia, etc, and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data, etc. I would love to connect with you on Linkedin. Check out my latest book titled as First Principles Thinking: Building winning products using first principles thinking.
Posted in Javascript. Tagged with .

2 Responses

  • bs August 28, 2014 at 2:31 pm

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

    Reply
    • SACHIN N WASMATKAR May 23, 2016 at 8:37 am

      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=\”*”,

      Reply