AngularJS — Controllers

Basic Controller

app.controller('MyController', function($scope) {
  $scope.name = 'John';
  $scope.greet = function() {
    return 'Hello, ' + $scope.name;
  };
});

Controller in HTML

<div ng-controller="MyController">
  <h1>{{name}}</h1>
  <p>{{greet()}}</p>
</div>

Controller Methods

app.controller('TodoController', function($scope) {
  $scope.todos = [];
  $scope.newTodo = '';
  
  $scope.addTodo = function() {
    if ($scope.newTodo) {
      $scope.todos.push({ text: $scope.newTodo, completed: false });
      $scope.newTodo = '';
    }
  };
  
  $scope.removeTodo = function(index) {
    $scope.todos.splice(index, 1);
  };
});

Controller As Syntax

app.controller('UserController', function() {
  this.name = 'John';
  this.greet = function() {
    return 'Hello, ' + this.name;
  };
});

<div ng-controller="UserController as user">
  <h1>{{user.name}}</h1>
  <p>{{user.greet()}}</p>
</div>

Best Practices

Practice	Description
Don't manipulate DOM	Use directives
Keep controllers thin	Use services
Use controller as	Avoid $scope
Single responsibility	One controller per view

Mini Practice

1. Create a controller
2. Add methods and properties
3. Use controller as syntax
4. Follow best practices

Up Next

Continue with Scope — AngularJS scope.