First steps with AngluarJS ng-controller

Question

I started looking into Angularjs today and have an issue that I just can't solve.

I added a first controller and it just won't work. Adding the controller breaks my entire app.

<html ng-app>
<head>
</head>
<body>
    <div ng-controller="test"></div>

    <input type="text" ng-model="name" /> {{ name }}

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>

    <script>

    function test($scope) {

        $scope.people='';

    }

    </script>

</body>
</html>

If I take out:

<div ng-controller="test"></div>

Everything works. I have add that line nothings works anymore. I know that my controller does not do anything and that I don't use the scope. It's because I broke down a bigger example.

Still, the controller exists and adding it to my view should not cause problems.

Probably it's just a small error, but I just can't find it!

I am following this guide: https://youtu.be/i9MHigUZKEM?t=30m6s.

Thanks for any help!

just FYI, that is a WONDERFUL video that's frequently discussed here, but unless you follow the video to the letter, including the versions of every script he includes, this won't be the first breaking change you encounter. — Claies, Jun 04 '15 at 18:38
Thanks for the info. Maybe not even so bad because it makes me go more into details when something just does not seem to work ;) — almo, Jun 04 '15 at 18:43

score 1 · Answer 1 · answered Jun 04 '15 at 18:21

1

You need to create a module for it to work! AngularJS runs on modules.

angular.module('myApp', []);

<html ng-app="myApp">...</html>

answered Jun 04 '15 at 18:21

tmanion

401
2
11

score 1 · Accepted Answer · answered Jun 04 '15 at 18:29

You are likely following a guide which is slightly out of date. Global controller declarations (function test($scope) {) were never really intended to be used in Angular, but they were popular in quick start guides, and were frequently used in production applications. In Angular 1.3, a breaking change was made to eliminate this practice.

Starting with Angular 1.3, it is necessary to fully declare your controller with an angular module.

<html ng-app="myApp">

in JS:

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

app.controller("test", ["$scope", function($scope){
....
}]);

That was the problem. For the matter of completeness I added the link to the guide in my question. — almo, Jun 04 '15 at 18:32

score 0 · Answer 3 · answered Jun 04 '15 at 18:51

Angular is bootstrapping itself with your ng-app declaration, but you haven't created your "test" controller (which you're trying to do with function test(); but that's not the right syntax).

The first thing you need to do is create a module:

var app = angular.module('MyApp', [])

Set ng-app='MyApp' in your HTML. Now you have a module, registered with the DOM, that can contain your controller.

To create your controller, underneath the module declaration write this:

app.controller('test', ['$scope', function($scope){
    $scope.people = '';
}]);

This uses inline declaration to name your controller, define its dependencies ($scope) and inject those dependencies into your controller's master function.

Ideally, you'd split these all out into the different files (a common starting point is app.js for module declaration and configuration, controller.js for your controller, etc.)

First steps with AngluarJS ng-controller

3 Answers3