Productivity - Sublime, AngularJS, Bootstrap Form Template
Productivity - Sublime, AngularJS, Bootstrap Form Template
Join the DZone community and get the full member experience.
Join For FreeSecure your Java app or API service quickly and easily with Okta's user authentication and authorization libraries. Developer accounts are free forever. Try Okta Instead.
- 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>
Secure your Java app or API service quickly and easily with Okta's user authentication and authorization libraries. Developer accounts are free forever. Try Okta Instead.
Like This Article? Read More From DZone
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.linkDescription }}
{{ parent.urlSource.name }}