AngularJs mysteries

Question

I really thought I'm getting the hang of AngularJs slowly - but seems I'm still totally green.....

I tried to put together a tiny demo to show the ng-repeat directive, and now nothing works - I'm just getting a blank screen, and I have no clue as to why....

Can anyone enlighten me??

This is my HTML file:

<!doctype html>
<head>
    <!-- include link to Angular -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>

    <!-- include app.js -->
    <script src="app.js"></script>
</head>
<body ng-app="myapp">
    <div ng-controller="mycontroller as vm">
        <label>My company:</label>
        <hr>
        <div id="divTeam" ng-repeat="m in vm.team">
            <p>
                {{m.firstname}} {{m.name}} ({{m.tag}})
            </p>
        </div>
    </div>
</body>

and this is my app.js file (same directory):

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

    app.controller('mycontroller', function ($scope) {
            $scope.team = [
                { name: "Brown", firstname: "Leo", tag: "lebr" },
                { name: "Smith", firstname: "Adrian", tag: "adsm" },
                { name: "Loflin", firstname: "Wes", tag: "welo" },
                { name: "Hackett", firstname: "John", tag: "joha" }
            ]
        }
    );

I don't get it....

I'm creating the Angular module called myapp
I reference that module in the <body ng-app="myapp"> tag
I'm creating an Angular controller called mycontroller
I reference that in the <div ng-controller="mycontroller as vm"> tag
I'm creating an array of objects on the $scope
I was expecting to be able to iterate over this array of objects using the ng-repeat="m in vm.team" directive

but all I get right now is an empty screen with just the title "My company:" - and nothing else.....

I checked the URL to the Angular JS file - it's correct as far as I can tell.
I checked the Javascript console in IE or Chrome - no errors or info messages to be seen anywhere.....
If I add just a plain little expression like {{1+2}} to my HTML, it does get evaluted to "3", so I'm pretty sure Angular is up and running....

So what am I missing? (I'm a long-time .NET developer, always struggling with all things Javascript.....)

Walfrat · Accepted Answer · 2016-05-04 09:02:59Z

2

You use controllerAs syntax, when writing ng-controller="mycontroller as vm", you have to bind your data to this instead of $scope

   app.controller('mycontroller', function ($scope) {
        this.team = [
            { name: "Brown", firstname: "Leo", tag: "lebr" },
            { name: "Smith", firstname: "Adrian", tag: "adsm" },
            { name: "Loflin", firstname: "Wes", tag: "welo" },
            { name: "Hackett", firstname: "John", tag: "joha" }
        ]
    }
);

Or remove the as syntax.

answered May 4, 2016 at 9:02

Walfrat

5,3941 gold badge18 silver badges36 bronze badges

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

9 Comments

marc_s Over a year ago

So what if I don't use controller as... but just ng-controller="mycontroller" .... what do I have to use to setup the array properly?

Walfrat Over a year ago

this works, just change the ng-repeat="m in vm.team" to ng-repeat="m in team". ControllerAs syntax is recommanded specially if you use a lot of ng-controller. Personnally i don't so i don't use it.

marc_s Over a year ago

This is madness - so the way I'm going to use the controller later on in the code dictates how I must do the setup for any data members contained in the $scope ?!?!?!?!?? <shaking head in disbelief>

Oreste Viron Over a year ago

It is recommended to use directives instead, it is easier when your code start to grow.

Walfrat Over a year ago

@OresteViron Directive are for reusability of a components which handle a functionnaility, a view. For a true application, in the OP post, it's better to have ngRoute or uiRouter that will handle navigation and display proper view using controller defined.

|

Oreste Viron · Accepted Answer · 2016-05-04 09:06:54Z

1

The "team" is in the $scope, so you can call "team" directly in your view :

<body ng-app="myapp">
    <div ng-controller="mycontroller as vm">
        <label>My company:</label>
        <hr>
        <div id="divTeam" ng-repeat="m in team">
            <p>
                {{m.firstname}} {{m.name}} ({{m.tag}})
            </p>
        </div>
    </div>
</body>

answered May 4, 2016 at 9:06

Oreste Viron

3,7954 gold badges27 silver badges39 bronze badges

Comments

Marin Takanov · Accepted Answer · 2016-05-04 09:21:40Z

One approach is the bind this to vm as follows (like John Papa Angular 1 Style Guide):

JS Controller:

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

app.controller('MyController', function () {
    var vm = this;

    vm.teams = [
        { name: "Brown", firstname: "Leo", tag: "lebr" },
        { name: "Smith", firstname: "Adrian", tag: "adsm" },
        { name: "Loflin", firstname: "Wes", tag: "welo" },
        { name: "Hackett", firstname: "John", tag: "joha" }
    ];
});

Here we don't need the $scope dependency since we won't use it.

And in the HTML, you use the following syntax:

<div ng-controller="MyController as mc">
    <div ng-repeat="team in mc.teams">
        <p>
            {{team.firstname}} {{team.name}} ({{team.tag}})
        </p>
    </div>
</div>

The second approach is to use $scope as follows:

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

app.controller('MyController', function ($scope) {
    $scope.teams = [
        { name: "Brown", firstname: "Leo", tag: "lebr" },
        { name: "Smith", firstname: "Adrian", tag: "adsm" },
        { name: "Loflin", firstname: "Wes", tag: "welo" },
        { name: "Hackett", firstname: "John", tag: "joha" }
    ];
});

Here we use $scope.

And in the HTML is like this:

<div ng-repeat="team in teams">
    <p>
        {{team.firstname}} {{team.name}} ({{team.tag}})
    </p>
</div>

Don't forget to bind the specific HTML page with the appropriate controller.

app.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/myPage', {
            templateUrl: 'views/myPage.html',
            controller: 'MyController'
        }).
        otherwise({
            redirectTo: '/404'
        });
}]);

You can use $routeProvider or $stateProvider, whatever you decide.

Thanks especially for the link to John Papa's Style Guide - seems I still have a lot to learn in terms of Javascript + Angular!

marc_s · Accepted Answer · 2021-04-11 18:12:51Z

0

You just need to remove vm from vm.team

Here is a working plunker

edited Apr 11, 2021 at 18:12

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered May 4, 2016 at 9:12

Mohamed NAOUALI

2,1321 gold badge25 silver badges29 bronze badges

Collectives™ on Stack Overflow

AngularJs mysteries

4 Answers 4

9 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

9 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related