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:
 | 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
<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.
| 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
<p>姓名为 <span ng-bind="firstName"></span></p>
</div>
try it"
| 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
<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
<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
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
AngularJS controller applications:
AngularJS Controllers
$ Scope.firstName = "John";
$ Scope.lastName = "Doe";
});
In the next tutorial you will learn more knowledge and application modules.