Home>

This tutorial is designed to help you learn angularjs as quickly and efficiently as possible. Through this tutorial you will learn some basic features of angularjs,Examples are directives, expressions, filters, modules and controllers.And everything else you need to know about angularjs, such as events, dom nodes, forms, user input, data validation, http objects, etc.

Angularjs is a javascript framework. It can be added to the html page via the

Example description:

AngAngularJS automatically starts execution when the page is loaded.

The ng-app directive tells angularjs that the

element it is in is the root element of the angularjs application.

The ng-model directive binds the value of the input tag to the variable name.

The ng-bind directive binds the value of the variable name to the innerhtml attribute of the

element.

angularjs directive

As you can see,The angularjs directive is a set of html attributes that start with ng.

The variables of angularjs application can be initialized by the ng-init instruction.

<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- instead of ng- to ensure that the html on the page is valid.

You will learn more about angularjs instructions in later chapters.

angularjs expression

Jsangularjs expressions are written in double curly braces:{{expression statement}}.

Angularjs will accurately "output" the expression as the result of the calculation,E.g:

<! Doctype html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<div ng-app="">
   <p>my first expression:{{5 + 5}}</p>
</div>
</body>
</html>

Angularjs expressions bind data to html in the same way as the ng-bind directive.

<! Doctype html>
<html>
<script src="angular.min.js"></script>
<body>
<div ng-app="">
 <p>name:<input type="text" ng-model="name"></p>
 <p>{{name}}</p>
</div>
</body>
</html>

You will learn more about angularjs expressions in later chapters.

angularjs application

Angularjs module defines angularjs applications.

AngularJS controllers control the behavior of angularjs applications.

The ng-app directive is used to specify the application, and the ng-controller directive 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 defines 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";
});

You will learn more about modules and controllers in later chapters.

  • Previous Top 10 reasons to use a PHP framework
  • Next Event filter with query SELECT * FROM __InstanceModificationEvent WITHIN