(function() {
var app = angular.module('myStateApp', [
'ngRoute'
]);
app.config(function($routeProvider) {
$routeProvider.when('/page', {
templateUrl: 'page.tpl.html',
controller: 'PageCtrl'
});
});
app.controller('PageCtrl', function($scope) {
console.log('PageCtrl');
});
})();
<!DOCTYPE html>
<html ng-app="myStateApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<a ng-href="#page">Load page</a>
<br />
<br />
name-in-body: <input id="name-in-body" name="name"></input>
<div ng-view>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-semver="1.2.28" src="https://code.angularjs.org/1.2.28/angular.js" data-require="angular.js@1.2.x"></script>
<script src="//code.angularjs.org/1.2.28/angular-route.min.js"></script>
<script src="app.js"></script>
</body>
</html>
/* Put your css in here */
<h1>
<p class="bg-success">Inside the "page.tpl.html"</p>
</h1>
name-in-tpl: <input id="name-in-tpl" name="name"></input>
<script src="custom-function.js"></script>
$(document).ready(function() {
alert($('#name-in-body')[0].id);
$('#name-in-body').css('color', 'yellow')
.css('background-color', '#222266')
.val('Enter your name');
alert($('#name-in-tpl')[0].id);
$('#name-in-tpl').css('color', 'red')
.css('background-color', '#FDFDFD')
.val('Enter your name');
$('#name-in-tpl').bind('focus', function() {
$(this).css('color', '#000').val("Focused!")
}).bind('blur', function() {
$(this).css('color', 'red').val("Blurred!")
});
});