ui-router and Angularjs issue

Question

https://thinkster.io/mean-stack-tutorial/ Question comes from this tutorial pretty much. See section - Angular Routing, if neccesary. here's my index.html -

<html>
    <head>
        <title>My Angular App!</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <link rel="stylesheet" href="/Users/Taylor/WebstormProjects/thinkstertut/node_modules/bootstrap/dist/css/bootstrap-theme.min.css">
    </head>

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


    </body>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="app.js"></script>
</html>

That's my HTML code for index.html. I have my home.html file as well, but regardless if I use a script tag inside index.html or seperate it into it's own file (home.html), I'm having issues getting my view to display. Here's my .js -

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.posts = posts.posts;
        $scope.test = 'hello world';
        $scope.posts = [
            {title: 'post 1', upvotes: 4},
            {title: 'post 2', upvotes: 25},
            {title: 'post 3', upvotes: 14},
            {title: 'post 4', upvotes: 8},
            {title: 'post 5', upvotes: 5}
        ];

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

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

Not sure if.... ui-router isn't working properly, or if perhaps it's simply the controller isn't linking up - at one point I did have the angular code display without actually running, but now I'm just getting a blank page when I run index.html - Any help appreciated, just not sure what piece I'm missing to get ui-router to love me. I read through the docs but... I guess it's just not clicking yet. Thanks!

Matias Fernandez Martinez · Accepted Answer · 2015-04-13 19:49:14Z

1

Here is your code working. you have 2 issues, first you are inserting the script tags outside the body, that causes a parse error i think, and the main issue is that you are loading first the angular-ui-router library, load first angularjs

answered Apr 13, 2015 at 19:49

Matias Fernandez Martinez

1,88513 silver badges15 bronze badges

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

1 Comment

tayl0rt Over a year ago

Thank you so much, between your answer and the docs for ui-router I finally have it all working perfectly! Your answer really helped tremendously. take care!!! :D

Collectives™ on Stack Overflow

ui-router and Angularjs issue

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related