DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones AWS Cloud
by AWS Developer Relations
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Partner Zones
AWS Cloud
by AWS Developer Relations
Building Scalable Real-Time Apps with AstraDB and Vaadin
Register Now

Trending

  • Measuring Service Performance: The Whys and Hows
  • Guide To Selecting the Right GitOps Tool - Argo CD or Flux CD
  • Batch Request Processing With API Gateway
  • Execution Type Models in Node.js
  1. DZone
  2. Coding
  3. Frameworks
  4. Productivity - Sublime, AngularJS, Bootstrap Form Template

Productivity - Sublime, AngularJS, Bootstrap Form Template

Ajitesh Kumar user avatar by
Ajitesh Kumar
CORE ·
Dec. 15, 14 · Interview
Like (0)
Save
Tweet
Share
6.25K Views

Join the DZone community and get the full member experience.

Join For Free
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>
Form (document) Template AngularJS Bootstrap (front-end framework) Productivity Snippet (programming)

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

Opinions expressed by DZone contributors are their own.

Trending

  • Measuring Service Performance: The Whys and Hows
  • Guide To Selecting the Right GitOps Tool - Argo CD or Flux CD
  • Batch Request Processing With API Gateway
  • Execution Type Models in Node.js

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com

Let's be friends: