The document discusses Angular architecture and concepts. It covers Angular components, controllers, services, factories, directives, filters and views. It also discusses best practices like using ng-cloak and ng-bind to avoid flickering content and adding spinners to improve user experience. The document emphasizes that Angular uses MVC architecture and two-way binding, but performance can suffer with large object graphs due to excessive rerendering.

2.  Angular architecture
 Angular component and Use case of it
 Some hands on
 Best practises
 FOCU
 Conclusion and recap

3. MVC

4. Controller
Service
Factory
Directives
Filter
View

5. Setup the scope
View Interaction
Coordinate View and Model
No DOM manipulationangular.module('myApp')
.controller('AddCarCtrl', ['$scope', function($scope) {
//do some stuff
}]);

6. Less controller code
No application logic
No DOM manipulation

7. Handle non-view logic
Communicate with server
Hold data & status

8. Display the Application
Declare Binding & Detectives

9. 1. Value
2. Constant
3. Factory
4. Service
5. Provider
angular.module('myApp').service('AddCarSvc',function($http,carList) {
//do some stuff
});

10. DOM manipulation
DOM events
Functionality( ng-show, ng-hide)
Widgets

11. Link
Controller
Scope

12. https://github.com/dinushadev/angular-
training.git
Set up dev environment with browser-sync

13. 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

16. ● Two way binding
● Component oriented architecture with drectiview
● Rapid development

17. ● Two way binding - formance issue.
● Rerendering
● With deep object graphs can cause slow app