Search Posts

Using angularjs 1.5.8 and ui router and got controller not defined error

I am building spring boot website using freemarker and angularjs as front end, using the example from http://websystique.com/spring-boot/spring-boot-angularjs-spring-data-jpa-crud-app-example/

and I have three controllers, BookController, WarehouseController and StocklistController, Here my add.js code:

var app = angular.module('BookInventoryApp',['ui.router','ngStorage']);

app.constant('urls', {
BASE: 'http://localhost:8080/SpringBootApp',
INVENTORY_SERVICE_API : 'http://localhost:8080/SpringBootApp/api/book/',
WAREHOUSE_SERVICE_API : 'http://localhost:8080/SpringBootApp/api/warehouse/',
STOCKLIST_SERVICE_API : 'http://localhost:8080/SpringBootApp/api/stock/'
});

app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {

    $stateProvider
        .state('home',{
            url: '/',
            templateUrl: 'home'
        })
        .state('home.Warehouse', {
            url: '/warehouse',
            templateUrl: 'partials/warehouselist',
            controller:'WarehouseController',
            controllerAs:'ctrl',
            resolve: {
                warehouses: function ($q, WarehouseService) {
                    console.log('Load all warehouses');
                    var deferred = $q.defer();
                    WarehouseService.loadAllWarehouses().then(deferred.resolve, deferred.resolve);
                    return deferred.promise;
                }
            }
        })
        .state('home.StockList', {
            url: '/stocklist',
            templateUrl: 'partials/stocklist',
            controller: 'StocklistController',
            controllerAs:'ctrl',
            resolve: {
                stocks: function ($q, StockListService) {
                    console.log('Load all stocks');
                    var deferred = $q.defer();
                    StockListService.loadAllStocks().then(deferred.resolve, deferred.resolve);
                    return deferred.promise;
                }
            }
        })
        .state('home.Inventory', {
            url: '/inventory',
            templateUrl: 'partials/inventorylist',
            controller:'BookController',
            controllerAs:'ctrl',
            resolve: {
                books: function ($q, InventoryService) {
                    console.log('Load all inventories');
                    var deferred = $q.defer();
                    InventoryService.loadAllInventories().then(deferred.resolve, deferred.resolve);
                    return deferred.promise;
                }
            }
        });

    $urlRouterProvider.otherwise('/');
}]);

What confused me most is that the other two controller works fine, but the Stocklist controller just not working, anyone knows what is the problem?

Here is my index page, (I also load all the js files I need)

<!DOCTYPE html>

<html lang="en" ng-app="BookInventoryApp">
<head>
    <title>${title}</title>
    <link href="css/bootstrap.css" rel="stylesheet"/>
    <link href="css/app.css" rel="stylesheet"/>

</head>
<body>

    <div ui-view></div>
    <script src="js/lib/angular.min.js" ></script>
    <script src="js/lib/angular-ui-router.min.js" ></script>
    <script src="js/lib/localforage.min.js" ></script>
    <script src="js/lib/ngStorage.min.js"></script>
    <script src="js/app/app.js"></script>
    <script src="js/app/BookController.js"></script>
    <script src="js/app/InventoryService.js"></script>
    <script src="js/app/StockListService.js"></script>
    <script src="js/app/StocklistController.js"></script>
    <script src="js/app/WarehouseController.js"></script>
    <script src="js/app/WarehouseService.js"></script>


</body>

and this is my StocklistController.js code:

'use strict';

angular.module('BookInventoryApp').controller('StocklistController',
['StockListService', '$scope',  function( StockListService, $scope) {

    var self = this;

    self.warehouse = {};
    self.warehouses=[];

    self.book = {};
    self.books = [];

    self.stock = {};
    self.stocks = [];

    self.submit = submit;
    self.getAllStocks = getAllStocks;
    self.getAllInventories= getAllInventories;
    self.getAllWarehouses=getAllWarehouses;
    self.createStock = createStock;
    self.updateStock = updateStock;
    self.removeStock = removeStock;
    self.editStock = editStock;
    self.reset = reset;

    self.successMessage = '';
    self.errorMessage = '';
    self.done = false;

    self.onlyIntegers = /^d+$/;
    self.onlyNumbers = /^d+([,.]d+)?$/;

    function submit()
    ............
}


])();

Thanks so much

Source: AngularJS

Leave a Reply

Your email address will not be published. Required fields are marked *