AngularJS Application

It is time to create a real AngularJS single page application (SPA).

An AngularJS Application Example

You have learned more than enough to create your first AngularJS application:

My Note



Number of characters left:


Application Explained

AngularJS Example

<html ng-app="myNoteApp">

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body>

<div ng-controller="myNoteCtrl">

<h2>My Note</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>

Try it Yourself »

The application file "myNoteApp.js":

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

The 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 of the AngularJS application: ng-app="myNoteApp":

<html ng-app="myNoteApp">

A a <div> in the HTML page is the scope of a controller: ng-controller="myNoteCtrl":

<div ng-controller="myNoteCtrl">

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

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

The two ng-click events invoke the controller functions clear() and save():

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

An ng-bind directive binds the controller function left() to a <span> displaying the characters left:

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

Your application libraries are added to the page (after the library):

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

AngularJS Application Skeleton

Above you have the skeleton (scaffolding) of a real life AngularJS, single page application (SPA).

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

A <div> elements defines the scope of an AngularJS controller (ng-controller=).

You can have many controllers in one application.

An application file (my...App.js) defines the application module code.

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

Summary - How Does it Work?

The AngularJS library is loaded in <head>,  because scripts depend on the library code to be correctly compiled.

The ng-app directive is placed at the root element the application.

For single page applications (SPA), the root of the application is often the <html> element.

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

AngularJS starts automatically on the HTML DOMContentLoaded event. If an ng-app directive is found, AngularJS will load any module named in the directive, and compile the DOM with ng-app as the root of the application.

The root of the application can be the whole page, or a smaller portion of the page. The smaller the portion, the faster the application will compile and execute.


Color Picker

colorpicker
REPORT ERROR
HOME
PRINT
FORUM
ABOUT

Top 10 Tutorials

HTML Tutorial
CSS Tutorial
JavaScript Tutorial
XML Tutorial
SQL Tutorial
PHP Tutorial
ASP.NET Tutorial
jQuery Tutorial
Angular Tutorial
Bootstrap Tutorial

Top 10 References

HTML Reference
CSS Reference
JavaScript Reference
Browser Statistics
HTML DOM
XML DOM
PHP Reference
jQuery Reference
HTML Colors
HTML Character Sets

Top 10 Examples

HTML Examples
CSS Examples
JavaScript Examples
HTML DOM Examples
PHP Examples
jQuery Examples
XML Examples
XML DOM Examples
ASP Examples
SVG Examples

Web Certificates

HTML Certificate
HTML5 Certificate
CSS Certificate
JavaScript Certificate
jQuery Certificate
PHP Certificate
XML Certificate

Your Suggestion:

Thank You For Helping Us!

Your message has been sent to W3Schools.

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using this site, you agree to have read and accepted our terms of use, cookie and privacy policy. Copyright 1999-2015 by Refsnes Data. All Rights Reserved.