CODEWITHSUNDEEP
angularjsng-view
pmac89
pmac89

Reputation: 418

ng-view and routing is not working

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.

Upvotes: 0

Views: 1193

Answers (1)

Alexey Semenyuk
Alexey Semenyuk

Reputation: 3303

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/

Upvotes: 1

Related Questions