First AngularJS App
Most developer tutorials start with a "Hello, World" example. The following steps build a "Hello, World" app for AngularJS.
Step 1: Basic Web Page
AngularJS applications are a mix of HTML and JavaScript. Start with a basic, empty web page in HTML:
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
</body>
</html>Step 2: Include AngularJS
Include the AngularJS JavaScript file using the
<script>tag:<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>
<body>
</body>
</html>
Note: Remember to update the URL above to include the most recent version.
Step 3: Add the ng-app Directive
Add the
ng-app attribute to the <body> element to indicate what part of the HTML page contains the AngularJS application:<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>
<body ng-app="myApp">
</body>
</html>Step 3: Add a View
In this example, the view is the
<div> element and everything inside it. The <div> element contains the ng-controller attribute specifying a controller (JavaScript function) named HelloController (to be added). Also, within the <h1> element there is an "Angular Expression" (which is specified using the "{{" and "}}"). The expression tells Angular to insert the model value named message into the HTML at that location.<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="HelloController">
<h1>{{message}}</h1>
</div>
</body>
</html>Step 4: Add a Module and Controller
Finally, the "myApp" module and the HomeControllerfunction must be specified. The HomeController function is simply a normal JavaScript function. In Angular, it is registered using
angular.module(...).controller(...) code. The angular object is a global object created by the Angular framework. Here is the updated code: <!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="HelloController">
<h1>{{message}}</h1>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("HelloController", function($scope) {
$scope.message = "Hello, World";
});
</script>
</body>
</html>
The code
var app = angular.module("myApp", []);creates an Angular module named "myApp" and assigns it to a variable "app". Notice that the name "myApp" matches the name specified in the ng-app attribute. The empty brackets ("[]") tell Angular to create the module and register it.
Using the "app" variable, the controller is then registered to the "myApp" module using the code
app.controller("HelloController", function($scope) { });.
Finally, a member variable named "message" on the object $scope is set to "Hello, World". Placing this variable on $scope ensures that Angular will be able to use it in the Angular expression.
Step 5: Run in Browser
When run in the browser, the code produces the following output:
Hello, World
Here is an explanation of what is happening when the application is run in the browser:
- The HTML document is loaded and evaluated by the browser. The AngularJS JavaScript file is loaded and executed, creating the angular global object. The JavaScript that creates the "myApp" module and registers the "HomeController" controller function is executed.
- Angular scans the HTML looking for Angular apps and views. If AngularJS finds a view, it connects that view to the specified controller function.
- Angular executes the controller functions and updates the views with data from the model populated by the controller. At this point, the HTML page is ready to be displayed.
- Angular now listens for browser events (e.g. mouse movement, button clicks, keyboard entry, etc.). If any of the events would require a view to change, Angular will update the view accordingly.
