ui-router does not render the view contained in an ng-template

Asked

Viewed 203 times

2

I’m taking an online course on Maean and I’m having trouble rendering a view. To view is inserted inside a tag Script and specified as a ng-template and configured within the ui-router. Even following the instructions to view is not rendered and 2 errors appear on the console

This is the page and the controller:

var app = angular.module('flapperNews', ['ui.router']);
           
app.config([
    '$stateProvider',
    '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('home', {
                url: '/home',
                templateUrl: '/home.html',
                controller: 'MainCtrl'
            });
        $urlRouterProvider.otherwise('home');
    }]);

app.factory('posts', [function () {
    var o = {
        posts: []
    }

    return o;
}])

app.controller('MainCtrl', [
    '$scope',
    'posts',
    function ($scope, posts) {
        $scope.test = 'Hello world!';
        $scope.posts = posts.posts;

        $scope.incrementUpvotes = function (post) {
            post.upvotes += 1;
        }

        $scope.addPost = function () {
            if (!$scope.title || $scope.title === '') { return; }
            $scope.posts.push({
                title: $scope.title,
                link: $scope.link,
                upvotes: 0
            });
            $scope.title = '';
            $scope.link = '';
        };

    }]);
<html>

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

<body ng-app="flapperNews">
    <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>Flapper News</h1>
        </div>

        <div ng-repeat="post in posts | orderBy:'-upvotes'">
            <span class="glyphicon glyphicon-thumbs-up" ng-click="incrementUpvotes(post)"></span> {{post.upvotes}}
            <span style="font-size:20px; margin-left:10px;">
                <a ng-show="post.link" href="{{post.link}}">
                    {{post.title}}
                </a>
                <span ng-hide="post.link">
                    {{post.title}}
                </span>
            </span>
        </div>

        <form ng-submit="addPost()" style="margin-top:30px;">
            <h3>Add a new post</h3>

            <div class="form-group">
                <input type="text" class="form-control" placeholder="Title" ng-model="title"></input>
            </div>

            <div class="form-group">
                <input type="text" class="form-control" placeholder="Link" ng-model="link"></input>
            </div>

            <button type="submit" class="btn btn-primary">Post</button>

        </form>
    </script>
</body>

</html>

The errors are as follows:: inserir a descrição da imagem aqui

angularjs ui-router

1 answer

0


Change the order of calls, call the angular before calling the angular-ui-router

Browser other questions tagged angularjs ui-router

You are not signed in. Login or sign up in order to post.