An AngularJS Application Example
You have learned more than enough to create your first AngularJS application:
My Note
Number of characters left: 100
Application Explained
AngularJS Example
<html ng-app="myNoteApp">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<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>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<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>
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");};
});
$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>
<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>
<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.
