Using the AngularJS Package for Sublime Text
original link : http://weblogs.asp.net/dwahlin/archive/2013/08/30/using-the-angularjs-package-for-sublime-text.aspx
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:
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.
Installation
Simple
The simplest method of installation is through the Sublime Text console. The console is accessed via the ctrl+` shortcut or the View > Show Console menu. Once open, paste the appropriate Python code for your version of Sublime Text into the console.
Sublime Text 3
import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
Sublime Text 2
import urllib2,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')
This code creates the Installed Packages folder for you (if necessary), and then downloads the Package Control.sublime-package into it. The download will be done over HTTP instead of HTTPS due to Python standard library limitations, however the file will be validated using SHA-256.
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:
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.
Installation
Simple
The simplest method of installation is through the Sublime Text console. The console is accessed via the ctrl+` shortcut or the View > Show Console menu. Once open, paste the appropriate Python code for your version of Sublime Text into the console.
Sublime Text 3
import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
Sublime Text 2
import urllib2,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')
This code creates the Installed Packages folder for you (if necessary), and then downloads the Package Control.sublime-package into it. The download will be done over HTTP instead of HTTPS due to Python standard library limitations, however the file will be validated using SHA-256.
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:
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
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.
Published Friday, August 30, 2013 12:46 PM by dwahlin Filed under: JavaScript, AngularJS
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.
Published Friday, August 30, 2013 12:46 PM by dwahlin Filed under: JavaScript, AngularJS