Angular js
Download as PPTX, PDF•0 likes•309 views
This document provides an overview of Angular JS including its architecture, components like controllers, services, directives and views. It discusses best practices for controllers, creating services, using directives, and avoiding the Flash of Unstyled Content issue. It also mentions the UI-Router module and recommends a file structure for Angular apps. In the end, it lists some pros and cons of Angular JS, noting its two-way binding, component architecture, and rapid development but also potential performance issues with deep object graphs.
![Controller
● Setup the scope
● View Interaction
● Coordinate View and Model
● No DOM manipulationangular.module('myApp')
.controller('AddCarCtrl', ['$scope', function($scope) {
//do some stuff
}]);](https://image.slidesharecdn.com/angularjs-160408130545/85/Angular-js-5-320.jpg)
![FOUC
Flash of unstyled Content
1. ng-cloak
[ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
1. ng-bind
Use ng-bind instead of {{ }}
1. Add spinner](https://image.slidesharecdn.com/angularjs-160408130545/85/Angular-js-13-320.jpg)
Angular js
- 1. Angular JS
- 2. Angular architecture ● Angular component and Use case of it ● Some hands on ● Best practises ● FOCU
- 3. What is Angular JS? MVC
- 5. Controller ● Setup the scope ● View Interaction ● Coordinate View and Model ● No DOM manipulationangular.module('myApp') .controller('AddCarCtrl', ['$scope', function($scope) { //do some stuff }]);
- 6. Controller best practice Less controller code No application logic No DOM manipulation
- 7. Service Handle non-view logic Communicate with server Hold data & status
- 8. View Display the Application Declare Binding & Detectives
- 9. Create a Service 1. Value 2. Constant 3. Factory 4. Service 5. Providerangular.module('myApp').service('AddCarSvc',function($http,carList) { //do some stuff });
- 10. Directives DOM manipulation DOM events Functionality( ng-show, ng-hide) Widgets
- 12. Project work though and hand on https://github.com/dinushadev/angular-training.git Set up dev environment with browser-sync
- 13. FOUC Flash of unstyled Content 1. ng-cloak [ng:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { display: none !important; } 1. ng-bind Use ng-bind instead of {{ }} 1. Add spinner
- 14. UI-Router
- 15. File Structure
- 16. Pros ● Two way binding ● Component oriented architecture with drectiview ● Rapid development
- 17. Cons ● Two way binding - formance issue. ● Rerendering ● With deep object graphs can cause slow app
- 18. Q