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
Recommended
