Home > Developer > Web Develop
Angularjs is a JavaScript framework . It can be added to the HTML page via the <script> tag.
Angularjs extends HTML properties through directives, and then binds the data to HTML elements through an expression.
Angularjs is a JavaScript frameworkAngularjs is a JavaScript framework, which is a class library written by the JavaScript language.
Angularjs is published as a JavaScript file, and we can add it to a Web page using the script tag:
ANGULARJS extends the HTML<src= "Http://cdn.bootcss.com/angular.js/1.3.14/angular.min.js"></ script>
Angularjs extends HTML through a series of ng-directives directives.
The ng-app directive defines the ANGULARJS application.
The ng-model directive binds the value of the HTML control to the data model.
The ng-bind directive binds model data to an HTML view.
<Scriptsrc= "Http://cdn.bootcss.com/angular.js/1.3.14/angular.js"></Script><Body><DivNg-app=""> <P>Name:<inputtype= "text"Ng-model= "Name"></P> <PNg-bind= "Name"></P></Div></Body>
Run
Example Description:
Angularjs automatically begins execution when the page load is complete.
The ng-app directive tells Angularjs that the <div> element in which it resides is the root element of ANGULARJS application.
The ng-model directive binds the value of the input tag to the variable name.
The ng-bind directive binds the value of the variable name to the InnerHTML property of the <p> element.
ANGULARJS directiveAs you can see, the ANGULARJS directive is a set of HTML attributes that begin with ng .
The ng-init directive allows you to initialize variables that are ANGULARJS application.
<ng-app= "" ng-init= "firstname= ' John '">< p><ng-bind= "FirstName"></ span></p></div>
Run
Equivalent code:
<data-ng-app= "" data-ng-init= "firstname= ' John '"> <p><data-ng-bind= "FirstName" ></span></p> </ div>
Run
| You can use the prefix data-ng- instead of ng-, which ensures that the HTML on the page is valid (valid). |
In the following chapters you will learn more about the ANGULARJS instructions.
ANGULARJS-expressionThe ANGULARJS expression is written in double curly braces:{{expression statement}}.
Angularjs will accurately "output" the expression as the result of the calculation, for example:
<!DOCTYPE HTML><HTML><Scriptsrc= "Http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></Script><Body><DivNg-app=""> <P>My First expression: {{5 + 5}}</P></Div></Body></HTML>
Run
Angularjs expressions bind data to HTML in the same way as ng-bind directives.
<!DOCTYPE HTML><HTML><Scriptsrc= "Http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></Script><Body><DivNg-app=""> <P>Name:<inputtype= "text"Ng-model= "Name"></P> <P>{{Name}}</P></Div></Body></HTML>
Run
You will learn more about ANGULARJS expressions in the following chapters.
AngularJS ApplicationThe AngularJS module defines the AngularJS applications.
The AngularJS controller controls the behavior of the AngularJS applications.
The ng-app instruction is used to specify the application, and the ng-controller instruction is used to specify the controller.
<DivNg-app= "MYAPP"Ng-controller= "Myctrl">First Name:<inputtype= "text"Ng-model= "FirstName"><BR>Last Name:<inputtype= "text"Ng-model= "LastName"><BR><BR>Full Name: {{firstName + "" + LastName}}</Div><Script>varapp=Angular.module ('myApp', []); App.controller ('Myctrl', function($scope) {$scope. FirstName= "John"; $scope. LastName= "Doe";});</Script>
Run
ANGULARJS Module definition Applications:
var app = Angular.module (' myApp ', []);The ANGULARJS controller controls the behavior of the ANGULARJS applications:
function ($scope) { $scope. FirstName= "John"; $scope. LastName= "Doe";});You will learn more about modules and controllers in the following chapters.
Previous chapter-Angularjs Quick Start Guide 01: Introduction Next Chapter-ANGULARJS Quick Start Guide 03: ExpressionsAngularjs Quick Start Guide 02: Introduction
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
