WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

AngularJS Introduction


AngularJS is a JavaScript framework . It can pass <script> Tags to HTML pages.

AngularJS passes Directive expands HTML and passes Expressions bind data to HTML.


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 web pages via script tags:

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

AngularJS Extends HTML

AngularJS extends HTML with ng-directives .

ng-app directive defines an AngularJS application.

ng-model directive binds element values (such as the value of an input field) to an application.

ng-bind directive binds application data to an HTML view.

AngularJS Example

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p ng-bind="name"></p>
</div>

</body>
</html>
Try it Yourself »

Example explained:

Example explanation:

When the webpage finishes loading, AngularJS starts automatically.

ng-app directive tells AngularJS´╝î<div> The element is the "owner" of the AngularJS application .

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

ng-bind directive binds the application variable name to the innerHTML of a paragraph.


AngularJS Directives

As you can see, AngularJS directives are HTML attributes prefixed with ng .

ng-init directive initializes AngularJS application variables.

AngularJS Example

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

<p>The name is <span ng-bind="firstName"></span></p>

</div>
Try it Yourself »

Alternatively with substantial HTML:

AngularJS Example

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

<p>The name is <span information ng-bind="firstName"></span></p>

</div>
Try it Yourself »

Note : HTML5 allows extended (home-made) attributes to start with data-. AngularJS attributes begin with ng-, but you can use data-ng- to make a web page valid for HTML5.


AngularJS Expressions

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

AngularJS expressions bind data to HTML, which is similar to the ng-bind directive.

AngularJS will "output" data where the expression is written.

AngularJS expressions Much like JavaScript Expressions : They can contain text, operators, and variables.

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

AngularJS Example

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">
  <p>My first articulation: {{ 5 + 5 }}</p>
</div>

</body>
</html>
Try it Yourself »

AngularJS articulations tie AngularJS information to HTML Directive from the ng-bind directive.

AngularJS Example

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="">
  <p>Name: <input type="text" ng-model="name"></p>
  <p>{{name}}</p>
</div>

</body>
</html>
Try it Yourself »

AngularJS Applications

AngularJS Module defines an AngularJS application.

AngularJS Controller is used to control AngularJS applications.

ng-app directive specifies the application, ng-controller The controller is specified.

AngularJS Example

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

First Name: <input type="text" ng-model="firstName"><br>
Keep going Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

<script>
var application = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.firstName= "John";
    $scope.lastName= "Doe";
});
</script>
Try it Yourself »

AngularJS modules characterize applications:

AngularJS Module

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

AngularJS controllers control applications:

AngularJS Controller

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

You will learn more about applications and modules in the following tutorials.