X
HOME HTML CSS JAVASCRIPT SQL PHP JQUERY ANGULAR BOOTSTRAP XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

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">
<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="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<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>

The AngularJS library is added to the page:

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

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 recommended placement for AngularJS script tags is at the bottom of the <body> element. This improves page load time, because the HTML loading is not blocked by scripts loading.

Application code (module and controllers) must be loaded after the library, because they depend on the library code.

The ng-app directive should be 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.



Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB HOSTING

UK Reseller Hosting

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE

facebook