CODEWITHSUNDEEP
angularjs
greentech
greentech

Reputation: 111

AngularJS controller not accessed

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

Upvotes: 0

Views: 106

Answers (1)

Tik
Tik

Reputation: 882

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

Upvotes: 1

Related Questions