Responsive web design with Angularjs
-
Upload
arnab-pradhan -
Category
Education
-
view
87 -
download
2
Transcript of Responsive web design with Angularjs
![Page 1: Responsive web design with Angularjs](https://reader030.fdocuments.us/reader030/viewer/2022020410/58acbfe41a28abd3048b5271/html5/thumbnails/1.jpg)
Responsive web app design using
Slides Assembled by: Slides Assembled by: Slides Assembled by: Slides Assembled by: ArnabArnabArnabArnab PradhanPradhanPradhanPradhanRoll No. 91/MCA/130028Roll No. 91/MCA/130028Roll No. 91/MCA/130028Roll No. 91/MCA/130028Reg. No. 133Reg. No. 133Reg. No. 133Reg. No. 133----1124112411241124----0276027602760276----12121212
![Page 2: Responsive web design with Angularjs](https://reader030.fdocuments.us/reader030/viewer/2022020410/58acbfe41a28abd3048b5271/html5/thumbnails/2.jpg)
� What is AngularJS� Features of AngularJS� Why AngularJS� jQuery vs AngularJS
![Page 3: Responsive web design with Angularjs](https://reader030.fdocuments.us/reader030/viewer/2022020410/58acbfe41a28abd3048b5271/html5/thumbnails/3.jpg)
� A MVC JavaScript framework by Google for creating single page dynamic web application
� Open Source◦ GitHub: https://github.com/angular/angular.js
◦ MIT License◦ MIT License
![Page 4: Responsive web design with Angularjs](https://reader030.fdocuments.us/reader030/viewer/2022020410/58acbfe41a28abd3048b5271/html5/thumbnails/4.jpg)
� Two-way Data Binding – Model as single source of truth
� Directives – Extend HTML
� MVC
� Dependency Injection� Dependency Injection
� Testing
� Deep Linking (Map URL to route Definition)
� Server – Side Communication
![Page 5: Responsive web design with Angularjs](https://reader030.fdocuments.us/reader030/viewer/2022020410/58acbfe41a28abd3048b5271/html5/thumbnails/5.jpg)
� Views are declarative◦ The structure of the interface
� Controllers do not need to directly manipulate the view◦ Changes in the models / data are automatically ◦ Changes in the models / data are automatically reflected in the view
◦ Updates are managed by the frameworks
![Page 6: Responsive web design with Angularjs](https://reader030.fdocuments.us/reader030/viewer/2022020410/58acbfe41a28abd3048b5271/html5/thumbnails/6.jpg)
Directives are markers (such as attributes, tags,and class names) that tell AngularJS to attach agiven behavior to a DOM element (or transformit, replace it, etc.)
Some angular directivesSome angular directives
� The ng-app - Bootstrapping your app anddefining its scope.
� The ng-controller - defines which controller willbe in charge of your view.
� The ng-repeat - Allows for looping throughcollections
![Page 7: Responsive web design with Angularjs](https://reader030.fdocuments.us/reader030/viewer/2022020410/58acbfe41a28abd3048b5271/html5/thumbnails/7.jpg)
Model (Data) View (UI)Notifies
Controller (Logic)
Notifies
Changes
![Page 8: Responsive web design with Angularjs](https://reader030.fdocuments.us/reader030/viewer/2022020410/58acbfe41a28abd3048b5271/html5/thumbnails/8.jpg)
Model
DOM
JS Objects
Controller
View
JS Classes
DOM
![Page 9: Responsive web design with Angularjs](https://reader030.fdocuments.us/reader030/viewer/2022020410/58acbfe41a28abd3048b5271/html5/thumbnails/9.jpg)
� Angular implements MVC by asking you to split your app into MVC components, then just let Angular do the rest.
� Angular manages your components for you and also serves as the pipeline that connects and also serves as the pipeline that connects them.
![Page 10: Responsive web design with Angularjs](https://reader030.fdocuments.us/reader030/viewer/2022020410/58acbfe41a28abd3048b5271/html5/thumbnails/10.jpg)
� Unit testing front end code is usually hard because there are so many sticky dependencies. Angular’s DI allows you to mock out many of these dependencies and isolate individual components.isolate individual components.
![Page 11: Responsive web design with Angularjs](https://reader030.fdocuments.us/reader030/viewer/2022020410/58acbfe41a28abd3048b5271/html5/thumbnails/11.jpg)
� Deep linking supported
� Server side communication is done by $http and $resource services
![Page 12: Responsive web design with Angularjs](https://reader030.fdocuments.us/reader030/viewer/2022020410/58acbfe41a28abd3048b5271/html5/thumbnails/12.jpg)
� Scope management
� Form validation
� Animation
� Routing
Filters� Filters
� API client
........ Many more
![Page 13: Responsive web design with Angularjs](https://reader030.fdocuments.us/reader030/viewer/2022020410/58acbfe41a28abd3048b5271/html5/thumbnails/13.jpg)
![Page 14: Responsive web design with Angularjs](https://reader030.fdocuments.us/reader030/viewer/2022020410/58acbfe41a28abd3048b5271/html5/thumbnails/14.jpg)
![Page 15: Responsive web design with Angularjs](https://reader030.fdocuments.us/reader030/viewer/2022020410/58acbfe41a28abd3048b5271/html5/thumbnails/15.jpg)
Angular 2 (Angular-Meteor)Write Angular on the server(angular-meteor.com)
![Page 16: Responsive web design with Angularjs](https://reader030.fdocuments.us/reader030/viewer/2022020410/58acbfe41a28abd3048b5271/html5/thumbnails/16.jpg)
[1] https://github.com/angular/angular.js[2] http://campus.codeschool.com/courses/shaping-up-with-angular-js/[3] https://docs.angularjs.org/api/[4] http://www.nganimate.org/[5] http://ngmodules.org/modules/ngtimeago[5] http://ngmodules.org/modules/ngtimeago[6] http://angular-js.in/panhandler/
![Page 17: Responsive web design with Angularjs](https://reader030.fdocuments.us/reader030/viewer/2022020410/58acbfe41a28abd3048b5271/html5/thumbnails/17.jpg)
Any Question?