Of Stack

Simple Application Example of AngularJS

  • 2021-07-06 10:06:43
  • OfStack

AngularJS application

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

Application Example of AngularJS

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

My notes



Save and clear

Words remaining: 100

Application program explanation

AngularJS instance 


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myNoteApp" ng-controller="myNoteCtrl">

<h2> My notes </h2>


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

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

<p> Remaining word count : <span ng-bind="left()"></span></p>

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

</body>
</html>

Run results:

My notes

Save and clear

Words remaining: 100

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

< html ng-app="myNoteApp" >

< div > Is the scope of the controller: ng-controller= "myNoteCtrl" on the HTML page:

< div ng-controller="myNoteCtrl" >

The ng-model instruction 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 instruction binds the controller function left () to < span > To display the remaining characters:

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

The application library file needs to be loaded in AngularJs before it can be executed: 


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

Application Architecture of AngularJS

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

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

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

There are many controllers available 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 application.

For single page Web applications (single page web application, SPA), the root of the application is typically < html > Element.

One or more ng-controller instructions define the controller for the application. Each controller has its own scope:: defined HTML element.

AngularJS starts automatically in the HTML DOMContentLoaded event. If the ng-app instruction is found, AngularJS loads the module in the instruction and compiles ng-app as the root of the application.

The root of the application can be the whole page, or a small part of the page, which will compile and execute faster.

The above is the AngularJS simple application details, hoping to help AngularJS programming friends.

Related articles: