404 on inline template using angular js

Question

I'm attempting to make a simple Hello World page with an inline template defined as home.html. The routing used is ui.router, and when the code is run I receive an infinite loop of

GET /home.html 404 0.868 ms - 1076

which indicates to me that angular can't find the home.html template that was defined.

app.js

var app = angular.module('HelloWorld', ['ui.router']);

app.controller('MainCtrl', [
    '$scope',
    'posts',
    function($scope, posts){
        $scope.test = 'Hello world!';
        $scope.posts = posts.posts;
        $scope.addPost = function(){
            if(!$scope.title || $scope.title === '') { return; }
            $scope.posts.push({
                title: $scope.title,
                link: $scope.link,
                upvotes: 0
            });
            $scope.title = ''; //Set title to empty
            $scope.link = ''; // Set link to empty
        };
        $scope.incrementUpvotes = function(post) {
            post.upvotes += 1;
        };
    }]);

app.factory('posts', [function(){
    var o = {
        posts: [
            {title: 'post 1', upvotes: 5}
        ]
    };
    return o;
    }]);


app.config([
    '$stateProvider',
    '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {

        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl: 'home.html',
                controller: 'MainCtrl'
            });

        $urlRouterProvider.otherwise('home');
    }]);

index.ejs

<!DOCTYPE html>
<html ng-app="HelloWorld">
<head>
    <title>Hello World</title>
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
    <script src="javascripts/app.js"></script>
    <style> .glyphicon-thumbs-up { cursor:pointer } </style>
</head>

<body>
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <ui-view></ui-view>
        </div>
    </div>

    <script type="text/ng-template" id="home.html">
        <div class="page-header">
            <h1>Hello World</h1>
        </div>
    </script>
</body>
</html>

I can't spot what seems to be going wrong in the code. I've also tried variations using /home.html in both the app config and html to no avail. I could use some insight on how I missed up the configuration/inline template.

Off topic: Consider both the getter/setter approach to modules and controllerAs syntax as best practice in your Angular apps. Module variables and $scope are somewhat outdated techniques. — isherwood
– isherwood, Commented Jun 7, 2016 at 20:33

Don · Accepted Answer · 2016-06-07 20:25:27Z

1

If this is exactly your code you have a missing " in id of template. See below for correction

<script type="text/ng-template" id="home.html">

answered Jun 7, 2016 at 20:25

Don

1,3341 gold badge10 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JME Over a year ago

That was a typo when copying it over, edited for correctness

Anthony · Accepted Answer · 2016-06-07 23:09:40Z

0

Your code is working fine for me. To further test it I added the following to the html:

<a ui-sref='home'>Home</a>
<a ui-sref='about'>About</a> 

....

<script type="text/ng-template" id="about.html">
  <div class="page-header">
    <h1>About</h1>
  </div>
</script>

I then added the following route to the javascript:

.state('about', {
   url: '/about',
   templateUrl: 'about.html',
   controller: 'MainCtrl'
});

This adds links to the top left allowing you to switch views. You can see the working code at http://codepen.io/amartin007/pen/rLOvqa

edited Jun 7, 2016 at 23:09

answered Jun 7, 2016 at 23:04

Anthony

914 bronze badges

Collectives™ on Stack Overflow

404 on inline template using angular js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related