AngularJS application

May 08, 2021 AngularJS

1. AngularJS application

2. AngularJS application

3. My notes

4. Application explanation

5. AngularJS instance

AngularJS application

It's time to create a real AngularJS application.

You can familiarize yourself with the use of AngularJS through the AngularJS application in this section.

AngularJS application

Now that you've learned enough about AngularJS, you can start creating your first AngularJS application:

My notes

Number of characters remaining:

Application explanation

AngularJS instance

< html ng-app= "myNoteApp" >
< head >
< meta charset = "utf-8" >
< script src= "http://apps.bdimg.com/libs/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 >

Try it out . . .

Application file "myTodoApp .js":

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

Controller file "myTodoCtrl.js":

app.controller("myTodoCtrl", function($scope) {
$scope.message = "";
$scope.left = function() {return 100 - $scope.message.length;};
$scope.clear = function() {$scope.message="";};
$scope.save = function() {$scope.message="";};
});

An HTML page that points to ng-app"myTodoApp" and ng-controller="myTodoCtrl":

An ng-model instruction that binds a message to the controller variable:

Two ng-click events, calling the controller functions clear() and save():

An ng-bind instruction that binds the controller function left() to a slt;span>, and the characters are aligned to the left:

剩下的字符数：<span ng-bind="left()"></span>

Two application libraries are added to the HTML page:

The above is the relevant AngularJS application parsing.

AngularJS application

Table of contents

AngularJS application

AngularJS application

My notes

Application explanation

AngularJS instance

Cookie Consent