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

Productivity - Sublime, AngularJS, Bootstrap Form Template

DZone's Guide to

Productivity - Sublime, AngularJS, Bootstrap Form Template

· Java Zone
Free Resource

What every Java engineer should know about microservices: Reactive Microservices Architecture.  Brought to you in partnership with Lightbend.

This article represents sublime text editor snippet code sample for an AngularJS-Bootstrap form template which could be used to quickly create an angular app with a simplistic bootstrap form. 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 AngularJS-Bootstrap Form Template?
  • How to Create Sublime Snippet?
  • Code Samples – AngularJS-Bootstrap Form Template

Why AngularJS-Bootstrap Form Template?

Many times, I wanted to experiment with AngularJS features on an HTML form. This required me to re-write or copy & paste angularjs code and bootstrap form code and create a simplistic form to get started. This is where this idea of creating a quick Sublime snippet which could be used to quickly create a simplistic or I would say, kickstarter AngularJS-Bootstrap form app. This has ended up enhancing my productivity and I get started on experimenting any Angular feature as quickly as possible. Now, I open a new html file in sublime, and write ngform (name of snippet as shown in below code sample) and do CTRL + spacebar. That is it. I get an Angular App with simplistic bootstrap form.

How to Create ngform Sublime Snippet?

Following is how you could create and save the snippet:

  • Paste the code given below in a new file
  • Save the file at 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 ngform (name of snippet) and press CTRL + Spacebar. That is it. You would see the code below printed there. You are all set to get started.

Code Samples – AngularJS-Bootstrap Sublime Form Template

 

<snippet>
	<content><![CDATA[
<html>
<head>
	<title>AngularJS - Form Template</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, {{name}}</h1>
	<hr/>
	<form class="form-horizontal" role="form">
	  <div class="form-group">
	    <label for="name" class="col-sm-2 control-label">Name</label>
	    <div class="col-sm-4">
	      <input type="text" class="form-control" id="name" ng-model="name" placeholder="Name">
	    </div>
	  </div>
	  <div class="form-group">
	    <div class="col-sm-offset-2 col-sm-10">
	      <button type="submit" class="btn btn-primary">Submit</button>
	    </div>
	  </div>
	</form>
	<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>ngform</tabTrigger>
	<scope>text.html</scope>
</snippet>

Microservices for Java, explained. Revitalize your legacy systems (and your career) with Reactive Microservices Architecture, 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.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

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

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

{{ parent.tldr }}

{{ parent.urlSource.name }}