AngularJS tutorial and instance code, angularjs instance code

Source: Internet
Author: User

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 binds application data to HTML elements.
  • AngularJS can clone and repeat HTML elements.
  • AngularJS can hide and display HTML elements.
  • AngularJS can add code behind the HTML element.
  • AngularJS supports input verification.

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!

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.