type of angular 2
TRANSCRIPT
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
ABOUT
ALEXANDRE MARREIROS
• WINDOWS PLATFORM DEVELOPMENT MICROSOFT
MVP
• MICROSOFT WINDOWS DEVCAMP TRAINER
• WINDOWS INSIDER
• CTO @ INNOVAGENCY
• SOFTWARE DEV/ARCH AS INDEPENDENT
• TECHNICAL TRAINER AND SPEAKER AS
INDEPENDENT
• TEACHER @ EDIT
CONTACTS
@ALEXMARREIROS
DIGITALMINDIGNITION.WORDPRESS.COM
https://developer.mozilla.org/en-US/docs/Web/JavaScript
https://www.typescriptlang.org/
The term “single-page application” (or SPA) is usually used to describe applications that were built for the web. These applications are accessed via a web browser like other websites, but offer more dynamic interactions resembling native mobile and desktop apps.
While building SPAs is trendy and considered a modern development practice, it’s important to be aware of its cons, including:
The browser does most of the heavy lifting, which means performance can be a problem — especially on less capable mobile devices.
Careful thought must be put into search engine optimization (SEO) so your content can be discoverable by search engines and social media websites that provide a link preview.
Controller View
Angular Code
Return
RequestRouting via BrowserRequest
Routing via SPA Request
“Angular is a full modern webframework, that enable us to build core apps over Web Stack”
John Papa
“You write Angular applications by composing HTML templates with Angularized markup, writing component classes to manage those templates, adding application logic in services, and boxing components and services in modules.”
Angular aliance
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
WHAT IS ANGULAR
• DYNAMIC
• RICH
• BROWSER LOADED
• MODULAR ORIENTED
• BASE PLATFORM FOR WEB DEVELOPMENT
• APP DEVELOPMENT ENABLER
• SPA ORIENTED
• API ORIENTED
• DESIGNED FOR BROWSER AND MOBILE
• TESTABLE
• NOT DOM LOADING DEPENDENT
Angular Directive / Templating / Modulation
<ul>
<li *ngFor="#object of createRange(10)">Something</li>
</ul>
Dart
No Compile
Compiled
JavaScript based
Dart
No Compile
Compiled
JavaScript based
ES5 ES6 TypeScript
Core Modules Costum Modules
SPA Entry Point Modules
TemplateComponent< HTML >
Metadata(Component)
Component
Event BindingData Binding
Directives{ }
Services Services Services
Business Logic
Local Storage(database or cookie)
WebServiceIntegration
Directives{ }
Services
Dependency injection
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
ANGULAR GENERAL ARCHITECTURE
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
ANGULAR MODULES
IMPORT { NGMODULE } FROM '@ANGULAR/CORE';
IMPORT { BROWSERMODULE } FROM '@ANGULAR/PLATFORM-BROWSER';
@NGMODULE({
IMPORTS: [ BROWSERMODULE ],
PROVIDERS: [ LOGGER ],
DECLARATIONS: [ APPCOMPONENT ],
EXPORTS: [ APPCOMPONENT ],
BOOTSTRAP: [ APPCOMPONENT ]
})
EXPORT CLASS APPMODULE { }
NgModule is a decorator function with the following properties:
declarations - the view classes that belong to this module. Angular has three kinds of view classes: components, directives, and pipes.
exports - the subset of declarations that should be visible and usable in the component templates of other modules.
imports - other modules whose exported classes are needed by component templates declared in this module.
providers - creators of services that this module contributes to the global collection of services; they become accessible in all parts of the app.
bootstrap - the main application view, called the root component, that hosts all other app views. Only the root module should set this bootstrap property.
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
ANGULAR ARE BUILD USING A COMPONENT APPROACH
Angular are build using a components approach.
A Angular Component is a combination of:
A HTML Template
A class that controls all the behaviour of a portion of
the screen
Example off a declaration off a component
@Componet({
selector: ‘my-app’,
template: ‘<h1> Hi Angular </h1>’
})
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
ANGULAR ARE BUILD USING A COMPONENT APPROACH
@Componet({selector: ‘my-app’,template: ‘<h1> Hi Angular </h1>’
})
@Component is ued to define the metadata object of a new component in Angular
- The selector indicates the place where the component should be displayed
- The template defines the way the componnt will work if you want to spare the logic off the component from the render you can use templateurl as a way to point to a html file
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
ANGULAR IN ACTION
Let’s take a look in to Angular in action
Install node JS and grant that you have the right versions of
node and npm
Node –v >= v3.x.x.
Npn –v >= v4.x.x
• Node power client development with a set off powerfull
tools
• Npn work as a way to quick install JavaScript Libraries
1
2
Go to https://angular.io/docs/ts/latest/guide/learning-angular.html
Lets start by quickstarting the initial project
Tools
Este documento é propriedade intelectual de Innovagency, não podendo ser alterado ou usado para outro fim, a não ser o previamente acordado, sem autorização da mesma.
CONTACTS
@ALEXMARREIROS
DIGITALMINDIGNITION.WORDPRESS.COM