AngularJS `Application`

It's time to create a real AngularJS single-page web application (SPA).

AngularJS Application Example

You have learned enough about AngularJS to start creating your first AngularJS application:

My Notes

Remaining characters: **

Application Explanation

AngularJS Example

<html ng-app="myNoteApp">
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-controller="myNoteCtrl">
<h2>My Notes</h2>
<p><textarea ng-model="message" cols="40" rows="10"></textarea></p>
<p>
<button ng-click="save()">Save</button>
<button ng-click="clear()">Clear</button>
</p>
<p>Number of characters left: <span ng-bind="left()"></span></p>
</div>
<script src="myNoteApp.js"></script>
<script src="myNoteCtrl.js"></script>
</body>
</html>

Application file "myNoteApp.js":

var app = angular.module("myNoteApp", []);

Controller file "myNoteCtrl.js":

app.controller("myNoteCtrl", function($scope) {
    $scope.message = "";
    $scope.left = function() { return 100 - $scope.message.length; };
    $scope.clear = function() { $scope.message = ""; };
    $scope.save = function() { alert("Note Saved"); };
});

The <html> element is the container for the AngularJS application: ng-app="myNoteApp".

<html ng-app="myNoteApp">

The <div> is the scope of the controller: ng-controller="myNoteCtrl".

<div ng-controller="myNoteCtrl">

The ng-model directive binds the <textarea> to the controller variable message:

<textarea ng-model="message" cols="40" rows="10"></textarea>

Two ng-click events call the controller functions clear() and save():

<button ng-click="save()">Save</button>
<button ng-click="clear()">Clear</button>

The ng-bind directive binds the controller function left() to the <span>, displaying the remaining characters:

Number of characters left: <span ng-bind="left()"></span>

The application library files need to be executed after AngularJS is loaded:

<script src="myNoteApp.js"></script>
<script src="myNoteCtrl.js"></script>

AngularJS Application Architecture

The above example is a complete AngularJS single-page web application (SPA).

The <html> element contains the AngularJS application (ng-app=).

The <div> element defines the scope of the AngularJS controller (ng-controller=).

An application can have many controllers.

The application file (my...App.js) defines the application model code.

One or more controller files (my...Ctrl.js) define the controller code.

Summary - How Does It Work?

The ng-app directive is located under the root element of the application.

For a single-page web application (SPA), the root of the application is usually the <html> element.

One or more ng-controller directives define the application's controllers. Each controller has its own scope: the defined HTML element.

AngularJS starts automatically on the HTML DOMContentLoaded event. If it finds the ng-app directive, AngularJS loads the module in the directive and compiles ng-app as the root of the application.

The root of the application can be the entire page or a part of the page, with partial compilation and execution being faster.

❮ Angularjs Html Dom Angularjs Select ❯