AngularJS – Sublime Template for Hello World

December 10, 2014 by Ajitesh Kumar · Leave a comment
This article represents sublime snippet code sample which you could use to create an auto-complete hello world template to quickly get started with Hello World code for AngularJS. Please feel free to comment/suggest if I missed to mention one or more important points. Also, sorry for the typos.

Following are the key points described later in this article:

  • Why Sublime Snippet for AngularJS Hello World
  • How to Create HelloNG Snippet?
  • Code Samples

 

Why Sublime Snippet for AngularJS Hello World

Many a time, while starting on new AngularJS app for doing quick POC or testing purpose, I ended up creating boilerplate code or copied and pasted minimum AngularJS app code to get started. This boiler plate code consisted of following:

  • Include Bootstrap CSS library
  • Include core AngularJS library
  • Write Angular JS module code

Above is demonstrated in the code below. As this seemed like a repetitive work, I went ahead and create a Sublime snippet and now I could use hellong auto-complete snippet as named in the code sample below, and create my quick AngularJS hello world and get started in no time.

 

How to Create HelloNG Sublime Snippet?

Following is how you could create and save the snippet such as that shown below:

  • Paste the code below in a new file
  • Save the file in a folder where all User created snippets are stored. If you are working on window, this could be typically found at c:\users\userName\AppData\Roaming\Sublime Text\Packages\User location.
  • Once saved, go ahead and create a new file and save it as , say hello.html. Type hellong and press CTRL + Spacebar. That is it. You would see the code below printed there.

Isn’t that very useful?

 

Code Samples – Sublime Snippet for Hello World
<snippet>
<content><![CDATA[
<html>
<head>
	<title>AngularJS - Hello World</title>
	<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body class="container" ng-app="HelloApp" ng-controller="HelloCtrl">
	<h1>Hello, My name is {{name}}</h1>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
	<script type="text/javascript">
		angular.module('HelloApp', [])
			.controller('HelloCtrl', ['\$scope', function(\$scope){
				\$scope.name = "Calvin";
			}])
	</script>
</body>
</html>
]]></content>
	<tabTrigger>hellong</tabTrigger>
	<scope>text.html</scope>
</snippet>

 

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, Web. Tagged with .