Latest web development tutorials

AngularJS Introduction

AngularJS is a JavaScript framework. It can be added to HTML pages through <script> tag.

AngularJS by directive extends the HTML, and through the expression bind data to HTML.


AngularJS is a JavaScript framework

AngularJS is a JavaScript framework. It is a library written in JavaScript.

AngularJS JavaScript file is a form of release may be added by the script tag to the page:

<Script src = "http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular.min.js"> </ script>

Note We propose script on the bottom of the <body> element.
This will increase the page loading speed, because HTML is not subject to load script to load.

Each angular.js version download: https://github.com/angular/angular.js/releases


AngularJS extends HTML

AngularJS by ng-directives extended HTML.

ng-app directive defines a AngularJS application.

ng-model command the element values (such as the value of the input field) bound to the application.

ng-bind command to bind application data to HTML view.

AngularJS examples

<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "utf-8 ">
<Script src = "http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ Head>
<Body>

<Div ng-app = "" >
<P> Name: <input type = "text" ng-model = "name"> </ p>
<H1> Hello {{name} } </ h1>
</ Div>

</ Body>
</ Html>

try it"

Examples to explain:

When the page is loaded, AngularJS automatically.

ng-app directive tells AngularJS, <div> element is AngularJS application of the "owner."

ng-model directive binds the value of the input field to the application variable name.

ng-bind command to an application variable name is bound to a paragraph innerHTML.

Note If you remove the ng-app directive, HTML will be displayed directly to the expression, not to evaluate the expression of results.

What is AngularJS?

AngularJS makes the development of modern single-page application (SPAs: Single Page Applications) easier.

  • AngularJS bind application data to HTML elements.
  • AngularJS HTML elements can be cloned and repeat.
  • AngularJS can hide and show HTML elements.
  • AngularJS can add code to the HTML element "behind."
  • AngularJS support input validation.

AngularJS directives

As you can see, AngularJS instruction is prefixed ng HTML attributes.

ng-init command to initialize AngularJS application variables.

AngularJS examples

<div ng-app="" ng-init="firstName='John'">

<p>姓名为 <span ng-bind="firstName"></span></p>

</div>

try it"

Note HTML5 allows you to extend the (homemade) property to data- beginning.
AngularJS property ng- beginning to, but you can use data-ng- to make web pages for HTML5 valid.

With valid HTML5:

AngularJS examples

<div data-ng-app="" data-ng-init="firstName='John'">

<p>姓名为 <span data-ng-bind="firstName"></span></p>

</div>

try it"


AngularJS expression

AngularJS expressions written in curly brackets: {{expression}}.

AngularJS expression to bind the data to HTML, which ng-bind command has the same purpose.

AngularJS expression in the writing position "output" data.

AngularJS expressions like JavaScript expressions: they can contain text, operators, and variables.

Examples 5 + 5 {{}} or {{firstName + "" + lastName}}

AngularJS examples

<! DOCTYPE html>
<Html>
<Head>
<Meta charset = "utf-8">
<Script src = "http://cdn.static.w3big.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
</ Head>
<Body>

<Div ng-app = "">
<P> My first expression: {{5 + 5}} </ p>
</ Div>

</ Body>
</ Html>

try it"

AngularJS Applications

AngularJS module (Module) defines AngularJS applications.

AngularJS Controllers (Controller) for controlling AngularJS applications.

ng-app directive defines the application, ng-controller defines the controller.

AngularJS examples

<div ng-app = "myApp " ng-controller = "myCtrl">

Name: <input type = "text" ng-model = "firstName"> <br>
Surname: <input type = "text" ng-model = "lastName"> <br>
<br>
Name: {{firstName + "" + lastName}}

</ Div>

<Script>
var app = angular.module ( 'myApp' , []);
app.controller ( 'myCtrl', function ( $ scope) {
$ Scope.firstName = "John";
$ Scope.lastName = "Doe";
});
</ Script>

try it"

AngularJS application module definition:

AngularJS module

var app = angular.module ( 'myApp', []);

AngularJS controller applications:

AngularJS Controllers

app.controller ( 'myCtrl', function ($ scope) {
$ Scope.firstName = "John";
$ Scope.lastName = "Doe";
});

In the next tutorial you will learn more knowledge and application modules.