DIVE INTO ANGULAR,PART 1: INTRODUCTION

_by Oleksii Prohonnyi

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

ANGULAR.JS IN A NUTSHELL

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/

WHEN SHOULD BE USED

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

PROS & CONS

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

MAIN CONCEPTS

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

MODULE

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

DATA BINDING

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

DATA BINDING: ONE-WAY

DATA BINDING: TWO-WAY

SCOPE

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

CONTROLLER

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

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

SERVICE

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

DIRECTIVE VS COMPONENT

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

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

SEE MORE

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

REFERENCES

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

Oleksii Prohonnyi

facebook.com/oprohonnyi

linkedin.com/in/oprohonnyi