Home > Developer > JavaScript
AngularJS basic learning notes: A Brief Introduction to angularjs learning notes
AngularJS is a JavaScript framework. It can be added to the HTML page through the <script> tag.
AngularJS extends HTML attributes by using commands, and then binds data to HTML elements through expressions.
AngularJS is a JavaScript framework
AngularJS is a JavaScript framework, which is a class library written by the JavaScript language.
AngularJS is released in the form of a JavaScript file. We can add it to the web page through the script Tag:
Copy codeThe Code is as follows: <script src = "http://cdn.bootcss.com/angular.js/1.3.14/angular.min.js"> </script>
AngularJS extends HTML
AngularJS extends HTML through a series of ng-ctictives commands.
The ng-app directive defines AngularJS application.
The ng-model command binds the value of the HTML control with the data model.
The ng-bind command binds the model data to the HTML view.
<script src="http://cdn.bootcss.com/angular.js/1.3.14/angular.js"></script><body><div ng-app=""> <p>Name: <input type="text" ng-model="name"></p> <p ng-bind="name"></p></div></body>
Example:
AngularJS automatically starts execution when page loading is complete.
The ng-app Command tells AngularJS that its <div> element is the root element of AngularJS Application.
The ng-model command binds the value of the input tag to the variable name.
The ng-bind command binds the variable name value to the innerHTML attribute of the <p> element.
AngularJS commands
As you can see, AngularJS commands are a set of HTML attributes starting with ng.
You can use the ng-init command to initialize the variable of AngularJS Application.
<div ng-app="" ng-init="firstName='John'"><p>The name is <span ng-bind="firstName"></span></p></div>
Equivalent code:
<div data-ng-app="" data-ng-init="firstName='John'"><p>The name is <span data-ng-bind="firstName"></span></p></div>
Note: You can use the prefix data-ng-to replace ng-. This ensures that the HTML on the page is valid (valid ).
In the subsequent sections, you will learn more AngularJS commands.
AngularJS expression
AngularJS expressions are written in double braces: {expression statement }}.
AngularJS accurately outputs the expression as the calculation result, for example:
<!DOCTYPE html>AngularJS expressions bind data to HTML in the same way as ng-bind commands.
<!DOCTYPE html>In the subsequent sections, you will learn more about AngularJS expressions.
AngularJS Application
The AngularJS module defines AngularJS Applications.
AngularJS controller controls the behavior of AngularJS Applications.
The ng-app command is used to specify the application, while the ng-controller command is used to specify the controller.
<div ng-app="myApp" ng-controller="myCtrl">First Name: <input type="text" ng-model="firstName"><br>Last Name: <input type="text" ng-model="lastName"><br><br>Full 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 applications:
Var app = angular. module ('myapp', []); AngularJS controller controls the behavior of AngularJS Applications: app. controller ('myctrl ', function ($ scope) {$ scope. firstName = "John"; $ scope. lastName = "Doe ";});In the subsequent sections, you will learn more about modules and controllers.
The above is all the content of this article. I hope you will like it.
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
