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!