This presentation has been prepared by Oleksii Prohonnyi for internal Angular.js training to improve skills of newbies in JS/Angular. Part 2 (Architecture): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-2-architecture Part 3 (Performance): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-3-performance Part 4 (Angular 2.0): http://www.slideshare.net/oprohonnyi/dive-into-angular-part-4-angular-20 Part 5 (Experience): https://www.slideshare.net/oprohonnyi/dive-into-angular-part-5-experience

1. DIVE INTO ANGULAR,
PART 1: INTRODUCTION
_by Oleksii Prohonnyi

2. AGENDA
 Angular.js in a nutshell
 When should be used
 Pros & cons
 Main concepts
 Module
 Data binding
 Scope
 Controller
 Service
 Directive vs component
 References

3. ANGULAR.JS IN A NUTSHELL

4. ANGULAR.JS IN A NUTSHELL
 AngularJS is a structural framework for dynamic web apps.
 It lets you use HTML as your template language and lets you
extend HTML's syntax to express your application's components
clearly and succinctly.
 Angular's data binding and dependency injection eliminate much
of the code you would otherwise have to write.
 Latest stable version: 1.5.8
 https://angularjs.org/

5. WHEN SHOULD BE USED

6. WHEN SHOULD BE USED
 Angular was built with the CRUD application in mind. Luckily
CRUD applications represent the majority of web applications.
 Games and GUI editors are examples of applications with
intensive and tricky DOM manipulation. These kinds of apps are
different from CRUD apps, and as a result are probably not a
good fit for Angular.
 See more: docs.angularjs.org

7. PROS & CONS

8. PROS & CONS
 See more: jaxenter.com
+ Two-way data binding
+ DOM manipulation
+ Improved server performance
+ Faster application prototyping
+ Responsive web
+ Highly testable products
+ The MVVM architecture
+ Use of directives
+ The Plain HTML templates
+ Fast development
- JavaScript support mandatory
- Inexperience with MVC
- The scopes
- Other difficult features
- Possible time consumption
- Difficult learning

9. MAIN CONCEPTS

10. MAIN CONCEPTS
 Template - HTML with additional markup
 Directives - extend HTML with custom attributes and elements
 Model - the data shown to the user in the view and with which
the user interacts
 Scope - context where the model is stored so that controllers,
directives and expressions can access it
 Data Binding - sync data between the model and the view
 Controller - the business logic behind views
 Service - reusable business logic independent of views
 See more: docs.angularjs.org

11. MODULE

12. MODULE
 AngularJS supports modular approach. Modules are used to
separate logics say services, controllers, application etc. and
keep the code clean. We define modules in separate js files and
name them as per the module.js file. In this example we're going
to create two modules.
 See more: docs.angularjs.org

13. DATA BINDING

14. DATA BINDING
 Data-binding in Angular apps is the automatic synchronization of
data between the model and view components.
 The way that Angular implements data-binding lets you treat the
model as the single-source-of-truth in your application.
 The view is a projection of the model at all times.
 When the model changes, the view reflects the change, and vice
versa.
 See more: docs.angularjs.org

15. DATA BINDING: ONE-WAY

16. DATA BINDING: TWO-WAY

17. SCOPE

18. SCOPE
 Scope is an object that refers to the application model.
 Scopes are arranged in hierarchical structure which mimic the
DOM structure of the application.
 Scopes can watch expressions and propagate events.
 Scope characteristics:
– provide APIs to observe model mutations;
– provide APIs to propagate any model changes into the view from
outside of the "Angular realm“;
– can be nested to limit access to the properties of application
components;
– provide context against which expressions are evaluated.
 See more: docs.angularjs.org

19. CONTROLLER

20. CONTROLLER
 In Angular, a Controller is defined by a JavaScript constructor
function that is used to augment the Angular Scope.
 When a Controller is attached to the DOM via the ng-controller
directive, Angular will instantiate a new Controller object, using
the specified Controller's constructor function.
 See more: docs.angularjs.org

21. CONTROLLER: WHEN TO USE
 Use controllers to:
– Set up the initial state of the $scope object.
– Add behavior to the $scope object.
 Do not use controllers to:
– Manipulate DOM
– Format input
– Filter output
– Share code or state across controllers
– Manage the life-cycle of other components (for example, to
create service instances).

22. SERVICE

23. SERVICE
 Angular services are substitutable objects that are wired together
using dependency injection (DI).
 Use services to organize and share code across your app.
 Angular services are:
– Lazily instantiated
– Singletons
 See more: docs.angularjs.org

24. DIRECTIVE VS COMPONENT

25. DIRECTIVE
 At a high level, directives are markers on a DOM element (such
as an attribute, element name, comment or CSS class) that tell
AngularJS's HTML compiler ($compile) to attach a specified
behavior to that DOM element (e.g. via event listeners), or even
to transform the DOM element and its children.
 See more: docs.angularjs.org

26. COMPONENT
 In Angular, a Component is a special kind of directive that uses a
simpler configuration which is suitable for a component-based
application structure.
 See more: docs.angularjs.org

27. SEE MORE

28. SEE MORE
 Dependency Injection
 Templates
 Expressions
 Component Router
 Forms
 Bootstrap
 Filters
 Running in Production

29. REFERENCES

30. REFERENCES
 https://angularjs.org/
 https://github.com/angular
 http://www.w3schools.com/angular/
 https://thinkster.io/a-better-way-to-learn-angularjs
 https://egghead.io/technologies/angularjs

32. Oleksii Prohonnyi
facebook.com/oprohonnyi
linkedin.com/in/oprohonnyi