2017-10-18 1 views
0

Mon fichier d'index:Pourquoi mon contrôleur n'est pas enregistré dans le code ci-dessous?

<!DOCTYPE html> 
<html ng-app="myApp" ng-controller="homingController"> 
<head> 
<title></title> 
<script src="./js/jquery-1.9.1.js"></script> 
<script src="./js/jquery-ui.js"></script> 
<script src="./js/angular.js"></script> 
<script src="./js/angular-ui-router.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script> 
<script src="./Controller/homingController.js"></script> 
<link rel = "stylesheet" href = "./css/angular-material.min.css"> 
<link rel="stylesheet" href="./css/bootstrap-theme.min.css"> 
<link rel = "stylesheet" href = "./css/materialize.min.css"> 
<link href="./css/icon.css" rel="stylesheet"> 
<link rel ="stylesheet" href="./css/Main.css"> 
<title>Home Application</title> 
</head> 

<body> 
<div class="navbar"> 
<a href="#/home">Home</a> 
<a href="#/monitor">about</a> 
</div> 
<div ng-view></div> 

<script> 
var mainApp = angular.module('myApp', ['ngRoute']); 

mainApp.config(function($routeProvider) { 

    $routeProvider.when('/home', { 
     template: "home", 
     controller: 'homingController' 
    }) 
     .when('/monitor', { 
      template: "<p>{{firstName}}{{lastName}}</p>", 
      controller: 'monitoringController' 
     }) 
     . 
     otherwise({ 
      redirectTo: '/' 
     }); 
}); 

    mainApp.controller('monitoringController', ['$scope', function($scope) { 
    $scope.firstName = "John"; 
    $scope.lastName = "Doe"; 
}]) 

Mes HomingController.js

var mainApp = angular.module('myApp', ['ngRoute']); 
mainApp.controller('homingController', ['$scope', function($scope) { 
$scope.firstName = "John"; 
$scope.lastName = "Doe"; 
}]) 

Mon code Home.html:

<div ng-controller="homingController"> 
{{ lastName }} Hello 
</div> 

Maintenant, je suis face à problème:

1) En homingController, si j'ajoute la première ligne qui est la suivante:

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

il me donne l'erreur:

angularjs: 14328 Erreur: [$ controller: ctrlreg] Le contrôleur avec le nom 'homingController' n'est pas enregistré.

1) Dans homingController, si je n'ajouter ajouter la première ligne qui est la suivante:

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

il me donne l'erreur:

angularjs: 14328 Erreur: [$ controller: ctrlreg] Le Le contrôleur avec le nom 'homingController' n'est pas enregistré.

merci !!

+0

Etes-vous sûr que 'homingController.js' est correctement inclus? Assurez-vous que c'est chargé. – Red

+0

pouvez-vous faire un plunker pour ce code? – VicJordan

+0

Oui son ajouté et je peux le voir dans la source ainsi – CodeWithCoffee

Répondre

1

Vous déclarez le module deux fois,

// Retirer cette ligne dans votre fichier controller.js

var app = angular.module("myApp", []); 

///

app.controller("homingController", function($scope) { 
$scope.firstName = "John"; 
$scope.lastName = "Doe"; 
}); 

DEMO

+0

c'est donner une erreur sur la console, Uncaught ReferenceError: l'application n'est pas définie – CodeWithCoffee

+0

@CodeWithCoffee vérifier la démo – Sajeetharan

+0

merci !! est-il possible d'avoir dans le codepen? Je n'ai pas accès de plunkr, .. Ou vous pouvez coller ici? – CodeWithCoffee

0

Je pense que le problème réside dans la façon dont vous ajoutez votre contrôleur à votre module.

Essayez de changer la ligne suivante dans homingController

var app = angular.module("myApp", []); 

à

var app = angular.module("myApp"); 
0

Sajeetharan est juste. vous avez déclaré le module deux fois cependant supprimer dans votre controller.js fait une erreur de Uncaught ReferenceError: app is not defined parce que vous ne l'avez pas déclaré le module avant de créer un contrôleur

ma suggestion est de faire votre page principale en

app.config(['$routeProvider', function($routeProvider) { 

    // Define routes 
    $routeProvider.when('/home', { 
     templateUrl: 'home.html', 
     controller: 'homingController' 
    }).when('/monitor', { 
     templateUrl: 'home.html', 
     controller: 'monitoringController' 
    }).otherwise({ 
     redirectTo: 'home' 
    }); 

} 
]); 

puisque l'application est définie en premier dans le contrôleur.js