Angular.js: Using inline templates

When using Angular.js, your view content doesn’t have to be separate HTML files. Instead you can perfectly use inline HTML templates. Here is a quick sample how to do this:

	<h2>Angular Inline Templates</h2>
	<div ng-app="sampleApp" ng-cloak ng-strict>
	<h3>{{vm.title}}</h3>
	<ng-view></ng-view>
	<script type="text/ng-template" id="page1.html">
	<div class="view">
	<h2>Page 1</h2>
	</div>
	</script>
	<script type="text/ng-template" id="page2.html">
	<div class="view">
	<h2>Page 2</h2>
	</div>
	</script>
	<script type="text/ng-template" id="page3.html">
	<div class="view">
	<h2>Page 3</h2>
	</div>
	</script>
	</div>

view raw TemplateSample.html hosted with ❤ by GitHub

	'use strict';
	//App
	(function () {
	angular.module('sampleApp', ['ngRoute'])
	.config(['$routeProvider', function ($routeProvider) {
	$routeProvider.
	when("/first", { controller: "sampleController", templateUrl: "page1.html" }).
	when("/second", { controller: "sampleController", templateUrl: "page2.html" }).
	when("/third", { controller: "sampleController", templateUrl: "page3.html" }).
	otherwise({ redirectTo: "/first" });
	}]);
	}());
	//Controller
	(function (app) {
	function sampleController() {
	var vm = this;
	vm.title = 'Angular Inline Templates';
	};
	app.controller('sampleController', [sampleController]);
	}(angular.module('sampleApp')));

view raw TemplateSample.js hosted with ❤ by GitHub