Categories: JavascriptToolsUI

Sublime – AngularJS – Useful Auto-complete Snippets

This article presents code samples and instructions to configure your Sublime editor to include ng (angular) scripts in auto-complete fashion. I found it important to get quickly started with my new angular apps. Based on following, you could define custom autocomplete snippets for all angular scripts.

 

Following are the steps to create snippet file for each angularjs script:

  • In Sublime Text Editor, go to Tools > New Snippet. A new untitled file consisting of following code would open:
    <snippet>
     <content><![CDATA[
        Hello, ${1:this} is a ${2:snippet}.
        ]]></content>
        <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
        <!-- <tabTrigger>hello</tabTrigger> -->
        <!-- Optional: Set a scope to limit where the snippet will trigger -->
        <!-- <scope>source.python</scope> -->
    </snippet>
  • Write following code within CDATA by replacing with code such as “Hello….”. The code would look like following.
    <content><![CDATA[
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/$1.$2.$3/angular.min.js"></script>
    ]]></content>
  • Give an appropriate name within “TabTrigger” element. This would be name you would write in the editor followed by ctrl + “space bar” to autocomplete. I put the name such as “jsng”. The code would look like following:
    <tabTrigger>jsng</tabTrigger>
  • Write the source type as “text.html” within scope element. The code would like following:
    <scope>text.html</scope>
  • Once done with above steps, its time to save the file. The file name must end with .sublime-snippet. You could choose format such as filetype-triggername.sublime-snippet. For above, I used filename such as html-jsng.sublime-snippet
  • Close and re-open the sublime. Test by writing “js” and ctrl + “space bar” to see autocomplete option. You shall find your snippet displayed for selection. Once you select, you would see “/../”. This is left empty to put the version name. You could type in as 1.2.23 as per the current version and you are all set. You could however choose to create snippet for different versions separately.
Code Samples for Inclusion of AngularJS Scripts

The code below represents custom auto-complete snippet for following AngularJS libraries. Create snippet files for following scripts  based on above instructions.

  • angular.min.js: Type “jsng” & ctrl + “space bar” to include angular.min.js
  • angular-route.js: Type “jsngroute” & ctrl + “space bar” to include angular-route.min.js
  • angular-resource.js: Type “jsngresource” & ctrl + “space bar” to include angular-resource.min.js

Sublime Snippet for Inclusion of Angular.min.js

<snippet>
    <content><![CDATA[
         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/$1.$2.$3/angular.min.js"></script>
]]></content>
    <tabTrigger>jsng</tabTrigger>
    <scope>text.html</scope>
</snippet>

Sublime Snippet for Inclusion of Angular-route.min.js

<snippet>
    <content><![CDATA[
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/$1.$2.$3/angular-route.min.js"></script>
]]></content>
    <tabTrigger>jsngroute</tabTrigger>
    <scope>text.html</scope>
</snippet>

Sublime Snippet for Inclusion of Angular-resource.min.js

<snippet>
    <content><![CDATA[
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/$1.$2.$3/angular-resource.min.js"></script>
]]></content>
    <tabTrigger>jsngresource</tabTrigger>
    <scope>text.html</scope>
</snippet>

Feel free to suggest/comment.

[adsenseyu1]

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. For latest updates and blogs, follow us on Twitter. 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. Check out my other blog, Revive-n-Thrive.com

View Comments

Recent Posts

Feature Selection vs Feature Extraction: Machine Learning

Last updated: 2nd May, 2024 The success of machine learning models often depends on the…

18 hours ago

Model Selection by Evaluating Bias & Variance: Example

When working on a machine learning project, one of the key challenges faced by data…

24 hours ago

Bias-Variance Trade-off in Machine Learning: Examples

Last updated: 1st May, 2024 The bias-variance trade-off is a fundamental concept in machine learning…

2 days ago

Mean Squared Error vs Cross Entropy Loss Function

Last updated: 1st May, 2024 As a data scientist, understanding the nuances of various cost…

2 days ago

Cross Entropy Loss Explained with Python Examples

Last updated: 1st May, 2024 In this post, you will learn the concepts related to…

2 days ago

Logistic Regression in Machine Learning: Python Example

Last updated: 26th April, 2024 In this blog post, we will discuss the logistic regression…

7 days ago