控制器（controllers）可以控制應用程式資料

控制器是普通的js物件

使用ng-controller指令定義一個控制器

<div ng-app="myApp" ng-controller="myCtrl">
    First name: <input ng-model="firstname">
    Last name: <input ng-model="lastname">
    <br>
    Full name: {{fullname}}
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('<span style="font-family: Arial, Helvetica, sans-serif;">myCtrl</span>', function ($scope) {
        $scope.firstname = "John";
        $scope.lastname = "Doe";
        $scope.fullname = $scope.firstname + $scope.lastname;
    })
</script>
 

ng-app定義一個應用程式myApp

ng-controller定義一個控制器myCtrl

myCtrl本質上是一個js函式

AngularJS利用$scope物件呼叫myCtrl這個函式

$scope是整個應用程式所有變數與函式的＇擁有者＇

控制器在scope物件中建立了三個屬性，firstname, lastname, fullname

ng-model將input繫結到控制器三個屬性變數

控制器方法：

控制器物件不僅可以建立屬性，還可以建立函式，如：

<div ng-app="myApp" ng-controller="ctrl">
    First name: <input ng-model="firstname">
    Last name: <input ng-model="lastname">
    <br>
    Full name: {{fullname()}}
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('ctrl', function ($scope) {
        $scope.firstname = "John";
        $scope.lastname = "Doe";
        $scope.fullname = function() {
            return $scope.firstname + $scope.lastname;
        }
    })
</script>