Angular JS Tutorial For Beginners

In this tutorial we will understand the basics of Angular 5 js. What are the main features of Angular.  What is require to learn Angular. First we will discuss about the definition of angular js.

Angular JS Introduction:

  • It is a client side javascript framework.
  • Runs on client side
  • The framework is maintained by google.


Features of Angular JS

  • Fast to code.
  • Code is very organized.
  • Dynamic Content
  • Code is compatible on different platform

Install Angular JS

  • npm install –g @angular/cli
  • In order to check the installed version write command
  • ng –v

How to create new App in Angular js

  • ng new testapp –style=scss –routing
  • ng serve

Use ng serve to start the server.

Components in Angula JS

ng generate component home

Program Structure:

import { Component } from ‘@angular/core’;

@Component({

selector: ‘app-root’,

templateUrl: ‘./app.component.html’,

styleUrls: [‘./app.component.scss’]

})

export class AppComponent {

title = ‘app’;

}

 

 

Learn angularjs

How to fetch data from database using Angularjs

In this tutorial , you will learn how to fetch data from mysql database and display it on the html page.

1) In order to show data from mysql, you need to create a php or dotnet page and write the logic to fetch data from the
database.

Once the php page is created , write the ng-controller code to fetch the data from the server. Below is the example to
fetch data from database

a) First we will create the div , where the angular js will execute.

<div ng-app=”testapp” ng-controller=”datacntrl”>
ng-app defines the div to execute angular js app. testapp is the name of the app.

ng-controller defines the name of the controller which will fetch the data from the database using php file.

 

Below is the definition of the controller

<script>
var app = angular.module(‘testapp’, []);
app.controller(‘datacntrl’, function($scope, $http) {
$http.get(“http://www.ojhasfotsolutions.in/test_mysql.php”)
.success(function (response) {$scope.names = response.records;});
});
</script>
$http in angular is used to send request and get response from the server. Once we get the response , that response is
collected in the variable names.
now the names variable is used to display the data in the html.

 

<table>
<tr ng-repeat=”x in names”>
<td>{{ x.firstName }}</td>
<td>{{ x.lastname }}</td>
</tr>
</table>
using ng-repeat directive in angular js , we fetch the record one by one from the variable name.

Request from different server needs the below settings on the php page

header(“Access-Control-Allow-Origin: *”);
Angular js includes:

Using angular js , you can now import html content, within an existing html document. Please check the below code, how to import html file

Using ng-include directive in angular js you can include other html document.
<div class=”container”>

<div class=“container”>
<div ng-include=“‘file1.htm'”></div>
<div ng-include=“‘file2.htm'”></div>
</div

</div>

 

Learn angular JS

Learn angular Tutorial

Angular Tutorial

Angular js Controller

In this part we will discuss about , how to define model , view and controller in Angular.

As you know that every angular js app starts with the directive ng-app. In the ng-app, we define the controller for the

app that will control the app.

1)Angular Js CONTROLLER:

Controllers are basically used to control the data in the angular js app. We use ng-controller to implement the controller

in the ng-app;

We use the script tags in order to write the controller functionality.

The above step declares the name of the controller using the ng-controller directive.

The main controller code is written below

The mylatestapp is defined in the div, and it declares the name of the controller that will control the data inside the

app. The “newcontroller” is the actual controller , that we define in script tag and will control its functionality.

Just like in javascript , we can write the code within the script tag and also reference to an external js file, we can do

the same in angular js also.

In the controller we can define our functions and those functions will be used to control the data.

Angular Js

Angular JS Tutorial

When we start learning Angular JS. The first question that comes in our mind is,

1)What is Angular JS and how to use it?

Since it contains the word JS, so it is a framework that is written in Javascript. It is basically a library that is written in javascript. So first thing in order to start coding in angular js is to include the angular js in your file.

You can add angular js in your file using the script tag, that we normally use for all the javascript programming.

In javascript also in order to include any javascript file or implementing any function in javascript we use script tag.

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

2) Once you have included the angular js file in your document, now you can use all the directives of angular js.

The directive in angular js starts with ng prefix.

The example of directives used are as follows

ng-click Defines the behavior when an element is clicked.
ng-app it initializes an angular js application

Ex:

<div ng-app=”” ng-init=”firstName=’Ben obrien'”>

<p>Name: <input type=”text” ng-model=”firstName”></p>
<p>You wrote: {{ firstName }}</p>

</div>

3) Angular expression:

All the angular expressions are written within double bracess {{ }}
Example :
<p> The sum of 20 and 10 is : {{ 20 + 10 }}

4) you can use ng-model to bind the data from your application to your html controls.

if you want to show dynamic data on your app, you will be usinng ng-model directive to show the data in your app.
<div ng-app=”” ng-init=”myapp=’testing my app'”>

<p>Name: <input type=”text” ng-model=”myapp”></p>
<p>output : {{ myapp }}</p>

</div>
in the above example we are using the ng-model to bind the textbox to the myapp variable. so the output will be

Testing my app.

For the div in which you want to show angular js output, you have to use ng-app.

5) Array definition :
you can define an array in the ng-app directive

<div ng-app=”” ng-init=”marks=[
{mark:’40’},
{mark:’90’},
{mark:’100′}]”>

</div>
The above example shows an array marks , in order to bind this array with an html control and show its value we will use

ng-repeat directive , since it is an array, so we have to traverse the error using ng-repeat directive.
<ul>
<li ng-repeat=”x in marks”>
{{ x.mark}}
</li>
</ul>

The full html code is as follows

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

<div ng-app=”” ng-init=”marks=[
{mark:’40’},
{mark:’90’},
{mark:’100′}]”>

<ul>
<li ng-repeat=”x in marks”>
{{ x.mark}}
</li>
</ul>

</div>

</body>
</html>

Angular JS Part Two