CODEWITHSUNDEEP
javascriptangularjsangularjs-controller
BobDoleForPresident
BobDoleForPresident

Reputation: 552

I am trying to understand AngularJS's controllerAs syntax

However after writing up a few examples to play around with the controllers would not load. I was getting an error:

firstController is not a function

After some googling I found that Angular 1.3.x no longer supports global controllers. All the examples I have seen of the new way of creating controllers seem to create them in my app.js file. I am confused, does this now mean that I must create all my controllers here rather than having a dedicated file for each controller. I have tried this to create the controller and still no luck:

UPDATE: I changed my controller to match jedanput's answer but changed $scope to this.

app.controller('firstController', [function(){
 this.name = "Tim";

}]);

Also I find it very annoying that all that the majority of the example out there still reference the way it was done in Angular 1.2. Any help would be greatly appreciated as I am having trouble understanding this issue.

EDIT: Here is my index.html file. Hopefully this will help you guys understand what is going wrong.

<!DOCTYPE html>
<html lang="en"  xmlns:ng="http://angularjs.org" id="ng-app"       ng-app="myApp">

<head >
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>ControllerAs</title>
    <meta name="description" content="">

</head>
<body>



<div class="content" ng-view=""></div>

<!-- jQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<!-- AngularJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.6/angular-route.js"></script>

<script type="text/javascript" src="../js/app.js"></script>

<!--Directives-->
<script type="text/javascript" src="../js/directives/it-works.js">    </script>

<!--Controllers-->
    <script type="text/javascript" src="../js/controllers/firstController.js"></script>
    <script type="text/javascript" src="../js/controllers/secondController.js"></script>





</body>
</html>

So far I have avoided Controllers as everything I have been doing could be done with directives and services but it is time I understood more about controllers. I think it may be something fundamental I am missing. Again any help is greatly appreciated.

UPDATE: still getting the same error. This is my app.js file. Maybe it can shed some light on the problem.

var app = angular.module('myApp',[
'ngRoute'


]);

app.config(function($routeProvider) {
    $routeProvider.when('/', {
        templateUrl: "../partials/test-skeleton.html"



})
});

Upvotes: 0

Views: 172

Answers (2)

Jochen van Wylick
Jochen van Wylick

Reputation: 5401

You're right, Angular allows for multiple different notations and that can be annoying and confusing. I would recommend you to stick with the guidelines from John Papas Angular Style Guide. He uses this:

(function() {
     'use strict';

      // Get reference to your application
      angular.module('myapp')
          // Add the controller
          .controller('mycontroller',controller);

      // This makes the injection of the controller arguments
      // explicit
      controller.$inject = ['$scope', '$http'];

      // Here the actual controller is defined - where
      // the arguments are injected on the same location as
      // in the previous array
      function controller($scope, $http) {
            // Controller logic
      });
})();

You want to keep stuff out of the global space. Really - you do. That's why he wraps everything in an Immediately-Invoked Function Expression (IIFE). Also - you want to explicitly define what you're injecting ( the $inject array ). If not, you will not be able to minify later.

So I'm sorry - I just added another way of defining your AngularJS artefacts. From what I understand, this is one the more well known style guides out there. I've heard that he's working closely with the Angular guys to make sure his style guide will also make it easier to transition to the new Angular version.

And no - you do not need to put everything in 1 file - just make sure you have a file with angular.module('myapp',[]) loaded before any of the other files. This will declare the myapp module and will append the controller to it.

As I'm writing this - I realize that there's also another way: you create a new module in this file, append the controller and then load that module into your application. But yeah ... it's confusing.

Upvotes: 1

Samir Alajmovic
Samir Alajmovic

Reputation: 3283

It should be

app.controller('firstController', ['$scope', function($scope){
     $scope.name = "Tim";
}]);

Also, controllerAs syntax is synthetic sugar for the scope simply, you avoid using this:

<div ng-controller="oneCtrl">
    {{name}}
</div>

And instead use this:

<div ng-controller="oneCtrl as one">
    {{one.name}}
</div>

Which helps tremendously when you have nested controllers.

Upvotes: 1

Related Questions