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

Just released, a free O’Reilly book on Reactive Microsystems: The Evolution of Microservices at Scale. Brought to you in partnership with Lightbend.

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>

 

Strategies and techniques for building scalable and resilient microservices to refactor a monolithic application step-by-step, a free O'Reilly book. Brought to you in partnership with Lightbend.

Topics:

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

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}