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>
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
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
Latest posts by Ajitesh Kumar (see all)
- Model Parallelism vs Data Parallelism: Examples - April 11, 2024
- Model Complexity & Overfitting in Machine Learning: How to Reduce - April 10, 2024
- 6 Game-Changing Features of ChatGPT’s Latest Upgrade - April 9, 2024
Leave a Reply