Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

AngularJS - Sublime Template for Hello World

DZone's Guide to

AngularJS - Sublime Template for Hello World

· Java Zone
Free Resource

Bitbucket is for the code that takes us to Mars, decodes the human genome, or drives your next car. What will your code do? Get started with Bitbucket today, it's free.

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>

 

Bitbucket is the Git solution for professional teams who code with a purpose, not just as a hobby. Get started today, it's free.

Topics:

Published at DZone with permission of Ajitesh Kumar, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}