Angular js

Angular-js is open source java-script framework which use for make a moder web application

The angular-js develop by the google

The angular-js is a single page web application

SPAs mean when we need the update in application and it perform in a one page that called SPAs

It is introduce the model-view-controller

It is extend with html and it given a additional feature like two-way data binding

<script>

<src = “ https://ajax.googleaips.com/ajax/libs/angularjs/1.8.2/angular,min.js”>

</script>

Data binding
The angular-js give function is data binding which give a real time reflection of the input which given by
user

The data binding connection between model and the view

The synchronize the data between model and view connect automatically

There are two way to data binding

1. Interpolation
2. Property binding

1 interpolation

interpolation mean when we give the variable in curly brackets and it is give the
response

class= “{{variable_name}}”

2 property binding

property binding is just like the java when we create a parent class and inherited a child
class

[class] = “variable_name”
Andular-js controller

The angular js controller is a significant role in a angular the angular-js controller,control the flow of data
in web application

Angular-js control is a java script object which is create by the javasciprt object constructor

Control tha data and business logic in angular-js

<element ng-controller=”expression “>

Content

</element >

Example

<div an-controller =”mathcontroller”>

<p>2+3={{addnumber(2,3)}} </p>

<script>

Var app = angular.module (“my app”,[]);

App.controller= (“mathcontroller”,function($scope){

$scope.addnumber = function(a,b){

Return a+b;

};

});

<script>

Define the ng-model, ng-app, ng-bind

NG-app

Ng-app used for the define the application name

NG-BIND

Ng-bind used for the enter the dynamically variable

Ng-model is used in a input variable

MVC ARCHITECTURE

MVC stands for the model, view, controller

MVC is the framework architecture which is the separated the application in to three layer

Controller

Controller is the interconnection between the view and model and the act like and intermediate
controller does not have to handle or mange the data

It is lead the model what to do

Controller is a incoming request it manipulate the model and interact with the view

View

View is a UI logic of the application

View is create the interface for the user

View create the interface using data and it collect from the view not directly trough the controller

Controller

The angular js controller is a significant role in a angular the angular-js controller,control the flow of data
in web application

Angular-js control is a java script object which is create by the javasciprt object constructor

Control tha data and business logic in angular-js

List and discuss various filters used in Angular JS.

Types of Filters in AngularJS

1. Uppercase Filter (uppercase)

Converts a string to uppercase letters.

Example:
{{ "angularjs" | uppercase }} <!-- Output: ANGULARJS -->

2. Lowercase Filter (lowercase)

Converts a string to lowercase letters.

Example:

{{ "ANGULARJS" | lowercase }} <!-- Output: angularjs -->

3. Currency Filter (currency)

Formats a number as a currency value. The default currency symbol is $.

Example:

{{ 2500 | currency }} <!-- Output: $2,500.00 -->

4. Number Filter (number)

Formats a number with a specified number of decimal places.

Example:

{{ 1234.5678 | number:2 }} <!-- Output: 1,234.57 -->

5. Date Filter (date)

Formats a date value in various formats.

Example:

{{ '2024-03-08' | date:'fullDate' }} <!-- Output: Friday, March 8, 2024 -->

6. JSON Filter (json)

Converts an object into a JSON string format.

Example:

{{ {name: 'John', age: 30} | json }}

Output:

{ "name": "John", "age": 30 }

7. LimitTo Filter (limitTo)

Limits the number of items displayed in an array or the number of characters in a string.

Example:

{{ "AngularJS Filters" | limitTo:8 }} <!-- Output: AngularJ -->

8. OrderBy Filter (orderBy)

Sorts an array based on a specific field.

Example:<li ng-repeat="student in students | orderBy:'name'">{{ student.name }}</li>

This will display the student names in alphabetical order.

<html>

<head>

<script src=

"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">

</script>

<script src=

"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js">

</script>

</head>

<body ng-app="myApp">

<a href="#!courses">Courses</a>

<br>

<a href="#!internships">Internships</a>

<div ng-view></div>

<script>

const app = angular.module("myApp", ["ngRoute"]);

app.config(function ($routeProvider) {

$routeProvider

.when("/courses", {

template: `<h1>Courses Offered</h1>

<p>

<ul>

<li>Machine Learning Foundation</li>

<li>Geeks Classes</li>

<li>System Design</li>
 </ul>

</p>`

})

.when("/internships", {

template: `<h1>Hire With Us</h1>

<p>

<ul>

<li>Software Developer</li>

<li>Technical Content Writer</li>

<li>Technical Content Engineer</li>

</ul>

</p>`

});

});

</script>

</body>

</html>

CSS Padding with example

<!DOCTYPE html>

<html>

<head>

<title>Padding Example</title>

<style>

body {

margin: 0;

padding: 20px;
 width: 50%;

h2 {

color: green;

.myDiv {

background-color: lightblue;

border: 2px solid black;

/* Applying padding to each side individually */

padding-top: 80px;

padding-right: 100px;

padding-bottom: 50px;

padding-left: 80px;

.inner {

background-color: pink;

border: 2px solid black;

width: 70px;

height: 50px;

display: flex;

align-items: center;

justify-content: center;

</style>

</head>

<body>

<div class="myDiv">
 <div class="inner">Pad_Box</div>

</div>

</body>

</html>