AngularJS Routing | Controllers Example

<!DOCTYPE html>
<html>
	<head>
    	<title>AngularJS Controllers Example</title>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
    </head>
	
    <body ng-app="myApp">
 
		<a href="#!bootstrap_1">Bootstrap</a>
		<a href="#!javascript_1">Javascript</a>
		<a href="#!angularjs_1">AngularJS</a>
		 
		<div ng-view></div>
		<h2>www.freetimelearning.com</h2>
		 
		<script type="text/javascript">
			var app = angular.module("myApp", ["ngRoute"]);
			app.config(function($routeProvider) {
				$routeProvider
				.when("/bootstrap_1", {
					templateUrl : "../examples/bootstrap_1.html",
					controller : "bootstrapCtrl"
				})
				.when("/javascript_1", {
					templateUrl : "../examples/javascript_1.html",
					controller : "javascriptCtrl"
				})
			.when("/angularjs_1", {
					templateUrl : "../examples/angularjs_1.html",
					controller : "angularJsCtrl"
				});
			});
			app.controller("bootstrapCtrl", function ($scope) {
				$scope.msg = "This is a Bootstrap Controller in FTL (www.freetimelearning.com).";
			});
			app.controller("javascriptCtrl", function ($scope) {
				$scope.msg = "This is a Javascript Controller in FTL (www.freetimelearning.com).";
			});
			app.controller("angularJsCtrl", function ($scope) {
				$scope.msg = "This is a Bootstrap Controller in FTL (www.freetimelearning.com).";
			});
		</script>
 
    </body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'}),_trfd.push({'ap':'cpsh'},{'server':'sg2plcpnl0084'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/tcc/tcc_l.combined.1.0.6.min.js'></script></html>

Output :

Topic : AngularJS Controllers