Angular Partial Routes not working using ng-view

Question

My template page renders fine but my scope text and my partials do not display. I created a link to click on Status... but it doesnt render anything in my ng-view within my template. Up to my neck in trying to figure out something that should be simple... seems complicated but I know im missing something.

var app= angular.module('myApp', ['ngRoute','flightforms']);

app.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/login', {
  templateUrl: 'partials/login.html', 
  controller: 'loginCtrl'
});

$routeProvider.when('/home', {
  templateUrl: 'partials/default.html', 
  controller: 'homeCtrl'
});

$routeProvider.when('/home/:users', {
  templateUrl: 'partials/subpgs/users.html', 
  controller: 'userCtrl'
});

$routeProvider.when('/home/:status', {
  templateUrl: 'partials/subpgs/status.html', 
  controller: 'statusCtrl'
});

$routeProvider.when('/ao-obsvao', {
  templateUrl: 'partials/subpgs/aobsrv.html', 
  controller: 'obsvaoCtrl'
});

$routeProvider.when('home/:obs-bkoff', {
  templateUrl: 'partials/subpgs/obsbkoff.html', 
  controller: 'obsbkoffCtrl'
});

$routeProvider.when('/home/:fieldmgr', {
  templateUrl: 'partials/subpgs/fieldopmgr.html', 
  controller: 'fieldmgrCtrl'
});

$routeProvider.when('/home/:dispatch', {
  templateUrl: 'partials/subpgs/disp.html', 
  controller: 'dispatchCtrl'
});

my controllers:

var flightforms = angular.module('flightforms', []);

app.controller('homeCtrl', ['$scope','loginService','$http','flightforms',
function($scope,loginService,$http,flightforms){
$scope.txt='Logged in...';
$scope.logout=function(){
    loginService.logout();
}
}]);

app.controller('dispatchCtrl', ['$scope','$routeParams', function($scope,$routeParams){
$scope.txt='You are logged in';
$scope.logout=function(){
    loginService.logout();
}
}]);

flightforms.controller('fieldmgrCtrl', ['$scope','$routeParams', function($scope,$routeParams){
$scope.txt='You are logged in';
$scope.logout=function(){
    loginService.logout();
}
}]);

flightforms.controller('obsbkoffCtrl', ['$scope','$routeParams', function($scope,$routeParams){
$scope.txt='You are logged in';
$scope.logout=function(){
    loginService.logout();
}
}]);

my default.tpl.html page has a ng-view within it which seems to be credible but doesnt display anything when i click on my link. I instead get a 401 page not found.

default.tpl.html

<section class="main-section">
<div>
<p>{{txt}}</p>
    <div ng-view>Loading...</div>
</div>
</section>

And im just noticing this error/warning:

"Error: [$injector:unpr] Unknown provider: flightformsProvider <- flightforms

ryeballar · Accepted Answer · 2014-06-01 00:40:31Z

1

The first controller of your flightform module is trying to inject a service, flightform, that does not exist.

app.controller('homeCtrl', ['$scope','loginService','$http','flightforms',
function($scope,loginService,$http,flightforms){
$scope.txt='Logged in...';
$scope.logout=function(){
    loginService.logout();
}
}]);

I suggest you remove that injected service or create it.

answered Jun 1, 2014 at 0:40

ryeballar

30.1k10 gold badges67 silver badges76 bronze badges

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

Comments

MsNichols · Accepted Answer · 2014-06-02 13:39:20Z

0

Switched my config to ui-route now everything works just fine.

answered Jun 2, 2014 at 13:39

MsNichols

1,1335 gold badges23 silver badges53 bronze badges

Collectives™ on Stack Overflow

Angular Partial Routes not working using ng-view

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related