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
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.
Routing example
<!DOCTYPE html>
<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
CSS Padding property is used to create space
<!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>
