I am new to learning Angular and following tutorials on Thinkster. Currently, I am at the step of Adding a New State in Angular Routing.
My goal is to use ui-router to display an inline template, but unfortunately, the template does not show up. Here is a snippet of my index.html:
<html>
<head>
<!-- My JavaScript files are loaded here -->
</head>
<body ng-app='flapperNews'>
<div class ='row'>
<div class="col-md-6 col-md-offset-3">
<div ui-view></div>
</div>
</div>
<script type="text/ng-template" id="home.html">
<!-- My template written as plain HTML>
</script>
</body>
</html>
This is how I have set up routing in my app.js:
angular.module('flapperNews',['ui.router'])
.config([
'$stateProvider',
'$urlRouterProvider',
function($stateProvider, $urlRouterProvider){
return;
$stateProvider
.state('home', {
url: '/home',
templateUrl: '/home.html',
controller: 'MainCtrl'
});
$urlRouterProvider.otherwise('home');
}]);
I expected ui-router to interpret the URL and render the appropriate template within the div ui-view tags. However, my page is blank with no errors in the console. Despite trying different approaches recommended by Thinkster and the ui-router docs, I haven't been able to resolve this issue.
While working through the tutorial with local files, I noticed that since adding the routing code, there is a # appended to my URL like so:
file://blah/blah/FlapperNews/index.html#