Running MEAN stack, problems with angular inline templates

angular

#1

I’m attempting to run a web app on c9 with MEAN stack and I’m following a tutorial online. I’ve installed node and mongo into the Workspace (though I’m not using them yet). My page displays blank and i an error from the chrome developer console: Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.0-beta.5/$injector/modulerr?p0=flapperNews&…pis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.0-beta.5%2Fangular.min.js%3A18%3A3) Anyone know whats going on here? Is it a problem with my angular links? I’ve tried ones straight off the tutorial (https://thinkster.io/mean-stack-tutorial ) and ones off the cdnjs.cloudflare website, and the googleapis ones.
My workspace should you want to see it: https://ide.c9.io/bdeo/mean-sandbox
My directory:
mean-sandbox
|–thinkster-tutorial
|-----index.html
|-----app.js

index.html code:
`<!doctype html>

Flapper News .glyphicon-thumbs-up {cursor:pointer}
`

app.js code:

`var app = angular.module('flapperNews', ["ui.router"]);
app.factory('posts',[function(){
    var o = {
        posts: []
    };
    return o;
}]);

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

    $stateProvider
    .state('home', {
        url: '/home',
        templateUrl: '/home.html',
        controller: 'MainCtrl'
    })
    .state('posts', {
        url: '/posts/{id}',
        templateUrl: '/posts.html',
        controller: 'PostsCtrl'
    });
    $urlRouterProvider.otherwise('home');
}]);

app.controller('MainCtrl', ['$scope','posts', function($scope, posts) {
    $scope.posts = posts.posts;
    $scope.posts = [
        {title: 'post 1', upvotes: 12},
        {title: 'post 2', upvotes: 14},
        {title: 'post 3', upvotes: 16},
        {title: 'post 4', upvotes: 11},
        {title: 'post 5', upvotes: 1}
        ];
    $scope.addPost = function(){
        if (!$scope.title || $scope.title === '') {return;}
        $scope.posts.push({
            title: $scope.title, 
            link: $scope.link,
            upvotes: 0,
            comments: [
                {author: 'Joe', body: 'Cool post!', upvotes: 0},
                {author: 'Bob', body: 'Great idea but everything is wrong!', upvotes: 0}
            ]
        });
        $scope.title = '';
        $scope.link = '';
    }
    $scope.incrementUpvotes = function(post){
        post.upvotes += 1;
    }
}]);

app.controller('PostsCtrl', [ '$scope', '$stateParams', 'posts',
    function($scope, $stateParams, posts){
        $scope.post = posts.posts[$stateParams.id];

    $scope.addComment = function(){
        if($scope.body === '') { return; }
        $scope.post.comments.push({
            body: $scope.body,
            author: 'user',
            upvotes: 0
        });
        $scope.body = '';
    };
}

);

This code runs on plunker: plnkr.co/edit/u42STTpQVYATSydzMYeA?p=preview , as provided by someone on my stack overflow post here: http://stackoverflow.com/questions/36242124/inline-html-ng-templates-not-loading . I’m guessing this is cloud9 issue because my code runs and is not producing syntax errors.

Can anyone provide any help?


#2

I just looked at your application preview now https://mean-sandbox-bdeo.c9users.io/thinkster-tutorial/#/home and it seems it’s working correctly. Did you change something?


#3

Yeah was just about to post here. Apparently all my injected JS and bootstrap needed to be https.


#4

Ah yep that makes sense. You can also just use // instead of http:// or https:// and your browser will auto detect which one it should use. (see http://stackoverflow.com/questions/9646407/two-forward-slashes-in-a-url-src-href-attribute for more information)