Dive into Angular, part 1: Introduction

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
 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
 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
 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
 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

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.

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.

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.

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.

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
 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

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.

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
 Dependency Injection
 Templates
 Expressions
 Component Router
 Forms
 Bootstrap
 Filters
 Running in Production

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

Dive into Angular, part 1: Introduction

More Related Content

What's hot(20)

Viewers also liked(20)

Similar to Dive into Angular, part 1: Introduction(20)

More from Oleksii Prohonnyi(9)

Recently uploaded(20)

Dive into Angular, part 1: Introduction