Angular tutorials

Updated : May 07, 2020 in Angular

What is AngularJs – Brief discussion

in this lesson we will learn about what is angularjs Topics we will discuss the following points :

  • What is AngularJS?
  • Expressions
  • Controllers
  • Directives
  • Events
  • Creating an AngularJs application

What is AngularJS?

AngularJS is a JavaScript framework library, it will extending HTMLviews as more expressive, readable. AngularJS JavaScript framework library decorates your HTML views with special markup tags, AngularJS framework allows you to write your application logic at the view level

To start using AngularJS, we need to add the framework to our HTML:

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

As you can see, we used the script tag to add the JavaScript file using the official CDN.

Note: AngularJS is an open-source javascript library. It is the front end of a, consisting of MongoDB databases, Express.js web server application frameworks, AngularJS itself, and JavaScript server execution environments with Node.


Expressions:

An expression is usually wrapped around a brace, like {{expression}}. Expressions can contain literals, operators, and properties.

Let’s create an AngularJS application with an give following code expression:

<!DOCTYPE HTML> 
<html ng-app> 
<head> 
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
</head> 
<body> 
  <p> {{ 4+4 }} </p> 
</body> 
</html>

The code above produces output 8 because AngularJS evaluates the expression and returns the result.

in angularjs we have a number of directives, this directive is allowed to attach a special behavior to HTML elements.

Notice the ng-app attribute in the tag. This is called a directive and defines this as an AngularJS application. If we delete that directive, the expression will not be evaluated.

AngularJS expressions do not support loops, exceptions, conditionals, but JavaScript expressions will do. for more details about expressions see the link


Controllers:

An AngularJS controller is a JavaScript function that maintains the data and the behavior of the application.

The ng-controller directive is used to define a controller in Application. Let’s see an example of a controller:

<div ng-app="myApp" ng-controller="myController"> 
  {{message}} 
</div>
 
<script> 
var ngApp = angular.module('myApp', []);  
ngApp.controller("myController", function ($scope) { 
  $scope.message = "Hello World!";         
}); 
</script>

We named our application using the directive ng-app. So, we used that name to create a module. The module is a container for Application controllers. Controllers always belong to a module.
 
After creating a module, we add a controller function using the controller () method where the first parameter is the name of the controller and the second parameter is a function for the controller.
 
$ scope is an embedded object that contains data and application methods. We initialize the message property using $ scope and use it in our view.
 
AngularJS creates and injects a different $ scope object for each controller in an application. Data and methods attached to $ scope within one controller cannot be accessed on another controller.

Controllers are used to:
 Configure the initial state of the $ scope object.
 Add behavior to the $ scope object.

An AngularJS application consists of:
View: the DOM that the user sees.
Model: data are shown to the user in the DOM (View).
Controllers: the business logic behind the views.

model is stored in $ scope so that controllers, directives, and expressions can access it.


Directives:

Directives are similar to HTML attributes and allow a specified behavior to be attached to DOM elements.

The ng-app directive starts an AngularJS application.
The ng-model directive links an HTML element to a property.
The ng-init Directive initiates Application data.

<div ng-app ng-init="celsius=0;diff=32"> 
  <p>Celsius: <input type="text" ng-model="celsius"></p> 
  <p>Fahrenheit: {{ celsius*1.8+diff }}</p> 
</div>

We declare two properties using the ng-init Directive. We also use the ng-model to link the text box with the celsius property. this will calculate the corresponding Fahrenheit value in the paragraph.

Another useful directive is ng-repeat.

<div ng-app ng-init="students=['jhg','hyt','uyt']"> 
  <ol> 
    <li ng-repeat="name in students"> 
    {{name}} 
    </li> 
  </ol> 
</div>


Events:

See some supported Events are:
ng-blur, ng-change, ng-click, ng-dblclick, ng-focus, ng-keydown, ng-keyup, ng-keypress, ng-mousedown, ng-mouseenter, ng-mouseleave, ng-mousemove, ng- mouseover, ng-mouseup

Let’s see the example application that will handle the click button event and count the number of clicks:

<div ng-app="myApp" ng-controller="clickCounter"> 
  <button ng-click="count=count+1">Click me!</button> 
  <p>{{ count }}</p> 
</div> 
<script> 
  var app = angular.module('myApp', []); 
  app.controller('clickCounter', function($scope) { 
    $scope.count = 0; 
  }); 
</script>

Our controller starts the count property. We then use the ng-click directive to handle the button click event and increase our counting property.


Creating an Ajgularjs application

We are going to build a simple application with AngularJS. you will follow this link for how to setup angularJs application

<div ng-controller="todoList"> 
<span>Items: {{todos.length}}</span> 
<ul> 
  <li ng-repeat="todo in todos"> 
    <label class="checkbox"> 
    <input type="checkbox" ng-model="todo.done"> 
    <span class="done-{{todo.done}}">{{todo.text}}</span> 
    </label> 
  </li> 
</ul> 
<form ng-submit="addTodo()"> 
  <input type="text" ng-model="todoText" size="30" 
    placeholder="add new todo here"> 
  <input type="submit" value="add"> 
</form> 
</div>

We created a list for all of our items in the whole collection using the ng-repeat directive. Each to-do item will have done text properties and is displayed as a checkbox and span containing the text. We also created a form with a text box and a submit button to add new items.

<script> 
var app = angular.module('todoApp', []); 
         
app.controller('todoList', function($scope) { 
  $scope.todos = [ {text:'Learn AngularJS', done:true}, 
    {text:'build an AngularJS app', done:false}]; 
 
  $scope.addTodo = function() { 
    if($scope.todoText !== '') { 
      $scope.todos.push({text:$scope.todoText, done:false}); 
      $scope.todoText = ''; 
    } 
  }; 
}); 
</script>

We initialize our list of all with some predefined values ​​and create the addTodo function that will be called when the Add button is loaded.

Resources:

Like
Like Love Haha Wow Sad Angry
123

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Suraj
May 13, 2020 9:00 am

Nice article I lean from basic here thanks for information

1
0
Would love your thoughts, please comment.x
()
x