SPA Jumpstart - Angular - 1 - Introdução

AngularJS

Objetivo

Este guia tem como objetivo fornecer informações de acesso rápido para consultas de tópicos relacionados ao AngularJS, juntamente com padrões e recomendações de desenvolvimento de uma Web Application.

Ferramentas

Visual Studio

JSBin para testes em pequena escala

quando envolver vários arquivos e testes em larga escala

Conceitos AngularJSIntrodução

• Open-source• Inteiramente executado no browser• Javascript• Mantido pela Google

Procura abranger todas as áreas do desenvolvimento web• Ligações diretas de dados com HTML• Rotas intrusivas e intuitivas• Extensão do HTML padrão• Chamadas ao servidor

Conceitos AngularJS

Model View “Whatever”• Não depende de MVVM ou

MVC• Flexibilidade para

estruturar como bem entender

• Desde que aja relação entre model e view.

Perigo!• Vários padrões de

desenvolvimento• Nenhum sólido• Fizemos a “Receita de

bolo”

Web Browser

ASP.NETAngularJS

Class LibraryBusiness

Index.htmlAppModule

RoutesDirectivies

TemplatesViews

ControllerViewModel

ServicesFactories

Repository

BreezeJS$resource$http

WebAPI

ApiController Services

Vamos ao códigoHello World!

<!DOCTYPE html><html ng-app> <head> <script src="angular.js"></script> </head> <body> {{"Hello"}} {{"World"+'!'}} 2+5={{2+5}} </body></html>

Referenciar angular.js

Declarar ng-app na tag root da aplicação

Usar como bem entender

Vamos ao códigoTwo way data-binding

<html ng-app> <head> <script src="angular.js"></script> </head> <body> <div> <input type="text" ng-model="firstName" /> <input type="text" ng-model="lastName" /> </div> {{firstName}} {{lastName}} tem {{(firstName+lastName).length}} letras. </body></html>

A declarativa ng-model faz menção à alguma propriedade do viewmodel

Wesley A.LemosLages/SC - 2014

Software

SPA Jumpstart - Angular - 1 - Introdução