AngularJS controller not accessed

Question

I am learning AngularJS and I have a problem with the controller.

This example below already worked, but it suddenly stoped without any changes that could cause that. I am not sure what is wrong.

The /templates/index.html file does not load.

This is my main index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Todolist</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <!-- ANGULAR JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.3/angular-ui-router.min.js"></script>
    <script src="app/app.js"></script>
    <script src="app/controllers/todolists.js"></script>

</head>
<body ng-app="app">

<div ui-view></div>

</body>
</html>

This is my app.js:

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

    app.config(function ($stateProvider) {

    $stateProvider
        .state('/', {
            url: "/",
            templateUrl: "app/templates/index.html",
            controller: 'todolists',
        });
});

This is my todolists controller:

var app = angular.module('app');
var controllers = {};

console.log("test");

controllers.todolists = function ($scope, $http) {

    console.log("test1");

    $http.get('http://localhost:8888/todolist/rest/entries/index.json').
        then(function(response) {

            console.log(response.data);
            $scope.data = response.data;
        });
};

app.controller(controllers);

console.log("test") writes to console, but console.log("test1") does not, so the controller is not accessed.

Please take a look and let me know if you have and tips about what could be wrong.

Thanks, Grega

Is this controller defination valid ? Where did you see that ? — Burak Akyıldız
– Burak Akyıldız, Commented Jul 12, 2017 at 13:00
A friend who has been working with anguraljs for a while has all his controllers defined like that, so I guess it should be ok to define it like an object. And the way it is also worked before, so I do not thing that is the problem. But if you thing I should change the definition, please write how. Thanks — greentech
– greentech, Commented Jul 12, 2017 at 13:09
is todolists defined when app.config runs?? what if you move the contents of your function into the state provider so controller: function($scope, $http) {..} give that a test — Tik
– Tik, Commented Jul 12, 2017 at 13:22

Tik · Accepted Answer · 2017-07-12 14:19:28Z

You need to register a name for the controller is the problem. Ive registered the name 'todolistCtrl' which is the first argument needed for the controller registration method. the second argument is the function controllers.todolists.

you can then reference todolistCtrl within you State Provider.

controller

var controllers = {};

console.log("test");

controllers.todolists = function ($scope, $http) {

 $http.get('http://localhost:8888/todolist/rest/entries/index.json').
        then(function(response) {

            console.log(response.data);
            $scope.data = response.data;
        });

};

angular.module('app')
.controller('todolistCtrl', controllers.todolists);

app

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

    app.config(function ($stateProvider, $urlRouterProvider) {
    $urlRouterProvider.otherwise('/');

    $stateProvider
        .state('/', {
            url: "/",
            templateUrl: "index.html",
            controller: 'todolistCtrl',
        });
});

Plunker Example

Collectives™ on Stack Overflow

AngularJS controller not accessed

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related