AngularJS basic learning notes: A Brief Introduction to angularjs learning notes

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.