Angular js
Download as PPTX, PDF1 like128 views
Angular JS is a framework for building MVC-based applications. It uses components like controllers, services, factories, directives, filters and views. Controllers handle view interaction and coordinate the view and model. Services handle non-view logic and communicate with servers. Directives allow for DOM manipulation and functionality. The document recommends best practices for controllers, services and directives, and describes how to create services and directives. It also covers directives in more detail and discusses preventing FOUC using ng-cloak and ng-bind. The document concludes with recommendations for project structure.
1 of 13
Downloaded 10 times
![Controller
Setup the scope
View Interaction
CoordinateView and Model
No DOM manipulationangular.module('myApp')
.controller('AddCarCtrl', ['$scope', function($scope) {
//do some stuff
}]);](https://image.slidesharecdn.com/angularjs-160606174259/85/Angular-js-4-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-160606174259/85/Angular-js-12-320.jpg)
Angular js
- 1. ANGULAR JS
- 2. What is Angular JS? MVC
- 3. Angular component Controller Service Factory Directives Filter View
- 4. Controller Setup the scope View Interaction CoordinateView and Model No DOM manipulationangular.module('myApp') .controller('AddCarCtrl', ['$scope', function($scope) { //do some stuff }]);
- 5. Controller best practice Less controller code No application logic No DOM manipulation
- 6. Service Handle non-view logic Communicate with server Hold data & status
- 7. View Display the Application Declare Binding & Detectives
- 8. Create a Service 1.Value 2.Constant 3.Factory 4.Service 5.Providerangular.module('myApp').service('AddCarSvc',function($http,carList) { //do some stuff });
- 9. Directives DOM manipulation DOM events Functionality( ng-show, ng-hide) Widgets
- 10. Directives Link Controller Scope
- 11. Project work though and hand on
- 12. 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
- 13. File Structure