a different thought angularjs
TRANSCRIPT
A Different ThoughtAngularJS
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 ThakkarTech Blogger @ CodeChutney.inJavaScript LoverWorking on MEAN Stack
Twitter: @amit_thakkar01LinkedIn: linkedin.com/in/amitthakkar01Facebook: 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?
We are MVC Guys
&
We have jQuery
Why we need JS Framework?
Why we need JS Framework?
What is wrong with MVC
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 MVCWe call t
his now Web-Services
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. MVWb. Singleton
Why AngularJS?
1. Developed by Google.2. Actively development happening.3. Implement many Design Patterns e.g.
a. MVWb. Singletonc. Dependency Injection
Why AngularJS?
1. Developed by Google.2. Actively development happening.3. Implement many Design Patterns e.g.
a. MVWb. Singletonc. 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??
