<!DOCTYPE html> <html> <head> <script src="angular.js"></script> <script src="script.js"></script> </head> <body ng-app="mainModule"> <div ng-controller="simpleController"> <strong>First name:</strong> {{person.firstName}}<br /> <strong>Last name:</strong> {{person.lastName}}<br /> <strong>Full name:</strong> {{person.getFullName()}}<br /> <br /> <label>Set the first name: <input type="text" ng-model="person.firstName"/></label><br /> <label>Set the last name: <input type="text" ng-model="person.lastName"/></label> </div> </body> </html>
// A simple module with no dependencies angular.module("mainModule", []) .controller("simpleController", function ($scope) { // Initialize the model $scope.person = { firstName: "John", lastName: "Doe", // Define utility functions on the model object getFullName: function () { return this.firstName + " " + this.lastName; } }; });



AngularJS lets you nicely organize all your JavaScript code into modules to avoid declaring objects and variables in the global namespace.

A module can be defined by simply calling the angular.module function, where angular is a global namespace exposed by AngularJS and always available to us. The angular.module function accepts two parameters: the name of the module and an array of dependencies on other modules.

The angular.module returns a module instance and we can define a controller directly on that instance through the controller function.

In the example we define a mainModule module and a simpleController controller. We need to specify in the HTML template what's the main module of our application and we can do that with the ng-app directive. Our controller is then available as well in the HTML template.