KEMBAR78
A different thought AngularJS | PPTX
A Different Thought
AngularJS
Agenda
Agenda
★ Why we need JS Framework?
Agenda
★ Why we need JS Framework?
★ Why AngularJS?
Agenda
★ Why we need JS Framework?
★ Why AngularJS?
★ Hello World Program
About Me
Amit Thakkar
Tech Blogger @ CodeChutney.in
JavaScript Lover
Working on MEAN Stack
Twitter: @amit_thakkar01
LinkedIn: linkedin.com/in/amitthakkar01
Facebook: facebook.com/amit.thakkar01
Why we need JS Framework?
Why we need JS Framework?
★ validating form?
Why we need JS Framework?
★ validating form?
★ dom manipulation?
Why we need JS Framework?
★ validating form?
★ dom manipulation?
★ templating?
Why we need JS Framework?
★ validating form?
★ dom manipulation?
★ templating?
★ repeating/conditional view
Why we need JS Framework?
★ validating form?
★ dom manipulation?
★ templating?
★ repeating/conditional view
★ play with ajax?
Why we need JS Framework?
★ validating form?
★ dom manipulation?
★ templating?
★ repeating/conditional view
★ play with ajax?
Why we need JS Framework?
Why we need JS Framework?
Why we need JS Framework?
1. Server is processing JSP with Data for
each request.
Why we need JS Framework?
1. Server is processing JSP with Data for
each request.
2. Generate the HTML.
Why we need JS Framework?
1. Server is processing JSP with Data for
each request.
2. Generate the HTML.
3. Render/Serve HTML.
Why we need JS Framework?
1. Server is processing JSP with Data for
each request.
2. Generate the HTML.
3. Render/Serve HTML.
4. Size of render HTML is approx. 100
multiple of Data.
Why we need JS Framework?
1. Server is processing JSP with Data for
each request.
2. Generate the HTML.
3. Render/Serve HTML.
4. Size of render HTML is approx. 100
multiple of Data.
5. Its client not dependent.
Why we need JS Framework?
We have removed the
View from MVC
Why we need JS Framework?
We have removed the
View from MVC
Why AngularJS?
Why AngularJS?
1. Developed by Google.
Why AngularJS?
1. Developed by Google.
2. Actively development happening.
Why AngularJS?
1. Developed by Google.
2. Actively development happening.
3. Implement many Design Patterns e.g.
Why AngularJS?
1. Developed by Google.
2. Actively development happening.
3. Implement many Design Patterns e.g.
a. MVW
Why AngularJS?
1. Developed by Google.
2. Actively development happening.
3. Implement many Design Patterns e.g.
a. MVW
b. Singleton
Why AngularJS?
1. Developed by Google.
2. Actively development happening.
3. Implement many Design Patterns e.g.
a. MVW
b. Singleton
c. Dependency Injection
Why AngularJS?
1. Developed by Google.
2. Actively development happening.
3. Implement many Design Patterns e.g.
a. MVW
b. Singleton
c. Dependency Injection
4. 2-way data-binding.
Hello World Program
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
Name: <input type="text" ng-model="name"> <br/>
Hello {{name}}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
type="application/javascript"></script>
</body>
</html>
Hello World Program
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
Name: <input type="text" ng-model="name"> <br/>
Hello {{name}}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
type="application/javascript"></script>
</body>
</html>
Hello World Program
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
Name: <input type="text" ng-model="name"> <br/>
Hello {{name}}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
type="application/javascript"></script>
</body>
</html>
Hello World Program
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
Name: <input type="text" ng-model="name"> <br/>
Hello {{name}}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
type="application/javascript"></script>
</body>
</html>
Hello World Program
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
Name: <input type="text" ng-model="name"> <br/>
Hello {{name}}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"
type="application/javascript"></script>
</body>
</html>
Questions??
A different thought AngularJS

A different thought AngularJS

  • 1.
  • 2.
  • 3.
    Agenda ★ Why weneed JS Framework?
  • 4.
    Agenda ★ Why weneed JS Framework? ★ Why AngularJS?
  • 5.
    Agenda ★ Why weneed JS Framework? ★ Why AngularJS? ★ Hello World Program
  • 6.
    About Me Amit Thakkar TechBlogger @ CodeChutney.in JavaScript Lover Working on MEAN Stack Twitter: @amit_thakkar01 LinkedIn: linkedin.com/in/amitthakkar01 Facebook: facebook.com/amit.thakkar01
  • 7.
    Why we needJS Framework?
  • 8.
    Why we needJS Framework? ★ validating form?
  • 9.
    Why we needJS Framework? ★ validating form? ★ dom manipulation?
  • 10.
    Why we needJS Framework? ★ validating form? ★ dom manipulation? ★ templating?
  • 11.
    Why we needJS Framework? ★ validating form? ★ dom manipulation? ★ templating? ★ repeating/conditional view
  • 12.
    Why we needJS Framework? ★ validating form? ★ dom manipulation? ★ templating? ★ repeating/conditional view ★ play with ajax?
  • 13.
    Why we needJS Framework? ★ validating form? ★ dom manipulation? ★ templating? ★ repeating/conditional view ★ play with ajax?
  • 14.
    Why we needJS Framework?
  • 15.
    Why we needJS Framework?
  • 16.
    Why we needJS Framework? 1. Server is processing JSP with Data for each request.
  • 17.
    Why we needJS Framework? 1. Server is processing JSP with Data for each request. 2. Generate the HTML.
  • 18.
    Why we needJS Framework? 1. Server is processing JSP with Data for each request. 2. Generate the HTML. 3. Render/Serve HTML.
  • 19.
    Why we needJS Framework? 1. Server is processing JSP with Data for each request. 2. Generate the HTML. 3. Render/Serve HTML. 4. Size of render HTML is approx. 100 multiple of Data.
  • 20.
    Why we needJS Framework? 1. Server is processing JSP with Data for each request. 2. Generate the HTML. 3. Render/Serve HTML. 4. Size of render HTML is approx. 100 multiple of Data. 5. Its client not dependent.
  • 21.
    Why we needJS Framework? We have removed the View from MVC
  • 22.
    Why we needJS Framework? We have removed the View from MVC
  • 23.
  • 24.
  • 25.
    Why AngularJS? 1. Developedby Google. 2. Actively development happening.
  • 26.
    Why AngularJS? 1. Developedby Google. 2. Actively development happening. 3. Implement many Design Patterns e.g.
  • 27.
    Why AngularJS? 1. Developedby Google. 2. Actively development happening. 3. Implement many Design Patterns e.g. a. MVW
  • 28.
    Why AngularJS? 1. Developedby Google. 2. Actively development happening. 3. Implement many Design Patterns e.g. a. MVW b. Singleton
  • 29.
    Why AngularJS? 1. Developedby Google. 2. Actively development happening. 3. Implement many Design Patterns e.g. a. MVW b. Singleton c. Dependency Injection
  • 30.
    Why AngularJS? 1. Developedby Google. 2. Actively development happening. 3. Implement many Design Patterns e.g. a. MVW b. Singleton c. Dependency Injection 4. 2-way data-binding.
  • 31.
    Hello World Program <!DOCTYPEhtml> <html ng-app> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> Name: <input type="text" ng-model="name"> <br/> Hello {{name}} <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" type="application/javascript"></script> </body> </html>
  • 33.
    Hello World Program <!DOCTYPEhtml> <html ng-app> <head lang="en"> <meta charset="UTF-8"> <title>Hello World</title> </head> <body> Name: <input type="text" ng-model="name"> <br/> Hello {{name}} <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" type="application/javascript"></script> </body> </html>
  • 34.
    Hello World Program <!DOCTYPEhtml> <html ng-app> <head lang="en"> <meta charset="UTF-8"> <title>Hello World</title> </head> <body> Name: <input type="text" ng-model="name"> <br/> Hello {{name}} <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" type="application/javascript"></script> </body> </html>
  • 35.
    Hello World Program <!DOCTYPEhtml> <html ng-app> <head lang="en"> <meta charset="UTF-8"> <title>Hello World</title> </head> <body> Name: <input type="text" ng-model="name"> <br/> Hello {{name}} <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" type="application/javascript"></script> </body> </html>
  • 36.
    Hello World Program <!DOCTYPEhtml> <html ng-app> <head lang="en"> <meta charset="UTF-8"> <title>Hello World</title> </head> <body> Name: <input type="text" ng-model="name"> <br/> Hello {{name}} <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js" type="application/javascript"></script> </body> </html>
  • 37.