AngularJS-Eclipse : My controllers not found

Question

I'm using eclipse with angularJS for make the front-end of my app. Not first time I'm using angular but first time I'm using it with eclipse.

AngularJS plugin have been installed and I made the link between view and controllers. I convert my project to AngularJS project. Angular is working (an input ng-model="a" {{a}} does the job) but the chrome terminal give me an error :

Error: [ng:areq] http://errors.angularjs.org/1.5.0/ng/areq?p0=HomeController&p1=not%20aNaNunction%2C%20got%20undefined

index.html

<!DOCTYPE html >
<html ng-app="app">

    <head>
        <meta charset="UTF-8">
        <title>Mon Titre</title>

        <link rel="stylesheet" type="text/css" href="resources/css/bootstrap.min.css" />
        <link rel="stylesheet" type="text/css" href="resources/css/style.css" />
        <script type="text/javascript" src="https://code.angularjs.org/1.5.0/angular.min.js"></script>
        <script type="text/javascript" src="https://code.angularjs.org/1.5.0/angular-route.js"></script>
        <script type="text/javascript" src="resources/js/angular/controller/MainController.js"></script>
        <script type="text/javascript" src="resources/js/angular/controller/HomeController.js"></script>
        <script type="text/javascript" src="resources/js/angular/controller/CategoryController.js"></script>
        <script type="text/javascript" src="resources/js/angular/app.js"></script>
    </head>
    <body >
        <div ng-view></div>

    </body>
</html>

app.js

var app = angular.module("app", ["ngRoute"]); // Already tried to inject controllers
app.config(function ($routeProvider) {
  $routeProvider
      .when('/', {
        templateUrl: 'pages/accueil.html',
        controller: 'HomeController'
      })
      .when('/categories', {
        templateUrl: 'pages/categorie-list.html', 
        controller: 'CategoryController'
      })
      .otherwise({
        redirectTo: '/'
      });
});

HomeController.js

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

app.controller("HomeController", function($scope){
    $scope.bonjour ='I\'m home controller !';
});

CategoryController.js

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

app.controller("CategoryController", function($scope){
    $scope.bonjour = 'I\'m category controller';
});

Both .html contains just one {{bonjour}}. Thanks for your help and sorry for this low english !

dfsq · Accepted Answer · 2016-03-06 10:59:33Z

2

In HomeController.js and CategoryController.js replace

var app = angular.module("app",[]); // create new app module

with

var app = angular.module("app"); // use existing app module

After that move app.js script before controller scripts:

<script src="https://code.angularjs.org/1.5.0/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.0/angular-route.js"></script>
<script src="resources/js/angular/app.js"></script>
<script src="resources/js/angular/controller/MainController.js"></script>
<script src="resources/js/angular/controller/HomeController.js"></script>
<script src="resources/js/angular/controller/CategoryController.js"></script>

edited Mar 6, 2016 at 10:59

answered Mar 6, 2016 at 10:56

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

1 Comment

Sero Over a year ago

Omg its work... I can't believe it I tried that 50 times before surrender... So thank you for your response.. Really fast I am impressed !

Collectives™ on Stack Overflow

AngularJS-Eclipse : My controllers not found

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related