Tuesday 6 February 2018

AngularJS Modules

An AngularJS module defines an application. The module is a container for the different parts of an application. The module is a container for the application controllers. Controllers always belong to a module.

Creating a Module
A module is created by using the AngularJS function angular.module

<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []); 
</script>

The "myApp" parameter refers to an HTML element in which the application will run.
Now you can add controllers, directives, filters, and more, to your AngularJS application.

Adding a Controller

Add a controller to your application, and refer to the controller with the ng-controller directive:

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

{{ firstName + " " + lastName }}

</div>

<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {

    $scope.firstName = "John";

    $scope.lastName = "Doe";

});

</script>

You will learn more about controllers later in this tutorial.

at No comments:

Sunday 4 February 2018

AngularJS Expressions - how to use Expressions in AngularJs

1 - AngularJS expressions can be written inside double braces: {{ expression }}.
2 - AngularJS expressions can also be written inside a directive: ng-bind = "expression" (both can use in script).
3 - AngularJS will resolve the expression, and return the result exactly where the expression is written.

AngularJS expressions are much like JavaScript expressions: They can contain literals, operators, and variables.

Example:
 {{ 15 + 20 }} or {{ firstVar + " " + lastVar }}

Note: <script>
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js" </script> write before body of pages.

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

<div ng-app="">
  <p>My first expression: {{ 15 + 20 }}</p> or
</div>

</body>
</html>

Output: My first expression: 35

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

<div >
  <p>My first expression: {{ 15 + 20 }}</p> or
</div>

</body>
</html>
Output: My first expression: {{ 15 + 20 }}

Also you can use in place of ng-init = "" expression

Example:
1 -
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: {{ quantity * cost }}</p>
</div>
or
<div ng-app="" ng-init="quantity=1;cost=5">
<p>Total in dollar: <span ng-bind="quantity * cost"></span></p>
</div>

2 -
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is {{ firstName + " " + lastName }}</p>
</div>
or
<div ng-app="" ng-init="firstName='John';lastName='Doe'">
<p>The name is <span ng-bind="firstName + ' ' + lastName"></span></p>
</div>


Note: Using ng-init is not very common. You will learn a better way to initialize data in the chapter about controllers.

AngularJS Objects:
AngularJS objects are like JavaScript objects:

Example
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>

Same example using ng-bind:

Example
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is <span ng-bind="person.lastName"></span></p>
</div>

Output: The name is Doe

AngularJS Arrays:
AngularJS arrays are using like JavaScript arrays:

Example
<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is {{ points[2] }}</p>
</div>

Same example using ng-bind:

<div ng-app="" ng-init="points=[1,15,19,2,40]">
<p>The third result is <span ng-bind="points[2]"></span></p>
</div>

Output: The third result is 19

AngularJS Expressions vs JavaScript Expressions:

  • Like JavaScript expressions, AngularJS expressions can contain literals, operators, and variables.
  • Unlike JavaScript expressions, AngularJS expressions can be written inside HTML.
  • AngularJS expressions do not support conditionals, loops, and exceptions, while JavaScript expressions do.
  • AngularJS expressions support filters, while JavaScript expressions do not.
at No comments:

Thursday 1 February 2018

AngularJS Introduction, What is AngularJS?

This tutorial is specially designed to help you learn AngularJS as quickly and efficiently as possible.

First, you will learn the basics of AngularJS: directives, expressions, filters, modules, and controllers.

Then you will learn everything else you need to know about AngularJS:

Events, DOM, Forms, Input, Validation, Http, and more.


AngularJS is a Javascrip Framecwork. It can be added to an HTML Page with a <Script> tag.
AnjualrJS extends HTML attributes with directives, and binds data to HTML with expressions.

AngularJS is a libray written in JavaScript, distributed as a JavaScript file, and can be added to a web pages with a script tag.

First use this below tag for initialized AngularJS
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
AngularJS extends HTML with ng-directives below

  • ng-app - defines an AngularJS application.
  • ng-model - binds the value of HTML controls (input, select, textarea) to application data.
  • ng-bind - binds application data to the HTML view.
Example

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/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>

 ng-app should be initialize because without this defines directives, angularjs with not working. 
ng-model - it use data or easy language hold data,
ng-bind - print ng-model data as HTML.

 You can use these directives (Alternatively with valid HTML) as below
ng-app to data-ng-app
ng-model to data-ng-model
ng-bind to data-ng-bind

AngularJS Expressions

AngularJS expressions are written inside double braces: {{ expression }}.
AngularJS will "output" data exactly where the expression is written:

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

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

</body>
</html>
output: 45
----------------------------------------------------------------------
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

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

</body>
</html>
output: Your Name

AngularJS Applications

AngularJS modules define AngularJS applications.
AngularJS controllers control AngularJS applications.
The ng-app directive defines the application, the ng-controller directive defines the controller.

AngularJS Example

<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>
at No comments:
Subscribe to: Posts (Atom)

AngularJS Modules

An AngularJS module defines an application. The module is a container for the different parts of an application. The module is a container...