WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AngularJS Application


It is a great opportunity to make a genuine AngularJS Application.


Make a Shopping List

Lets utilize a portion of the AngularJS highlights to make a shopping list, were you can include or evacuate items:

My Shopping List

  • {{x}}×

{{errortext}}



Application Explained

<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");};
});

<html> Element is a container for AngularJS application: ng-app = " myNoteApp ":


AngularJS application architecture

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

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

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

There can be many controllers in one application.

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 app.

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

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

AngularJS starts automatically in the HTML DOMContentLoaded event. If found ng-app directive, AngularJS loads the modules 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 small part of the page. If it is a small part, it will be faster to compile and execute.