Home > Developer > JavaScript
AngularJS tutorial and instance code, angularjs instance code
Angularjs Introduction
AngularJS is a JavaScript framework. It can be added to the HTML page through the <script> tag.
AngularJS extends HTML through commands and binds data to HTML through expressions.
AngularJS is a JavaScript framework
AngularJS is a JavaScript framework. It is a library written in JavaScript.
AngularJS is published as a JavaScript file and can be added to the webpage through the script Tag:
<Script src = "http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"> </script>
Note: We suggest placing the script at the bottom of the <body> element.
This increases the webpage loading speed because HTML loading is not subject to script loading.
Each angular. js Version Download: https://github.com/angular/angular.js/releases
AngularJS extends HTML
AngularJS expands HTML through ng-directives.
The ng-app directive defines an AngularJS application.
The ng-model command binds the element value (for example, the value of the input field) to the application.
The ng-bind command binds application data to the HTML view.
AngularJS instance
<! DOCTYPE html>Example:
AngularJS automatically starts when the webpage is loaded.
The ng-app Command tells AngularJS that the <div> element is the "owner" of the AngularJS application ".
The ng-model command binds the value of the input field to the application variable name.
The ng-bind command binds the application variable name to the innerHTML of a paragraph.
Note if you remove the ng-app command, HTML displays the expression directly without calculating the result of the expression.
What is AngularJS?
AngularJS makes it easier to develop modern Single Page Applications (SPAs: Single Page Applications.
AngularJS commands
As you can see, AngularJS commands use HTML attributes prefixed by ng.
The ng-init command initializes AngularJS Application variables.
AngularJS instance
<Div ng-app = "" ng-init = "firstName = 'john'"> <p> name: <span ng-bind = "firstName"> </span> </p> </div>
Note HTML5 allows extended (self-made) attributes, starting with data.
AngularJS attributes start with ng-, but you can use data-ng-to make webpages effective for HTML5.
With valid HTML5:
AngularJS instance
<Div data-ng-app = "" data-ng-init = "firstName = 'john'"> <p> name: <span data-ng-bind = "firstName"> </span> </p> </div>
AngularJS expression
AngularJS expressions are written in double braces: {expression }}.
AngularJS expressions bind data to HTML, which is similar to the ng-bind command.
AngularJS will "output" data at the position where the expression is written.
AngularJS expressions are similar to JavaScript expressions: they can contain text, operators, and variables.
Instance {5 + 5 }}or {firstName + "" + lastName }}
AngularJS instance
<! DOCTYPE html>AngularJS Application
The AngularJS Module defines AngularJS applications.
AngularJS Controller is used to control AngularJS applications.
The ng-app command defines the application and the ng-controller defines the controller.
AngularJS instance
<Div ng-app = "myApp" ng-controller = "myCtrl"> name: <input type = "text" ng-model = "firstName"> <br> Name: <input type = "text" ng-model = "lastName"> <br> Name: {firstName + "" + lastName }}</div> <script> var app = angular. module ('myapp', []); app. controller ('myctrl ', function ($ scope) {$ scope. firstName = "John"; $ scope. lastName = "Doe" ;}); </script>AngularJS module definition application:
AngularJS Module
var app = angular.module('myApp', []);AngularJS controller control application:
AngularJS Controller
app.controller('myCtrl', function($scope) { $scope.firstName= "John"; $scope.lastName= "Doe";});Summary
The above is an introduction to AngularJS and instance Code provided by the editor. I hope it will be helpful to you. If you have any questions, please leave a message and the editor will reply to you in time. Thank you very much for your support for the help House website!
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
