0

I've been struggling with using ng-view for my subview of my application. I've followed multiple tutorials and have even checked the routeProvider and locationProvider attributes to ensure that they were pointing to the correct path.

index.html

<html ng-app="elephantApp">
...
     <div id="view" ng-view>{{$scope.message}}</div>
...
</html>

application.js

/*
Main AngularJS for Elephant Blog App

*/ 

var elephantApp = angular.module("elephantApp", ["ngRoute", "ui.bootstrap"]); 

elephantApp.config(function ($routeProvider, $locationProvider){ 
$routeProvider 
// Home 
.when('/', {
    templateUrl: "app/partials/home.html", 
    controller: "ElephantController"
})
.when('/about', {
    templateUrl: 'partials/about.html', 
    controller: 'PageCtrl'
}) ; 

$locationProvider

.html5Mode(true);
});

elephantApp.controller("ElephantController", function($scope, $route, $routeParams, $location){
    $scope.contentClass = 'content-home';

    $scope.message = {message: "Hi"}; 
}); 

elephantApp.controller("PageCtrl", function($scope, $route, $routeParams, $location){
    $scope.contentClass = 'content';
    $scope.model = {message: "Hey!"};
});

/*
function ElephantController($scope, $route, $routeParams, $location){
    $scope.contentClass = 'content-home';
     $scope.$route = $route;
     $scope.$location = $location;
     $scope.$routeParams = $routeParams;
     $scope.model = {message: "Hey"};

}
*/

So I have no idea what's going on at all.

I have even tried to do code like: 

// Pages 
.when("/about", {templateUrl: "partials/about.html", controller: "PageCtrl"}) 
.when("/faq", {templateUrl: "partials/faq.html", controller: "PageCtrl"}) 
.when("/contact", {templateUrl: "partials/contact.html", controller: "PageCtrl"})

// Blog 
.when("/blog", {templateUrl: "partials/blog.html", controller: "BlogCtrl"}) 
.when("/blog/post", {templateUrl: "partials/blog_item.html", controller: "BlogCtrl"})

 // else 404 
 .otherwise("/404", {
    templateUrl: "partials/404.html", 
    controller: "PageCtrl"
 });

I would like to use the above code as it is what I mainly want to do. Though it isn't working. The ng-includes work but not my ng-views. Am I missing something?

Thanks.

pmac89
  • 418
  • 1
  • 6
  • 23

1 Answers1

1

By default, a route in angular is the hash in the URI path after #, for example http://app/#/about. By setting $locationProvider.html5Mode to true how you done, we can write without # http://app/about, but need that server always returning index.html. For this purposes you can use, for example, Express server: http://www.seankenny.me/blog/2013/08/05/angularjs-in-html5-mode-with-expressjs/

Alexey Semenyuk
  • 3,263
  • 2
  • 32
  • 36
  • I see that. Though for some reason my ng-view is getting commented out. – pmac89 Nov 13 '14 at 21:57
  • Okay, so I figured it out. I had to comment out that `.html5Mode(True)` and now it works (for just the homepage. Though what you said makes sense, I am running a PHP Server and get a wrong routing scheme when I click on my about page. I'll have to find one, thanks! – pmac89 Nov 13 '14 at 22:04
  • Lastly, if I can do HTML5 mode, I would really like to. Do I need to set the base href and then do something like the Express example you provided but a PHP way? – pmac89 Nov 13 '14 at 22:33
  • May be one of them solutions will be useful for server side rewrites urls: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode – Alexey Semenyuk Nov 14 '14 at 08:31
  • Thanks, I'll take a look at it tomorrow. This has been very helpful. I thought I had already setup the Apache Rewrite but looking at my configuration, it isn't set that way anymore. I guess I lost it when I reformatted. Thanks. – pmac89 Nov 14 '14 at 21:31