Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Formação Front-End (Angular JS + Boostrap)
Julian Cesar dos Santos
Versão 1.1
+
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 22
AgendaAgenda

Aula 1Aula 1 – Introdução...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 33
O que o CursoO que o Curso NÃONÃO aborda...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 44
IDE?!IDE?!

EclipseEclipse

https://js...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap)
+
Aula 01Aula 01
Introdução ao JavaScriptIn...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 66
JavaScriptJavaScript

O que é?O que é?
...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 77
JavaScriptJavaScript

Para que foi cria...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 88
JavaScriptJavaScript

DOM!?DOM!?

O Mo...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 99
JavaScriptJavaScript

FunçõesFunções

...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 1010
JavaScriptJavaScript

Ferramenta de D...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 1111
JavaScriptJavaScript

FunçõesFunções
...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 1212
JavaScriptJavaScript

Funções Aninhad...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 1313
JavaScriptJavaScript

DebugDebug

Co...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 1414
JavaScriptJavaScript

DebugDebug

Pa...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 1515
JavaScriptJavaScript

Objetos JSONObj...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 1616
JavaScriptJavaScript

Hierarquia do o...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 1717
JavaScriptJavaScript

Try...CatchTry....
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap)
+
Aula 02Aula 02
Introdução ao AngularJSInt...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 1919
AngularJS // IntroduçãoAngularJS // In...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 2020
AngularJS // IntroduçãoAngularJS // In...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 2121
AngularJS // IntroduçãoAngularJS // In...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 2222
AngularJS // IntroduçãoAngularJS // In...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 2323
AngularJS // IntroduçãoAngularJS // In...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 2424
AngularJS // IntroduçãoAngularJS // In...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 2525
AngularJS // IntroduçãoAngularJS // In...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 2626
AngularJS // IntroduçãoAngularJS // In...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 2727
AngularJS // IntroduçãoAngularJS // In...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 2828
AngularJS // IntroduçãoAngularJS // In...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 2929
AngularJS // IntroduçãoAngularJS // In...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 3030
AngularJS // IntroduçãoAngularJS // In...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap)
+
Aula 03Aula 03
AngularJS // DirectivesAng...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 3232
AngularJS // DirectivesAngularJS // Di...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 3333
AngularJS // DirectivesAngularJS // Di...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 3434
AngularJS // DirectivesAngularJS // Di...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 3535
AngularJS // DirectivesAngularJS // Di...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 3636
AngularJS // DirectivesAngularJS // Di...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 3737
AngularJS // DirectivesAngularJS // Di...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap)
+
Aula 04Aula 04
AngularJS // ControllersAn...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 3939
AngularJS // ControllersAngularJS // C...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 4040
AngularJS // ControllersAngularJS // C...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 4141
AngularJS // ControllersAngularJS // C...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 4242
AngularJS // ControllersAngularJS // C...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 4343
AngularJS // ControllersAngularJS // C...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 4444
AngularJS // ControllersAngularJS // C...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 4545
AngularJS // ControllersAngularJS // C...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 4646
AngularJS // ControllersAngularJS // C...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 4747
AngularJS // ControllersAngularJS // C...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap)
+
Aula 05Aula 05
AngularJS // ServicesAngul...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 4949
AngularJS // ServicesAngularJS // Serv...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 5050
AngularJS // ServicesAngularJS // Serv...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 5151
AngularJS // ServicesAngularJS // Serv...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 5252
AngularJS // ServicesAngularJS // Serv...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 5353
AngularJS // ServicesAngularJS // Serv...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 5454
AngularJS // ServicesAngularJS // Serv...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 5555
AngularJS // ServicesAngularJS // Serv...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 5656
AngularJS // ServicesAngularJS // Serv...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap)
+
Aula 06Aula 06
AngularJS // ViewsAngularJ...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 5858
AngularJS // ViewsAngularJS // Views
...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 5959
AngularJS // ViewsAngularJS // Views
...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 6060
AngularJS // ViewsAngularJS // Views
...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 6161
AngularJS // ViewsAngularJS // Views
...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 6262
AngularJS // ViewsAngularJS // Views
<...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 6363
AngularJS // ViewsAngularJS // Views
...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 6464
AngularJS // ViewsAngularJS // Views
...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 6565
AngularJS // ViewsAngularJS // Views
...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 6666
AngularJS // ViewsAngularJS // Views
...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 6767
AngularJS // ViewsAngularJS // Views
...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 6868
AngularJS // ViewsAngularJS // Views
...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 6969
AngularJS // ViewsAngularJS // Views
...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 7070
AngularJS // ViewsAngularJS // Views
...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 7171
AngularJS // ViewsAngularJS // Views
...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 7272
AngularJS // ViewsAngularJS // Views
...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 7373
AngularJS // ViewsAngularJS // Views
...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 7474
AngularJS // ViewsAngularJS // Views
...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 7575
AngularJS // ViewsAngularJS // Views
...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 7676
AngularJS // ViewsAngularJS // Views
...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 7777
AngularJS // ViewsAngularJS // Views
...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 7878
AngularJS // ViewsAngularJS // Views
...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap)
+
Aula 07Aula 07
Requisições AJAXRequisiçõe...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 8080
AngularJS // Requisições AJAXAngularJS...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 8181
AngularJS // Requisições AJAXAngularJS...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 8282
AngularJS // Requisições AJAXAngularJS...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 8383
AngularJS // Requisições AJAXAngularJS...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 8484
AngularJS // Requisições AJAXAngularJS...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap)
+
Aula 08Aula 08
Armazenamento LocalArmazen...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 8686
Armazenamento LocalArmazenamento Local...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 8787
Armazenamento LocalArmazenamento Local...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 8888
Armazenamento LocalArmazenamento Local...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 8989
Armazenamento LocalArmazenamento Local...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap)
+
Aula 09Aula 09
Bootstrap e Responsividade...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 9191
Bootstrap e ResponsividadeBootstrap e ...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 9292
Bootstrap e ResponsividadeBootstrap e ...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 9393
Bootstrap e ResponsividadeBootstrap e ...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 9494
Bootstrap e ResponsividadeBootstrap e ...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 9595
Bootstrap e ResponsividadeBootstrap e ...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 9696
Bootstrap e ResponsividadeBootstrap e ...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 9797
Bootstrap e ResponsividadeBootstrap e ...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 9898
Bootstrap e ResponsividadeBootstrap e ...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 9999
Bootstrap e ResponsividadeBootstrap e ...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 100100
Bootstrap e ResponsividadeBootstrap ...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 101101
Bootstrap e ResponsividadeBootstrap ...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 102102
Bootstrap e ResponsividadeBootstrap ...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 103103
Bootstrap e ResponsividadeBootstrap ...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 104104
Bootstrap e ResponsividadeBootstrap ...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 105105
Bootstrap e ResponsividadeBootstrap ...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 106106
Bootstrap e ResponsividadeBootstrap ...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 107107
Bootstrap e ResponsividadeBootstrap ...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 108108
Bootstrap e ResponsividadeBootstrap ...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 109109
Bootstrap e ResponsividadeBootstrap ...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 110110
Bootstrap e ResponsividadeBootstrap ...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 111111
Bootstrap e ResponsividadeBootstrap ...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 112112
Bootstrap e ResponsividadeBootstrap ...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 113113
Bootstrap e ResponsividadeBootstrap ...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap)
+
Aula 09Aula 09
Projeto FinalProjeto Final
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 115115
Projeto FinalProjeto Final

Requisi...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 116116
Projeto FinalProjeto Final

Ambient...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 117117
Projeto FinalProjeto Final

Criação...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 118118
Projeto FinalProjeto Final

Criação...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 119119

Projeto FinalProjeto Final

Criaç...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 120120
Projeto FinalProjeto Final

Criação...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 121121
Projeto FinalProjeto Final

Criação...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 122122
Projeto FinalProjeto Final

Limpand...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 123123
Projeto FinalProjeto Final

Retiran...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 124124
Projeto FinalProjeto Final

HTML do...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 125125
Projeto FinalProjeto Final

Publica...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 126126
Projeto FinalProjeto Final

Configu...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 127127
Projeto FinalProjeto Final

Route P...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 128128
Projeto FinalProjeto Final

Configu...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 129129
Projeto FinalProjeto Final

Configu...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 130130
Projeto FinalProjeto Final

HTML do...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 131131
Projeto FinalProjeto Final

Primeir...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 132132
Projeto FinalProjeto Final

Listage...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 133133
Projeto FinalProjeto Final

Situaçã...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 134134
Projeto FinalProjeto Final

Listage...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 135135
Projeto FinalProjeto Final

Listage...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 136136
Projeto FinalProjeto Final

Listage...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 137137
Projeto FinalProjeto Final

Listage...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 138138
Projeto FinalProjeto Final

Situaçã...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 139139
Projeto FinalProjeto Final

Adicion...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 140140
Projeto FinalProjeto Final

Adicion...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 141141
Projeto FinalProjeto Final

Adicion...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 142142
Projeto FinalProjeto Final

Adicion...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 143143
Projeto FinalProjeto Final

Alterar...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 144144
Projeto FinalProjeto Final

Alterar...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 145145
Projeto FinalProjeto Final

Adicion...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 146146
Projeto FinalProjeto Final

Adicion...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 147147
Projeto FinalProjeto Final

Remover...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 148148
Projeto FinalProjeto Final

Remover...
Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap)
+
Fim!Fim!
Julian Cesar
juliancesar@gmail.c...
Upcoming SlideShare
Loading in …5
×

Desenvolvimento Front end (AngularJS e Bootstrap)

7,692 views

Published on

Curso introdutório prático que aborda as ferramentas AngularJS e Bootstrap.

Published in: Software
  • If u need a hand in making your writing assignments - visit ⇒ www.HelpWriting.net ⇐ for more detailed information.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Posso recomendar um site. Ele realmente me ajudou. Chama-se ⇒ www.boaaluna.club ⇐ Eles me ajudaram a escrever minha dissertação.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Verifique a fonte ⇒ www.boaaluna.club ⇐. Este site me ajudou escrever uma monografia.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❶❶❶ http://bit.ly/36cXjBY ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Desenvolvimento Front end (AngularJS e Bootstrap)

  1. 1. Formação Front-End (Angular JS + Boostrap) Julian Cesar dos Santos Versão 1.1 +
  2. 2. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 22 AgendaAgenda  Aula 1Aula 1 – Introdução ao JavasScript (JS)– Introdução ao JavasScript (JS)  Aula 2Aula 2 – Introdução ao AngularJS– Introdução ao AngularJS  Aula 3Aula 3 – AngularJS // Directives– AngularJS // Directives  Aula 4Aula 4 – AngularJS // Controllers– AngularJS // Controllers  Aula 5Aula 5 – AngularJS // Services– AngularJS // Services  Aula 6Aula 6 – AngularJS // Views– AngularJS // Views  Aula 7Aula 7 – Requisições AJAX– Requisições AJAX  Aula 8Aula 8 – Armazenamento Local– Armazenamento Local  Aula 9Aula 9 – Bootstrap e Responsividade– Bootstrap e Responsividade  Aula 10Aula 10 – Projeto Final– Projeto Final
  3. 3. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 33 O que o CursoO que o Curso NÃONÃO abordaráabordará  FerramentasFerramentas  IDE  Bower  Grunt  Node (NPM)  Outras Bibliotecas AuxiliaresOutras Bibliotecas Auxiliares
  4. 4. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 44 IDE?!IDE?!  EclipseEclipse  https://jsfiddle.net/https://jsfiddle.net/
  5. 5. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) + Aula 01Aula 01 Introdução ao JavaScriptIntrodução ao JavaScript
  6. 6. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 66 JavaScriptJavaScript  O que é?O que é?  JavaScript é uma linguagem de programação interpretada. Foi originalmente implementada como parte dos navegadores web para que scripts pudessem ser executados do lado do cliente e interagissem com o usuário sem a necessidade deste script passar pelo servidor, controlando o navegador, realizando comunicação assíncrona e alterando o conteúdo do documento exibido.
  7. 7. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 77 JavaScriptJavaScript  Para que foi criado?Para que foi criado?  O uso primário de JavaScript é escrever funções que são embarcadas ou incluídas em páginas HTML e que interagem com o Modelo de Objeto de Documentos (DOM) da página. Alguns exemplos deste uso são:  abrir uma nova janela com controle programático sobre seu tamanho, posição e atributos;  validar valores de um formulário para garantir que são aceitáveis antes de serem enviados ao servidor;  mudar imagens à medida que o mouse se movimenta sob elas.
  8. 8. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 88 JavaScriptJavaScript  DOM!?DOM!?  O Modelo de Objeto de Documento (do inglês Document Object Model - DOM) é uma convenção multiplataforma e independente de linguagem para representação e interação com objetos em documentos HTML, XHTML e XML.  Para apresentar um documento como uma página HTML, a maioria dos navegadores utilizam um modelo internacional similar ao DOM. Os nós de cada documento são organizados em uma estrutura de árvore, chamada de árvore DOM, com o nó superior denominado "Document object" (objeto Documento).
  9. 9. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 99 JavaScriptJavaScript  FunçõesFunções  Crie uma pasta JavaScript no seu Desktop e dentro um arquivo chamado index.html  Adicione o seguinte conteúdo dentro: <script type="text/javascript"><script type="text/javascript"> function square(number) {function square(number) { return number * number;return number * number; }} console.log(square(2));console.log(square(2)); </script></script>  Abra o arquivo index.html com o Chrome Tag que informa ao navagadorTag que informa ao navagador que dentro é um código JSque dentro é um código JS Declaração da função eDeclaração da função e o seu parâmetro de entradao seu parâmetro de entrada Retorno da funçãoRetorno da função Chamada da função eChamada da função e envia da saída para o consoleenvia da saída para o console
  10. 10. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 1010 JavaScriptJavaScript  Ferramenta de DesenvolvedoresFerramenta de Desenvolvedores  Em todos os navegadores mais modernos existe uma ferramenta nativa que oferece algumas funcionalidades que permitem ajudar no desenvolvimento  Para acessar a ferramenta de desenvolvimento do Chromium aperte a tecla F12  No caso do exemplo anterior da raíz quadrada a aba Console ficará da seguinte maneira Saída da linha:Saída da linha: console.log(square(2));console.log(square(2));
  11. 11. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 1111 JavaScriptJavaScript  FunçõesFunções  Outra maneira de escrever a mesma coisa: <script type="text/javascript"><script type="text/javascript"> var square = function (number) {var square = function (number) { return number * number;return number * number; }} console.log(square(2));console.log(square(2)); </script></script>
  12. 12. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 1212 JavaScriptJavaScript  Funções AninhadasFunções Aninhadas <script type="text/javascript"><script type="text/javascript"> functionfunction operationsoperations(number1) {(number1) { functionfunction sumsum(number2) {(number2) { return number1 + number2;return number1 + number2; }} return sum;return sum; }} var func_sum =var func_sum = operationsoperations(3);(3); var result1 = func_sum(5);var result1 = func_sum(5); console.log(result1);console.log(result1); var result2 =var result2 = operationsoperations(3)(5);(3)(5); console.log(result2);console.log(result2); </script></script> https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions
  13. 13. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 1313 JavaScriptJavaScript  DebugDebug  Com a Ferramenta do Desenvolvedor aberta (F12) acesse a aba Source Arquivo queArquivo que Iremos manipularIremos manipular Código do ArquivoCódigo do Arquivo
  14. 14. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 1414 JavaScriptJavaScript  DebugDebug  Para iniciar a depuração selecione uma linha clicando no número da linha, selecionaremos a linha 6 e atualize a página (F5) para rodar novamente o script BreakpointBreakpoint Situação dasSituação das variáveisvariáveis Controles deControles de depuraçãodepuração
  15. 15. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 1515 JavaScriptJavaScript  Objetos JSONObjetos JSON function myFunc(theObject) {function myFunc(theObject) { theObject.make = "Toyota";theObject.make = "Toyota"; }} var mycar = { make: "Honda", model: "Accord", year: 1998 };var mycar = { make: "Honda", model: "Accord", year: 1998 }; console.log(mycar.make);console.log(mycar.make); myFunc(mycar);myFunc(mycar); console.log(mycar.make);console.log(mycar.make); Função que alteraFunção que altera o fabricante do objetoo fabricante do objeto Objeto do meu carroObjeto do meu carro Mostra o fabricanteMostra o fabricante do meu carrodo meu carro Chama a função deChama a função de alteração de fabricantealteração de fabricante Mostra novamente oMostra novamente o fabricante do meu carrofabricante do meu carro Especificação JSON: http://json.org/
  16. 16. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 1616 JavaScriptJavaScript  Hierarquia do objeto JavaScriptHierarquia do objeto JavaScript function Exemplo() {function Exemplo() { this.propriedade = 'Isso é uma propriedade.',this.propriedade = 'Isso é uma propriedade.', this.metodo = function() {this.metodo = function() { return 'Isso é um metódo';return 'Isso é um metódo'; }} }} var objeto =var objeto = new Exemplo();new Exemplo(); console.log(objeto.propriedade),console.log(objeto.propriedade), console.log(objeto.metodo());console.log(objeto.metodo()); NEW!?NEW!?
  17. 17. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 1717 JavaScriptJavaScript  Try...CatchTry...Catch try {try { throw "myException";throw "myException"; } catch (e) {} catch (e) { console.log(e);console.log(e); } finally {} finally { console.log("Always execute");console.log("Always execute"); }}
  18. 18. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) + Aula 02Aula 02 Introdução ao AngularJSIntrodução ao AngularJS
  19. 19. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 1919 AngularJS // IntroduçãoAngularJS // Introdução  O que é?O que é?  O AngularJS é um framework baseado em MVC (Models Views Controls). O propósito do AngularJS é tirar a View e até o Controller do servidor, sendo assim você trabalha somente com arquivos .html estáticos, e quando precisar de dados é realizado uma requisição via AJAX, assim todo o processo é processado via Client, dando a possibilidade de você criar HTML dinâmico, com isso você ganha muita velocidade em sua aplicação, sem depender do servidor para criar seu HTML. AngularJS é o que o HTML teria sido se tivesse sido projetado para desenvolvedor aplicações.
  20. 20. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 2020 AngularJS // IntroduçãoAngularJS // Introdução  AngularJS vs JQueryAngularJS vs JQuery  Angular.js é um framework. Na execução do Angular.js, ocorre o carregamento, onde sua árvore DOM e JavaScript é tranformada em um aplicativo angular. Isso ocorre pois o código HTML com caracteres especiais (diretivas e filtros angular) é compilado e o Angular realiza uma vinculação entre Controller, Model e View  Já JQuery é uma biblioteca javascript para manipulação do DOM (ex. mudança de cores de um elemento, eventos onclick, animação, etc...). Na execução do JQuery, seu código irá realizar chamadas a funções de uma biblioteca, solicitado por algum evento DOM por exemplo
  21. 21. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 2121 AngularJS // IntroduçãoAngularJS // Introdução  ConceitosConceitos  Template – HTML com marcação adicional  Directives – estender HTML com atributos personalizados e elementos  Model – dados mostrados para o usuário na view com o qual interage usuário  Scope – contexto em que o model é armazenado para que os controllers, directives and expressions podem acessá-lo  Expressions – variáveis de acesso e funções de aplicação.  Filter – formata valores para serem mostrados para os usuários
  22. 22. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 2222 AngularJS // IntroduçãoAngularJS // Introdução  Conceitos (Cont.)Conceitos (Cont.)  View – que o usuário vê (o DOM)  Data Binding – sincroniza os dados entre os Models e as Views  Controller – lógica de negocio por trás da visualizaçao.  Module – um recipiente para as diferentes partes de um aplicativo, incluindo controllers, services, filters, directives que configura o Injector.  Service – conjunto de lógica de negócio reutilizável independentes de views.
  23. 23. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 2323 AngularJS // IntroduçãoAngularJS // Introdução  VantagensVantagens  Manutenível  Flexível  Testável  Desacoplado
  24. 24. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 2424 AngularJS // IntroduçãoAngularJS // Introdução  Principais DiretivasPrincipais Diretivas  ng-app: esta diretiva define uma aplicação AngularJS no conteúdo HTML  ng-model: esta diretiva faz a ligação (bind) dos valores entre a aplicação AngularJS e os campos do HTML  ng-bind: esta diretiva faz a ligação (bind) entre os dados da aplicação AngularJS e as marcações do HTML
  25. 25. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 2525 AngularJS // IntroduçãoAngularJS // Introdução  Primeiro App com AngularJSPrimeiro App com AngularJS  Vamos para o nosso primeiro código!  Crie uma pasta AngularJS no seu Desktop e dentro um arquivo chamado index.html  Adicione o seguinte conteúdo dentro: <html ng-app><html ng-app> <head><head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> </head></head> <body><body> <h1>Meu Primeiro App AngularJS </h1><h1>Meu Primeiro App AngularJS </h1> </body></body> </html></html>  Abra o arquivo index.html com o Chrome Carrega o arquivo principalCarrega o arquivo principal do frameworkdo framework Inicializa o AngularJS eInicializa o AngularJS e informa o contexto do seu Appinforma o contexto do seu App
  26. 26. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 2626 AngularJS // IntroduçãoAngularJS // Introdução  Primeiro App com AngularJSPrimeiro App com AngularJS  Adicione o seguinte conteúdo abaixo da tag H1: ...... <div><div> <label>Nome: </label><label>Nome: </label> <input type="text"<input type="text" ng-model="nome"ng-model="nome" placeholder="Digite seu nome" />placeholder="Digite seu nome" /> <h1><h1> Olá, {{nome}}!Olá, {{nome}}! </h1></h1> </div></div> ...... Mostra a variávelMostra a variável Diretiva ng-model que faz a ligaçãoDiretiva ng-model que faz a ligação entre a view e o model/variávelentre a view e o model/variável
  27. 27. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 2727 AngularJS // IntroduçãoAngularJS // Introdução  Primeiro App com AngularJSPrimeiro App com AngularJS  ng-model: é utilizado em elementos de formulário, como input, select e textarea. Ele faz uma interligação entre sua View e o Model do AngularJS. Com ele é possível também fazer o controle de validações do formulário, possibilitando a captura do dado informado ao envio do formulário.  {{variável}}: são as variáveis ou expressões do AngularJS, quando ele é compilado ele substitui essa variável pelo Model, tanto dentro de um input, como dentro de Controllers e entre outros, ele reconhece as quatros chaves, como uma chamada para alterar essa variável pelo um valor. No exemplo anterior a nossa variável é {{nome}}, pois foi definido ao Model esta variável, como ng-model=”nome”.
  28. 28. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 2828 AngularJS // IntroduçãoAngularJS // Introdução  Primeiro App com AngularJSPrimeiro App com AngularJS  Encoding ...... <head><head> <meta charset="UTF-8"><meta charset="UTF-8"> ...... </head></head> ......  Teste de Expressão ...... </div></div> <p>1 + 2 = {{ 1 + 2 }}</p><p>1 + 2 = {{ 1 + 2 }}</p> </body></body> ......
  29. 29. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 2929 AngularJS // IntroduçãoAngularJS // Introdução  Primeiro App com AngularJSPrimeiro App com AngularJS  Resultado
  30. 30. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 3030 AngularJS // IntroduçãoAngularJS // Introdução  Outro App com AngularJSOutro App com AngularJS <html ng-app="myapp"> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> </head> <body> <div ng-controller = "HelloController" <h2>Welcome {{helloTo.title}} to the world!</h2> </div> <script> angular.module("myapp", []) .controller("HelloController", function($scope) { $scope.helloTo = {}; $scope.helloTo.title = "AngularJS"; }); </script> </body> </html> Nosso primeiroNosso primeiro controller!controller! Nosso primeiroNosso primeiro módulo!módulo!
  31. 31. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) + Aula 03Aula 03 AngularJS // DirectivesAngularJS // Directives
  32. 32. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 3232 AngularJS // DirectivesAngularJS // Directives  DiretivasDiretivas  São usadas para extender as marcações do HTML https://code.angularjs.org/1.4.9/docs/api/ng/directive
  33. 33. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 3333 AngularJS // DirectivesAngularJS // Directives  Diretiva ng-repeatDiretiva ng-repeat  Esta diretiva repete elementos HTML para cada item dentro de uma coleção <div ng-app ng-init="countries=[{locale:'en-US',name:'United States'}, {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]"> <h1>List of Countries with locale:</h1> <ol> <li ng-repeat="country in countries"> {{ 'Country: ' + country.name + ', Locale: ' + country.locale }} </li> </ol> </div> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
  34. 34. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 3434 AngularJS // DirectivesAngularJS // Directives  Criando uma diretivaCriando uma diretiva  Elas são muito úteis em várias situações, mas quando se percebe que será necessario manipular o DOM dentro de um controller muito provavelmente o correto é escrever uma diretiva para essa função  Uma diretiva pode assumir algumas formas:  Como atributo: <a custom-button>Click me</a>  Como elemento: <custom-button>Click me</custom-button>  Como classe CSS: <a class="custom-button">Click me</a>  Como comentário: <!-- directive: custom-button -->
  35. 35. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 3535 AngularJS // DirectivesAngularJS // Directives  Criando a minha própria diretivaCriando a minha própria diretiva <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> <div ng-app="docsSimpleDirective" ng-controller="Controller"> <div my-customer></div> </div> <script> angular.module('docsSimpleDirective', []) .controller('Controller', ['$scope', function($scope) { $scope.customer = { name: 'Naomi', address: '1600 Amphitheatre' }; }]) .directive('myCustomer', function() { return { template: 'Name: {{customer.name}} Address: {{customer.address}}' }; }); </script> http://www.sitepoint.com/practical-guide-angularjs-directives/
  36. 36. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 3636 AngularJS // DirectivesAngularJS // Directives  Detalhe Importante na Definição dos NomesDetalhe Importante na Definição dos Nomes  Prefixo data- e x-: estes prefixos em qualquer diretiva é ignorado, pois normalmente ele é usado para que o HTML passe por algum validador  Normalização: converte os delimitadores :, -, ou _ no nome em camelCase Portanto: ng-bind, ng:bind, ng_bind, data-ng-bind e x-ng- bind são a mesma coisa. Boa pratica: prefira usar a opção de separação por hifen (ng-bind para ngBind). E se quiser usar alguma ferramenta de validação de HTML, use data- como prefixo (data-ng- bind para ngBind).
  37. 37. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 3737 AngularJS // DirectivesAngularJS // Directives  Detalhe Importante na Definição dos NomesDetalhe Importante na Definição dos Nomes <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> <div ng-app="docsBindExample" ng-controller="Controller"> Hello <input ng-model='name'> <hr/> <span ng-bind="name"></span> <br/> <span ng:bind="name"></span> <br/> <span ng_bind="name"></span> <br/> <span data-ng-bind="name"></span> <br/> <span x-ng-bind="name"></span> <br/> </div> <script> angular.module('docsBindExample', []) .controller('Controller', ['$scope', function($scope) { $scope.name = 'Teste de nomenclatura de diretivas'; }]); </script>
  38. 38. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) + Aula 04Aula 04 AngularJS // ControllersAngularJS // Controllers
  39. 39. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 3939 AngularJS // ControllersAngularJS // Controllers  Para que servemPara que servem  Inicializar um escopo (variável $scope)  Adicionar comportamentos ao escopo (variável $scope)  Para que NÃO servePara que NÃO serve  Manipular a árvore DOM  Formatar campos  Filtrar saídas  Compartilhar código ou estados entre controllers  Gerenciar o ciclo de vida de outros componentes
  40. 40. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 4040 AngularJS // ControllersAngularJS // Controllers  Inicializando um Controller e seu EscopoInicializando um Controller e seu Escopo <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> <div ng-app="myApp" ng-controller="GreetingController"> {{ greeting }} </div> <script> var myApp = angular.module('myApp',[]); myApp.controller('GreetingController', ['$scope', function($scope) { $scope.greeting = 'Hola!'; }]); </script> Foi usado uma anotação injeção de dependenciaFoi usado uma anotação injeção de dependencia para informar explicitamente a dependênciapara informar explicitamente a dependência do Controller com relação ao serviço $scopedo Controller com relação ao serviço $scope
  41. 41. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 4141 AngularJS // ControllersAngularJS // Controllers  Adicionando um Comportamento no ControllerAdicionando um Comportamento no Controller <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> <div ng-app="myApp" ng-controller="DoubleController"> Two times <input ng-model="num"> equals {{ double(num) }} </div> <script> var myApp = angular.module('myApp',[]); myApp.controller('DoubleController', ['$scope', function($scope) { $scope.double = function(value) { return value * 2; }; }]); </script>
  42. 42. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 4242 AngularJS // ControllersAngularJS // Controllers  O uso correto do ControllerO uso correto do Controller  De maneira geral o Controller não deve fazer muita coisa, ele deve conter somente a lógica de negócio necessaria para uma View  O caminho mais comum para manter o Controller limpo é encapsular todo o trabalho que não for de negócio dentro de Services e então usar estes por meio das dependências do Controller ... app.controller('Controller',['$scope','service', function($scope,service) { ... }]); ...
  43. 43. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 4343 AngularJS // ControllersAngularJS // Controllers  Convenção do Prefixo ‘$’Convenção do Prefixo ‘$’  É possível criar Services (Serviços), e foi criada uma convenção com relação a serviços, escopos e outras funcionalidades que já façam parte do próprio AngularJS, sendo que para isso estes componentes tem como prefixo o $, como o $scope  Não use $ como prefixo para evitar possiveis colisões de nomes
  44. 44. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 4444 AngularJS // ControllersAngularJS // Controllers  Exemplo usando Pimentas!Exemplo usando Pimentas! <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> <div ng-app="spicyApp1" ng-controller="SpicyController"> <button ng-click="chiliSpicy()">Chili</button> <button ng-click="jalapenoSpicy()">Jalapeno</button> <p>The food is {{spice}} spicy!</p> </div> <script> var myApp = angular.module('spicyApp1', []); myApp.controller('SpicyController', ['$scope', function($scope) { $scope.spice = 'very'; $scope.chiliSpicy = function() { $scope.spice = 'chili'; }; $scope.jalapenoSpicy = function() { $scope.spice = 'jalapeno'; }; }]); </script>
  45. 45. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 4545 AngularJS // ControllersAngularJS // Controllers  Funcionamento da Herança de EscoposFuncionamento da Herança de Escopos <scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> <div ng-app="scopeInheritance" class="spicy"> <div ng-controller="MainController"> Hi {{name}}! <div ng-controller="ChildController"> Hi {{name}}! <div ng-controller="GrandChildController">Hi {{name}}!</div> </div> </div> </div> <style> div.spicy div { border: solid 2px blue; } </style> <script> var myApp = angular.module('scopeInheritance', []); myApp.controller('MainController', ['$scope', function($scope) { $scope.name = 'Nikki'; }]); myApp.controller('ChildController', ['$scope', function($scope) { $scope.name = 'Mattie'; }]); myApp.controller('GrandChildController', ['$scope', function($scope) { $scope.name = 'Gingerbread Baby'; }]); </script>
  46. 46. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 4646 AngularJS // ControllersAngularJS // Controllers  Funcionamento da Herança de Escopos (Cont.)Funcionamento da Herança de Escopos (Cont.) <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> <div ng-app="scopeInheritance" class="spicy"> <div ng-controller="MainController"> Hi {{name}}! <div ng-controller="ChildController"> Hi {{name}}! <div ng-controller="GrandChildController">Hi {{name}}!</div> </div> </div> </div> <style> div.spicy div { border: solid 2px blue; } </style> <script> var myApp = angular.module('scopeInheritance', []); myApp.controller('MainController', ['$scope', function($scope) { $scope.name = 'Nikki'; }]); myApp.controller('ChildController', ['$scope', function($scope) { // Atribuição ao model excluída }]); myApp.controller('GrandChildController', ['$scope', function($scope) { $scope.name = 'Gingerbread Baby'; }]); </script>
  47. 47. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 4747 AngularJS // ControllersAngularJS // Controllers  Exemplo de Utilização de ControllerExemplo de Utilização de Controller <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> <div ng-app="mainApp" ng-controller="studentController"> Enter first name: <input type="text" ng-model="student.firstName"> <br /> Enter last name: <input type="text" ng-model="student.lastName"> <br /> You are entering: {{student.fullName()}} </div> <script> var mainApp = angular.module("mainApp", []); mainApp.controller('studentController', function($scope) { $scope.student = { firstName: "Mahesh", lastName: "Parashar", fullName: function() { var studentObject = $scope.student; return studentObject.firstName + " " + studentObject.lastName; } }; }); </script>
  48. 48. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) + Aula 05Aula 05 AngularJS // ServicesAngularJS // Services
  49. 49. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 4949 AngularJS // ServicesAngularJS // Services  O que éO que é  Os Services são funções javascript e são responsáveis para fazer apenas a tarefas específicas. Isso os torna uma entidade individual que é de fácil manutenção e testável  Os serviços são normalmente injetado usando o mecanismo de injeção de dependência do AngularJS  Por padrão o AngularJS fornece diversos serviços embutidos como $http, $route, $window, $location, etc
  50. 50. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 5050 AngularJS // ServicesAngularJS // Services  O que éO que é  Cada serviço é responsável por uma tarefa específica, por exemplo, $http é usado para fazer chamadas ajax para obter os dados do servidor.  O $route é utilizado para definir a informação de redirecionamentos dentro do app, e assim por diante  Serviços embutidos sempre tem o prefixo $
  51. 51. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 5151 AngularJS // ServicesAngularJS // Services  Factory, Service e ProviderFactory, Service e Provider  Existem 3 maneiras de criar um serviço:  Factory: pode retornar qualquer tipo de dado, não existe uma maneira ou padrão explicito que você deva seguir para criar esses dados, você precisa somente retornar algo  Service: trabalha muito parecido com o Factory, a direfença é que o Service nos da como retorno uma uma instancia dele mesmo ao invés de retornar um novo objeto como em Factory, em outras palavras é como se estivese-mos utilizando um new ServiceName()  Provider: são muito parecidos com Services e Factories, mas são completamente configurável, o que pode tornar eles um pouco mais complexos. Você só precisa retornar seu serviço em uma função chamada $get que nos dá a API publica daquele serviço, em outras palavras o que vier dentro do nosso retorno em $get funciona exatamente como um factory por exemplo.
  52. 52. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 5252 AngularJS // ServicesAngularJS // Services  Factory, Service e ProviderFactory, Service e Provider  Factory: app.factory('todoListService', function() { var todoList = []; function addTodo(todo) { // Sua implementação } function removeTodo(todo) { // Sua implementação } return { todoList: todoList, addTodo: addTodo, removeTodo: removeTodo }; }); Cria as funções queCria as funções que serão retornadasserão retornadas Retorna o objeto queRetorna o objeto que contém as funções paracontém as funções para serem usadas posteriormenteserem usadas posteriormente
  53. 53. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 5353 AngularJS // ServicesAngularJS // Services  Factory, Service e ProviderFactory, Service e Provider  Service: app.service('todoListService', function() { this.todoList = []; this.addTodo = function (todo) { // Sua implementação } this.removeTodo = function (todo) { // Sua implementação } }); Cria as funções queCria as funções que serão utilizadasserão utilizadas
  54. 54. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 5454 AngularJS // ServicesAngularJS // Services  Factory, Service e ProviderFactory, Service e Provider  Provider: app.provider('todoListService', function() { var todoList = []; return { loadDefaults: function(newList) { todoList = newList; }, $get: function() { function addTodo(todo) { // Sua implementação } function removeTodo(todo) { // Sua implementação } return { todoList: todoList, addTodo: addTodo, removeTodo: removeTodo }; } }; }); Função de inicializaçãoFunção de inicialização Cria as funções queCria as funções que serão utilizadasserão utilizadas Retorna o objeto queRetorna o objeto que contém as funções paracontém as funções para serem usadas posteriormenteserem usadas posteriormente
  55. 55. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 5555 AngularJS // ServicesAngularJS // Services  Factory, Service e ProviderFactory, Service e Provider <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> <div ng-app="mainApp" ng-controller="CalcController"> <p>Enter a number: <input type="number" ng-model="number" /> </p> <button ng-click="square()">X<sup>2</sup></button> <p>Result: {{result}}</p> </div> <script> var mainApp = angular.module("mainApp", []); mainApp.factory('MathService', function() { var factory = {}; factory.multiply = function(a, b) { return a * b } return factory; }); mainApp.service('CalcService', function(MathService) { this.square = function(a) { return MathService.multiply(a, a); } }); mainApp.controller('CalcController', function($scope, CalcService) { $scope.square = function() { $scope.result = CalcService.square($scope.number); } }); </script>
  56. 56. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 5656 AngularJS // ServicesAngularJS // Services  Values e ConstantsValues e Constants  Exemplo de Utilização: var app = angular.module("mainApp", []); app.value('appInfoValue', {version: "2.0"} ); app.constant('appInfoConstant', {version: "2.0"} ); app.controller('MyController', ['$scope', 'appInfoValue', 'appInfoConstant', function($scope, appInfoValue, appInfoConstant) { $scope.value = appInfoValue.version; $scope.const = appInfoValue.version; }]);
  57. 57. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) + Aula 06Aula 06 AngularJS // ViewsAngularJS // Views
  58. 58. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 5858 AngularJS // ViewsAngularJS // Views  O que é?O que é?  Até agora vimos diversas Views, pois elas nada mais são que estruturas HTML que podem ou não ter Diretivas customizadas e comportamentos especificos  As Views possuem diversos comportamentos que ajudam na criação dos aplicativos, como:  Templates  Rotas  Filters  Forms  Entre outros
  59. 59. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 5959 AngularJS // ViewsAngularJS // Views  Directive ng-viewDirective ng-view  O AngularJS suporta o conteúdo de Single Page Application (SPA) por meio de múltiplas Views em uma única página  Uma View é no código a diretiva ng-view ou data-ng-view como vimos nas aulas anteriores  Exemplo de definição de uma View: <div ng-app="mainApp"> ... <div ng-view></div> </div>
  60. 60. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 6060 AngularJS // ViewsAngularJS // Views  Directive ng-templateDirective ng-template  A diretiva ng-template é usada para criar uma View HTML dentro de uma tag script como o exemplo abaixo: <div ng-app="mainApp"> ... <script type="text/ng-template" id="addStudent.htm"> <h2> Add Student </h2> {{message}} </script> </div>
  61. 61. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 6161 AngularJS // ViewsAngularJS // Views  Serviço $routeProviderServiço $routeProvider  O routeProvider é um serviço chave que é configurado com todas as URLs do sistema, mapeando todas elas para uma View correspondente ou para um Template e atribuindo um Controller a este caminho $routeProvider.when('/addStudent', { templateUrl: 'addStudent.htm', controller: 'AddStudentController' }).when('/viewStudents', { templateUrl: 'viewStudents.htm', controller: 'ViewStudentsController' }).otherwise({ redirectTo: '/addStudent' });
  62. 62. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 6262 AngularJS // ViewsAngularJS // Views <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.min.js"></script> <div ng-app="mainApp"> <p><a href="#addStudent">Add Student</a></p> <p><a href="#viewStudents">View Students</a></p> <div ng-view></div> <script type="text/ng-template" id="addStudent.htm"><h2> Add Student </h2> {{message}}</script> <script type="text/ng-template" id="viewStudents.htm"><h2>View Students</h2> {{message}}</script> </div> <script> var mainApp = angular.module("mainApp", ['ngRoute']); mainApp.config(['$routeProvider', function($routeProvider) { $routeProvider.when('/addStudent', { templateUrl: 'addStudent.htm', controller: 'AddStudentController' }).when('/viewStudents', { templateUrl: 'viewStudents.htm', controller: 'ViewStudentsController' }).otherwise({ redirectTo: '/addStudent' }); }]); mainApp.controller('AddStudentController', function($scope) { $scope.message = "TEXTO DO AddStudentController"; }); mainApp.controller('ViewStudentsController', function($scope) { $scope.message = "TEXTO DO ViewStudentsController"; }); </script>
  63. 63. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 6363 AngularJS // ViewsAngularJS // Views  FiltersFilters  Os Filters podem ser aplicados a expressões dentro de Views usando a seguinte sintaxe: {{ expression | filter }}  Um exemplo seria: {{ 12 | currency }} // Saída: $12.00
  64. 64. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 6464 AngularJS // ViewsAngularJS // Views  Filters (Cont.)Filters (Cont.)  Os Filters podem ser aplicados no resultado de outro Filtro: {{ expression | filter1 | filter2 | ... }}  Um Filter pode ter vários argumentos: {{ expression | filter:argument1:argument2:... }}  Exemplo: {{ 1234 | number:2 }} // Saída: 1,234.00
  65. 65. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 6565 AngularJS // ViewsAngularJS // Views  Filters em Controllers, Services e DirectivesFilters em Controllers, Services e Directives  Para isso, injete uma dependência com o nome <filterName>Filtro em seu Controller/Service/Directive  Por exemplo: um filtro chamado number é injetado usando o numberFilter
  66. 66. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 6666 AngularJS // ViewsAngularJS // Views  Filters em Controllers, Services e Directives (Cont.)Filters em Controllers, Services e Directives (Cont.)  Exemplo utilizando filterFilter: ele é um filtro que cria uma coleção filtrada a partir de outra coleção <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> <div ng-app="FilterInControllerModule" ng-controller="FilterController as ctrl"> <div> All entries:<span ng-repeat="entry in ctrl.array">{{entry.name}}</span> </div> <div> Contain an "a": <span ng-repeat="entry in ctrl.filteredArray"> {{entry.name}}</span> </div> </div> <script> angular.module('FilterInControllerModule', []). controller('FilterController', ['filterFilter', function(filterFilter) { this.array = [{name: 'Tobias'}, {name: 'Jeff'}, { name: 'Brian' }, { name: 'Igor' }, { name: 'James' }, { name: 'Brad' }]; this.filteredArray = filterFilter(this.array, 'a'); }]); </script>
  67. 67. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 6767 AngularJS // ViewsAngularJS // Views  Filters CustomizadosFilters Customizados <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> <div ng-controller="MyController" ng-app="myReverseFilterApp"> <input ng-model="greeting" type="text"><br>No filter: {{greeting}}<br>Reverse: {{greeting|reverse}}<br>Reverse+uppercase: {{greeting| reverse:true}}<br>Reverse,filtered in controller: {{filteredGreeting}} </div> <script> angular.module('myReverseFilterApp', []) .filter('reverse', function() { return function(input, uppercase) { input = input || ''; var out = ""; for (var i = 0; i < input.length; i++) out = input.charAt(i) + out; if (uppercase) out = out.toUpperCase(); return out; }; }) .controller('MyController', ['$scope', 'reverseFilter', function($scope, reverseFilter) { $scope.greeting = 'hello'; $scope.filteredGreeting = reverseFilter($scope.greeting); }]); </script>
  68. 68. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 6868 AngularJS // ViewsAngularJS // Views  Manipulação de DOM com DirectivesManipulação de DOM com Directives <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> <div ng-app=""> <input type="checkbox" ng-model="enableDisableButton">Disable Button <button ng-disabled="enableDisableButton">Click Me!</button><br/> <input type="checkbox" ng-model="showHide1">Show Button <button ng-show="showHide1">Click Me!</button><br/> <input type="checkbox" ng-model="showHide2">Hide Button <button ng-hide="showHide2">Click Me!</button><br/> <p>Total click: {{clickCounter}}</p> <button ng-click="clickCounter = clickCounter + 1"> Click Me! </button> </div>
  69. 69. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 6969 AngularJS // ViewsAngularJS // Views  FormsForms  O AngularJS fornece vários eventos nativos que podem ser associados a elementos HTML, seguem abaixo o eventos suportados:  ng-click  ng-dbl-click  ng-mousedown  ng-mouseup  ng-mouseenter  ng-mouseleave  ng-mousemove  ng-mouseover  ng-keydown  ng-keyup  ng-keypress  ng-change
  70. 70. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 7070 AngularJS // ViewsAngularJS // Views  FormsForms  Exemplo simples usando ng-click <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> <div ng-app="myapp" ng-controller="studentController"> <input name="firstname" type="text" ng-model="firstName"> <input name="lastname" type="text" ng-model="lastName"> <button ng-click="reset()">Reset</button> </div> <script> angular.module("myapp", []) .controller("studentController", function($scope) { $scope.reset = function() { $scope.firstName = "Mahesh"; $scope.lastName = "Parashar"; } $scope.reset(); }); </script>
  71. 71. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 7171 AngularJS // ViewsAngularJS // Views  FormsForms <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> <div ng-controller="ExampleController" ng-app="formExample"> <form novalidate class="simple-form"> Name: <input type="text" ng-model="user.name" /><br /> E-mail: <input type="email" ng-model="user.email" /><br /> <input type="button" ng-click="reset()" value="Reset" /> <input type="submit" ng-click="update(user)" value="Save" /> </form> <pre>user = {{user | json}}</pre><pre>master = {{master | json}}</pre> </div> <script> angular.module('formExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.master = {}; $scope.update = function(user) { $scope.master = angular.copy(user); }; $scope.reset = function() { $scope.user = angular.copy($scope.master); }; $scope.reset(); }]); </script>
  72. 72. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 7272 AngularJS // ViewsAngularJS // Views  Forms – ValidaçõesForms – Validações  Adicione esta folha de estilos no exemplo anterior:  E nos campos de nome e e-mail adione o atributo required: <style type="text/css"> .simple-form input.ng-invalid.ng-touched { background-color: #FA787E; } .simple-form input.ng-valid.ng-touched { background-color: #78FA89; } </style> Name: <input type="text" ng-model="user.name" required /><br /> E-mail: <input type="email" ng-model="user.email" required /><br />
  73. 73. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 7373 AngularJS // ViewsAngularJS // Views  Forms – Validações (Cont.)Forms – Validações (Cont.)  Altere os campos para o seguinte código:  Altere o botão de reset para o seguinte código:  Altere a função de reset para o seguinte código: Name: <input type="text" ng-model="user.name" name="uName" required="" /><br /> <div ng-show="form.$submitted || form.uName.$touched"> <div ng-show="form.uName.$error.required">Tell us your name.</div> </div> E-mail: <input type="email" ng-model="user.email" name="uEmail" required="" /><br /> <div ng-show="form.$submitted || form.uEmail.$touched"> <span ng-show="form.uEmail.$error.required">Tell us your email.</span> <span ng-show="form.uEmail.$error.email">This is not a valid email.</span> </div> <input type="button" ng-click="reset(form)" value="Reset" /> $scope.reset = function(form) { if (form) { form.$setPristine(); form.$setUntouched(); } $scope.user = angular.copy($scope.master); };
  74. 74. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 7474 AngularJS // ViewsAngularJS // Views  Forms – Validações (Cont.)Forms – Validações (Cont.)  Adicione o atributo name na tag form da seguinte maneira: <form name="form" novalidate class="simple-form">
  75. 75. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 7575 AngularJS // ViewsAngularJS // Views  Forms – Atualização de FormForms – Atualização de Form  Por padrão, qualquer alteração no conteúdo irá desencadear uma atualização do modelo e validação de formulário. Você pode substituir esse comportamento usando a diretiva ngModelOptions <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> <div ng-app="customTriggerExample" ng-controller="ExampleController"> <form> Name: <input type="text" ng-model-options="{ updateOn: 'blur' }" ng-model="user.name" /><br /> Other data: <input type="text" ng-model="user.data" /> </form> <pre>username = "{{user.name}}"</pre> <pre>userdata = "{{user.data}}"</pre> </div> <script> angular.module('customTriggerExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.user = {}; }]); </script>
  76. 76. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 7676 AngularJS // ViewsAngularJS // Views  Forms – Atraso na ValidaçãoForms – Atraso na Validação  É possível atrasar a atualização do modelo/validação usando a chave debounce na diretiva ngModelOptions  Outro exemplo de utilização seria: ng-model-options="{ updateOn: 'default blur', debounce: { default: 500, blur: 0 } }" <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> <div ng-app="debounceExample" ng-controller="ExampleController"> <form> Name: <input type="text" ng-model="user.name" ng-model-options="{ debounce: 500 }" /><br /> </form> <pre>username = "{{user.name}}"</pre> </div> <script> angular.module('debounceExample', []) .controller('ExampleController', ['$scope', function($scope) { $scope.user = {}; }]); </script>
  77. 77. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 7777 AngularJS // ViewsAngularJS // Views  Forms – Validação CustomizadaForms – Validação Customizada  O AngularJS possui várias validações padrão utilizando HTML 5, são elas:  text  number  url  email  date  radio  checkbox  required  pattern  minlength  maxlength  min  max
  78. 78. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 7878 AngularJS // ViewsAngularJS // Views  Forms – Validação Customizada (Cont.)Forms – Validação Customizada (Cont.)  Se nenhuma das validações padrões atender é possível criar a sua prórpia validação: <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> <form name="form" ng-app="form-example1" class="css-form" novalidate> Size (integer 0 - 10): <input type="number" ng-model="size" name="size" min="0" max="10" integer />{{size}}<br /> <span ng-show="form.size.$error.integer">The value is not a valid integer!</span><span ng-show="form.size.$error.min || form.size.$error.max">The value must be in range 0 to 10!</span> </form> <script> var INTEGER_REGEXP = /^-?d+$/; var app = angular.module('form-example1', []).directive('integer', function() { return { require: 'ngModel', link: function(scope, elm, attrs, ctrl) { ctrl.$validators.integer = function(modelValue, viewValue) { if (ctrl.$isEmpty(modelValue)) return true; if (INTEGER_REGEXP.test(viewValue)) return true; return false; }; } }; }); </script>
  79. 79. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) + Aula 07Aula 07 Requisições AJAXRequisições AJAX
  80. 80. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 8080 AngularJS // Requisições AJAXAngularJS // Requisições AJAX  O que é?O que é?  O AngularJS prove um controle de requisições asincronas via HTTP(s) que funciona como um serviço para ler dados a partir do servidor  O Angularjs precisa de um retorno com dados em formato JSON  Segue um exemplo: ... $http.get(url).success( function(response) { $scope.students = response; }); ...
  81. 81. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 8181 AngularJS // Requisições AJAXAngularJS // Requisições AJAX  Uso comumUso comum <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> <div ng-app="myapp" ng-controller="ajaxController"> {{retorno}} </div> <script> angular.module("myapp", []) .controller("ajaxController", ['$scope', '$http', function($scope, $http) { $http({ method: 'GET', url: 'http://10.200.232.59/rest-data/data.php' }).then(function successCallback(response) { $scope.retorno = response; console.log(response.data); }, function errorCallback(response) { $scope.retorno = response; console.log(response.data); }); }]); </script>
  82. 82. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 8282 AngularJS // Requisições AJAXAngularJS // Requisições AJAX  Outras OperaçõesOutras Operações  $http.get  $http.head  $http.post  $http.put  $http.delete  $http.jsonp  $http.patch
  83. 83. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 8383 AngularJS // Requisições AJAXAngularJS // Requisições AJAX <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> <div ng-app="httpExample" ng-controller="FetchController"> <select ng-model="method" aria-label="Request method"><option>GET</option><option>JSONP</option></select> <input type="text" ng-model="url" size="80" aria-label="URL" /> <button id="fetchbtn" ng-click="fetch()">fetch</button> <button id="samplegetbtn" ng-click="updateModel('GET', 'http://10.200.232.59/rest- data/data.php')">Sample GET</button> <button id="samplejsonpbtn" ng-click="updateModel('JSONP', 'https://angularjs.org/greet.php?callback=JSON_CALLBACK&name=Super %20Hero')"> Sample JSONP </button> <pre>http status code: {{status}}</pre><pre>http response data: {{data}}</pre> </div>
  84. 84. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 8484 AngularJS // Requisições AJAXAngularJS // Requisições AJAX <script> angular.module('httpExample', []) .controller('FetchController', ['$scope', '$http', function($scope, $http) { $scope.fetch = function() { $scope.code = null; $scope.response = null; $http({ method: $scope.method, url: $scope.url }).then(function(response) { $scope.status = response.status; $scope.data = response.data; }, function(response) { $scope.data = response.data || "Request failed"; $scope.status = response.status; }); }; $scope.updateModel = function(method, url) { $scope.method = method; $scope.url = url; }; } ]); </script>
  85. 85. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) + Aula 08Aula 08 Armazenamento LocalArmazenamento Local
  86. 86. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 8686 Armazenamento LocalArmazenamento Local  O que é?O que é?  Um recurso do HTML5 permite salvar dados localmente no navegador utilizando:  Local Storage: armazena dados sem data de expiração. Armazenamento chave-valor, contudo no campo valor podemos armazenar até 5MB de dados, podendo ser uma estutura JSON  http://www.w3.org/TR/webstorage/  Session Storage: armazena dados para uma sessão (os dados são perdidos quando a aba do navegador é fechada)  http://www.w3.org/TR/webstorage/  Cookie: armazena pequena quantidade de dados com data de expiração  Web SQL Database: também é possível armazenar localmente utilizando uma base de dados SQL  http://dev.w3.org/html5/webdatabase/
  87. 87. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 8787 Armazenamento LocalArmazenamento Local  Como usar?Como usar?  Todo o processo pode ser feito manualmente acessando o objeto de armazenamento local do HTML5  Outra opção é utilizar alguma extenção do AngularJS para nos poupar trabalho  Iremos utilizar a extenção angular-local-storage
  88. 88. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 8888 Armazenamento LocalArmazenamento Local  angular-local-storageangular-local-storage  Toda a documentação do funcionamento dela pode ser encontrado no endereço:  https://github.com/grevory/angular-local-storage
  89. 89. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 8989 Armazenamento LocalArmazenamento Local  angular-local-storage - Exemploangular-local-storage - Exemplo <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-local-storage/0.2.2/angular-local-storage.min.js"></script> <div ng-app="myApp" ng-controller="MainCtrl"> <input type="text" ng-model="chave" /> <input type="text" ng-model="valor" /> <input type="button" ng-click="save(chave, valor)" value="Salvar" /> <input type="button" ng-click="restore(chave)" value="Recuperar" /> </div> <script> var myApp = angular.module('myApp', ['LocalStorageModule']); myApp.controller('MainCtrl', function($scope, localStorageService) { $scope.save = function(chave, valor) { localStorageService.set(chave, valor); } $scope.restore = function(chave) { $scope.valor = localStorageService.get(chave); } }); </script>
  90. 90. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) + Aula 09Aula 09 Bootstrap e ResponsividadeBootstrap e Responsividade
  91. 91. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 9191 Bootstrap e ResponsividadeBootstrap e Responsividade  O que é?O que é?  Bootstrap: é o mais popular framework HTML, CSS, e JS para desenvolvimento de projetos responsivo e focado para dispositivos móveis na web.
  92. 92. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 9292 Bootstrap e ResponsividadeBootstrap e Responsividade  O que é?O que é?  Responsividade: Um site responsivo muda a sua aparência e disposição com base no tamanho da tela em que o site é exibido. Então, se o usuário tem uma tela pequena, os elementos se reorganizam para lhe mostrar as coisas principais em primeiro lugar.
  93. 93. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 9393 Bootstrap e ResponsividadeBootstrap e Responsividade
  94. 94. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 9494 Bootstrap e ResponsividadeBootstrap e Responsividade  Como usar o bootstrapComo usar o bootstrap  Basta adicionar alguns arquivos externos no seu HTML <!-- Última versão CSS compilada e minificada --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- Tema opcional --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- Última versão JavaScript compilada e minificada --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  95. 95. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 9595 Bootstrap e ResponsividadeBootstrap e Responsividade  Como usar o bootstrapComo usar o bootstrap  Adicione os seus elementos HTML <div class="container"> <form class="form-signin"> <h2 class="form-signin-heading">Please sign in</h2> <label for="inputEmail" class="sr-only">Email address</label> <input type="email" id="inputEmail" class="form-control" placeholder="Email"> <label for="inputPassword" class="sr-only">Password</label> <input type="password" id="inputP" class="form-control" placeholder="Password"> <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button> </form> </div>
  96. 96. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 9696 Bootstrap e ResponsividadeBootstrap e Responsividade  Como usar o bootstrap (Cont.)Como usar o bootstrap (Cont.)  Altere o Tema <link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.css">
  97. 97. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 9797 Bootstrap e ResponsividadeBootstrap e Responsividade  Grid SystemGrid System  É um sistema de grid que foca no desenvolvimento orientado a dispositivos móveis e que dimensiona adequadamente 12 colunas com o tamanho do dispositivo ou tamanho de tela do usuário.  Ele inclui classes pré-definidas para as opções de layout facilitando o desenvolvimento
  98. 98. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 9898 Bootstrap e ResponsividadeBootstrap e Responsividade  Grid SystemGrid System  Características basicas  As linhas devem ser colocadas dentro de uma DIV com a classe .container (fixed-width) OU .container-fluid (full-width) para um alinhamento correto  Use linhas para criar grupos horizontais de colunas  O conteúdo deve ser colocado dentro de colunas, e somente as colunas podem ser elementos filhos de linhas
  99. 99. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 9999 Bootstrap e ResponsividadeBootstrap e Responsividade  Grid SystemGrid System  Tamanhos de tela suportados  Extra small devices (<768px)  .col-xs-  Small devices Tablets (≥768px)  .col-sm-  Medium devices (≥992px)  .col-md-  Large devices Desktops (≥1200px)  .col-lg-
  100. 100. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 100100 Bootstrap e ResponsividadeBootstrap e Responsividade  Grid System - ExemploGrid System - Exemplo <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> <hr> <div class="container"> <div class="visible-lg"><span class="label label-default">lg</span></div> <div class="visible-md"><span class="label label-default">md</span></div> <div class="visible-sm"><span class="label label-default">sm</span></div> <div class="visible-xs"><span class="label label-default">xs</span></div> </div> <hr> <div class="container"> <div class="row"> <div class="col-xs-8 col-md-4">col-xs-8 col-md-4</div> <div class="col-xs-4 col-md-8">col-xs-4 col-md-8</div> </div> </div> <hr> <div class="container"> <div class="row"> <div class="col-xs-6 col-sm-8">col-xs-6 col-sm-8</div> <div class="col-xs-6 col-sm-4">col-xs-6 col-sm-4</div> </div> </div>
  101. 101. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 101101 Bootstrap e ResponsividadeBootstrap e Responsividade  Grid SystemGrid System  Mais informações sobre o funcionamento do Grid podem ser encontrados no seguinte endereço:  http://getbootstrap.com/css/#grid
  102. 102. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 102102 Bootstrap e ResponsividadeBootstrap e Responsividade  Botões - CoresBotões - Cores <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> <button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button>
  103. 103. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 103103 Bootstrap e ResponsividadeBootstrap e Responsividade  Botões - TamanhosBotões - Tamanhos <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <p> <button type="button" class="btn btn-primary btn-lg">Large button</button> </p> <p> <button type="button" class="btn btn-primary">Default button</button> </p> <p> <button type="button" class="btn btn-primary btn-sm">Small button</button> </p> <p> <button type="button" class="btn btn-primary btn-xs">Extra small button</button> </p>
  104. 104. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 104104 Bootstrap e ResponsividadeBootstrap e Responsividade  BotõesBotões  Mais informações podem ser encontrados no seguinte endereço:  http://getbootstrap.com/css/#buttons
  105. 105. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 105105 Bootstrap e ResponsividadeBootstrap e Responsividade  FormuláriosFormulários  Os campos mais comuns suportados pelo HTML5 são: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color  Por padrão os campos assumiram o tamanho da coluna que ele foi colocado
  106. 106. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 106106 Bootstrap e ResponsividadeBootstrap e Responsividade  FormuláriosFormulários <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" placeholder="Password"> <p class="help-block">Example block-level help text here.</p> </div> <button type="button" class="btn btn-default">Submit</button> </form>
  107. 107. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 107107 Bootstrap e ResponsividadeBootstrap e Responsividade  FormuláriosFormulários  Mais informações podem ser encontrados no seguinte endereço:  http://getbootstrap.com/css/#forms
  108. 108. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 108108 Bootstrap e ResponsividadeBootstrap e Responsividade  Classes AuxiliaresClasses Auxiliares  Cores de Fonte para Contextos <p class="text-primary">...</p> <p class="text-success">...</p>  Cores de Fundo para Contextos <p class="bg-success">...</p> <p class="bg-info">...</p>  Cores de Fundo para Contextos  <div class="center-block">...</div>
  109. 109. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 109109 Bootstrap e ResponsividadeBootstrap e Responsividade  Classes AuxiliaresClasses Auxiliares  Mais informações podem ser encontrados no seguinte endereço:  http://getbootstrap.com/css/#helper-classes
  110. 110. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 110110 Bootstrap e ResponsividadeBootstrap e Responsividade  Utilidades para ResponsividadeUtilidades para Responsividade  Para um desenvolvimento rápido de aplicações amigáveis para dispositivos móveis, existem classes CSS para mostrar e ocultar o conteúdo de acordo com o tamanho da tela do dispositivo.  Também existem classes CSS para alternar conteúdo quando impresso
  111. 111. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 111111 Bootstrap e ResponsividadeBootstrap e Responsividade  Utilidades para ResponsividadeUtilidades para Responsividade  Mostrando/Ocultando conteúdos
  112. 112. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 112112 Bootstrap e ResponsividadeBootstrap e Responsividade  Utilidades para ResponsividadeUtilidades para Responsividade  Mostrando/Ocultando conteúdos para impressão
  113. 113. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 113113 Bootstrap e ResponsividadeBootstrap e Responsividade  Utilidades para ResponsividadeUtilidades para Responsividade  Mais informações podem ser encontrados no seguinte endereço:  http://getbootstrap.com/css/#responsive-utilities
  114. 114. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) + Aula 09Aula 09 Projeto FinalProjeto Final
  115. 115. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 115115 Projeto FinalProjeto Final  RequisitosRequisitos  Layout Responsivo  Acessar a API REST  Funcionalidades  Listar Bookmarks  Adicionar Bookmark  Alterar Bookmark  Excluir Bookmark MENU Início Listagem Adicionar HEADER CONTENT
  116. 116. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 116116 Projeto FinalProjeto Final  Ambiente de DesenvolvimentoAmbiente de Desenvolvimento  Eclipse Luna  http://www.eclipse.org/downloads/download.php?file=/technology/epp/ downloads/release/luna/SR2/eclipse-java-luna-SR2-linux-gtk.tar.gz  Jboss 7.1.1.Final
  117. 117. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 117117 Projeto FinalProjeto Final  Criação do ProjetoCriação do Projeto  Configurando o Arquetipo Demoiselle no Eclipse  Acesse o menu Window > Preferences  Abra o menu lateral Maven > Archetypes  Clique no botão Add Remote Catalog  No campo Catalog File informe:  http://demoiselle.sourceforge.net/repository/archetype-catalog.xml  No campo Description:  Demoiselle  Clique em OK
  118. 118. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 118118 Projeto FinalProjeto Final  Criação do ProjetoCriação do Projeto  Configurando o Servidor JBoss  Acesse o menu superior Window > Show View > Servers
  119. 119. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 119119  Projeto FinalProjeto Final  Criação do ProjetoCriação do Projeto  Configurando o Servidor JBoss  Clique no link “No servers are avaliable. Click this link...”  Filtre e escolha o item Jboss AS 7.1  Clique em Next  Clique novamente em Next  No campo Home Directory escolha o caminho da pasta do Jboss descompactada  Clique em Finish
  120. 120. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 120120 Projeto FinalProjeto Final  Criação do ProjetoCriação do Projeto  Novo Projeto  Acesse o menu superior no item File > New > Other...  Procure por Maven Project  Clique em Next  Next novamente  Escolha o catálogo Demoiselle e filtre por rest  Clique em Next  No group id informe br.gov.serpro  No Artifact id informe projetofinal  Clique em Finish
  121. 121. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 121121 Projeto FinalProjeto Final  Criação do ProjetoCriação do Projeto  Após a criação a aba Project Explorer ficará assim:
  122. 122. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 122122 Projeto FinalProjeto Final  Limpando do ProjetoLimpando do Projeto  Vamos excluir alguns arquivos e pastas que não são necessários  Deixe o seu projeto com a árvore de diretórios igual a imagem ao lado
  123. 123. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 123123 Projeto FinalProjeto Final  Retirando a obrigatoriedade de LoginRetirando a obrigatoriedade de Login  No projeto não iremos abordar as questões de login, por isso é necessário que na classe BookmarkREST dentro do pacote br.gov.serpro.projetofinal.rest todas as anotações @LoggedIn sejam comentadas ou excluídas para que o projeto funcione corretamente
  124. 124. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 124124 Projeto FinalProjeto Final  HTML do index.htmlHTML do index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Projeto Final</title> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <!-- Bootstrap CSS Theme --> <link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.css"> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#/">Projeto Final</a> </div> </div> </nav> <!-- Libs (JQuery, Angular, Bootstrap) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </body> </html> Vamos utilizar as bibliotecas como recursos externos de outros servidores
  125. 125. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 125125 Projeto FinalProjeto Final  Publicação no JBossPublicação no JBoss  Clique com o botão direito sobre o projeto e acesse o menu Run as > Run on Server  Escolha o servidor Jboss  Clique em Finish  O index.html estará disponível no endereço:  http://localhost:8080/projetofinal/  O ideal é acessar pelo navegador Chromium ou Chrome
  126. 126. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 126126 Projeto FinalProjeto Final  Configurando o App AngularJSConfigurando o App AngularJS  Crie um arquivo app.js na raíz da pasta scripts com o seguinte conteúdo 'use strict'; var app = angular.module('projetofinal', ['ngRoute']); app.config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/home', { templateUrl: 'views/home.html', controller: 'HomeController', }) .when('/add', { templateUrl: 'views/add.html', controller: 'AddController', }) .when('/list', { templateUrl: 'views/list.html', controller: 'ListController', }) .when('/edit/:id', { templateUrl: 'views/add.html', // Vamos reutilizar a tela controller: 'EditController', }) .otherwise({ redirectTo: '/home', }); }]);
  127. 127. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 127127 Projeto FinalProjeto Final  Route ProviderRoute Provider  Como iremos utilizar o Route Provider é necessário incluir um outro componente do AngularJS da seguinte maneira: ... <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <!-- Route Provider --> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.min.js"></script> </body> ...
  128. 128. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 128128 Projeto FinalProjeto Final  ConfiguraçãoConfiguração  Adicionando o JS app.js ... <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-route.min.js"></script> <!-- Main --> <script src="scripts/app.js"></script> </body> ...
  129. 129. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 129129 Projeto FinalProjeto Final  ConfiguraçãoConfiguração  Adicionando o atributo ng-app no HTML  Troque a linha: <html>  Por <html ng-app="projetofinal">
  130. 130. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 130130 Projeto FinalProjeto Final  HTML do MenuHTML do Menu  Adicione o seguinte trecho de código no index.html para criar o menu e o local aonde será inserido o html das suas páginas acessadas: ... </nav> <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-2"> MENU </div> <div class="col-sm-9 col-md-10" ng-view></div> </div> </div> <!-- Libs (JQuery, Angular, Bootstrap) --> ...
  131. 131. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 131131 Projeto FinalProjeto Final  Primeira TelaPrimeira Tela  Criando a tela home  Adicione o arquivo home.js na raíz da pasta /scripts/controllers com o seguinte conteúdo:  Crie o arquivo home.html na raíz da pasta /views com o seguinte conteúdo:  Adicione o arquivo home.js ao HTML do index.html:  Adicione a seguinte linha 'use strict'; app.controller('HomeController', [ '$scope', function($scope) { $scope.title = "Olá! Esta é a tela principal do sistema!"; }]); {{title}} ... <script src="scripts/app.js"></script> <!-- Controllers --> <script src="scripts/controllers/home.js"></script> </body> ... ... <link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.css"> <style> .sidebar, .main { top: 75px; } </style> </head> ...
  132. 132. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 132132 Projeto FinalProjeto Final  Listagem - Criação da telaListagem - Criação da tela  Copie o arquivo home.js para list.js e altere o que for necessário  Copie o arquivo home.html para list.html  Adicione o arquivo list.js logo abaixo do home.js dentro do HTML do index.html  Substitua o conteúdo do menu pelo seguinte código:  Publique o projeto e visualise o resultado no navegador <div class="row"> <div class="col-sm-3 col-md-2 sidebar"> <ul class="nav nav-sidebar"> <li><a href="#/home">Início</a></li> <li><a href="#/list">Listagem</a></li> <li><a href="#/add">Adicionar</a></li> </ul> </div> <div class="col-sm-9 col-md-10 main" ng-view></div> </div>
  133. 133. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 133133 Projeto FinalProjeto Final  Situação AtualSituação Atual
  134. 134. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 134134 Projeto FinalProjeto Final  Listagem – Criação do ServiçoListagem – Criação do Serviço  Crie o arquivo bookmark.js na raíz da pasta /scripts/services com o seguinte conteúdo 'use strict'; app.factory('BookmarkService', [ '$http', '$q', function($http, $q) { var services = {}; services.findAll = function() { var deferred = $q.defer(); $http({ url : 'api/bookmark', method : "GET", }).success(function(data) { deferred.resolve(data); }).error(function(data, status) { deferred.reject([ data, status ]); }); return deferred.promise; }; return services; } ]);
  135. 135. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 135135 Projeto FinalProjeto Final  Listagem – Criação do ServiçoListagem – Criação do Serviço  Adicione o arquivo bookmark.js do serviço BookmarkService ao index.html <script src="scripts/controllers/list.js"></script> <!-- Services --> <script src="scripts/services/bookmark.js"></script> </body>
  136. 136. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 136136 Projeto FinalProjeto Final  Listagem – Tabela HTMLListagem – Tabela HTML  Substitua TODO o conteúdo do arquivo /views/list.html para o seguinte: <h3>{{title}} <small>Listagem de todos os bookmarks cadastrados</small></h3> <hr /> <button class="btn btn-primary" data-ng-click="new()"> <i class="glyphicon glyphicon-plus-sign"></i> Novo </button> <br/><br/> <table class="table table-striped table-condensed"> <thead> <tr> <th>#</th> <th width="30%">Description</th> <th width="70%">Link</th> <th></th> </tr> </thead> <tbody> <tr data-ng-repeat="b in bookmarks"> <th scope="row">{{b.id}}</th> <td>{{b.description}}</td> <td>{{b.link}}</td> <td class="text-nowrap"> <a data-ng-click="edit(b.id)" class="btn btn-warning btn-xs">Alterar</a> <a data-ng-click="delete(b.id)" class="btn btn-danger btn-xs">Excluir</a> </td> </tr> </tbody> </table>
  137. 137. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 137137 Projeto FinalProjeto Final  Listagem – ControllerListagem – Controller  Substitua TODO o conteúdo do arquivo /scripts/controllers/list.js para o seguinte:  Publique novamente no JBoss e visualiza no navegador 'use strict'; app.controller('ListController', [ '$scope', '$location', 'BookmarkService', function($scope, $location, BookmarkService) { $scope.title = "LISTAGEM"; $scope.new = function () { $location.path('/add'); }; function findAll() { BookmarkService.findAll().then( function (data) { $scope.bookmarks = data; }, function (error) { alert("Ocorreu um erro na requisição"); } ); } findAll(); }]);
  138. 138. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 138138 Projeto FinalProjeto Final  Situação AtualSituação Atual
  139. 139. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 139139 Projeto FinalProjeto Final  Adicionar - Criação da telaAdicionar - Criação da tela  Copie o arquivo home.js para add.js altere o que for necessário  Copie o arquivo home.html para add.html  Adicione o arquivo add.js logo abaixo do list.js dentro do HTML do index.html  Publique o projeto e visualise o resultado no navegador
  140. 140. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 140140 Projeto FinalProjeto Final  Adicionar – FormAdicionar – Form  Substitua TODO o conteúdo do arquivo /views/add.html: <h3>{{title}} <small>Gestão do bookmark</small></h3> <hr /> <form name="form" novalidate> <div class="form-group row" ng-show="bookmark.id != undefined"> <div class="col-md-2"> <input class="form-control" disabled="disabled" type="text" ng-model="bookmark.id"> </div> </div> <div class="form-group"> <input name="uDescription" required type="text" class="form-control" ng-model="bookmark.description" placeholder="Description"> <div ng-show="form.$submitted || form.uDescription.$touched" class="has-error"> <div class="help-block" ng-show="form.uDescription.$error.required">Tell us the bookmark description</div> </div> </div> <div class="form-group"> <input type="url" class="form-control" required name="uUrl" placeholder="URL" ng-model="bookmark.link"> <div ng-show="form.$submitted || form.uUrl.$touched" class="has-error"> <span class="help-block" ng-show="form.uUrl.$error.required">Tell us the URL of bookmark.</span> <span class="help-block" ng-show="form.uUrl.$error.url">This is not a valid URL.</span> </div> </div> <button type="submit" class="btn btn-default" ng-click="save()">Submit</button> </form>
  141. 141. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 141141 Projeto FinalProjeto Final  Adicionar – FormAdicionar – Form  Adicione a função save no serviço do Bookmark ... return deferred.promise; }; services.save = function(bookmark) { var deferred = $q.defer(); var id = bookmark.id; bookmark.id = null; $http({ url: id ? 'api/bookmark/' + id : 'api/bookmark', method: id ? "PUT" : "POST", data: bookmark, headers: { 'Content-Type': 'application/json;charset=utf8' } }).success(function(data) { deferred.resolve(data); }).error(function(data, status) { deferred.reject([data, status]); }); return deferred.promise; }; return services; ...
  142. 142. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 142142 Projeto FinalProjeto Final  Adicionar – FormAdicionar – Form  Substitua TODO o conteúdo do arquivo add.js por: 'use strict'; app.controller('AddController', ['$scope', '$location', 'BookmarkService', function($scope, $location, BookmarkService) { $scope.title = "Adicionar Bookmark"; $scope.bookmark = {}; $scope.save = function () { if ($scope.form.$valid) { BookmarkService.save($scope.bookmark).then( function (data) { alert('Bookmark salvo com sucesso'); $location.path('/list'); }, function (error) { console.log(error); alert('Erro ao salvar o Bookmark'); } ); } }; }]);
  143. 143. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 143143 Projeto FinalProjeto Final  AlterarAlterar  Copie o arquivo home.js para edit.js altere o que for necessário  Adicione o arquivo edit.js logo abaixo do add.js dentro do HTML do index.html
  144. 144. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 144144 Projeto FinalProjeto Final  AlterarAlterar  Adicione a seguinte função ao ListController $scope.edit = function (id) { $location.path('/edit/' + id); };
  145. 145. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 145145 Projeto FinalProjeto Final  AdicionarAdicionar  Substitua TODO o conteúdo do arquivo edit.js por: 'use strict'; app.controller('EditController', ['$scope', '$location', '$routeParams', 'BookmarkService', function($scope, $location, $routeParams, BookmarkService) { $scope.title = "Editar Bookmark"; var id = $routeParams.id; BookmarkService.get(id).then( function (data) { $scope.bookmark = data; }, function (error) { alert('Erro ao pegar Bookmark do servidor'); } ); $scope.save = function () { if ($scope.form.$valid) { BookmarkService.save($scope.bookmark).then( function (data) { alert('Bookmark salvo NOVAMENTE com sucesso'); $location.path('/list'); }, function (error) { console.log(error); alert('Erro ao salvar NOVAMENTE o Bookmark'); } ); } }; }]);
  146. 146. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 146146 Projeto FinalProjeto Final  AdicionarAdicionar  Adicione a função get no serviço do Bookmark ... return deferred.promise; }; services.get = function(id) { var deferred = $q.defer(); $http({ url : 'api/bookmark/' + id, method : "GET", }).success(function(data) { deferred.resolve(data); }).error(function(data, status) { deferred.reject([ data, status ]); }); return deferred.promise; }; return services; ...
  147. 147. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 147147 Projeto FinalProjeto Final  RemoverRemover  Adicione a seguinte função ao ListController $scope.delete = function (id) { BookmarkService.delete(id).then( function (data) { findAll(); }, function (error) { alert("Ocorreu um erro na requisição"); } ); };
  148. 148. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) 148148 Projeto FinalProjeto Final  RemoverRemover  Adicione a função delete no serviço do Bookmark ... return deferred.promise; }; services.delete = function(id) { var deferred = $q.defer(); $http({ url: 'api/bookmark/' + id, method: "DELETE" }).success(function(data) { deferred.resolve(data); }).error(function(data, status) { deferred.reject([data, status]); }); return deferred.promise; }; return services; ...
  149. 149. Curso Front-End (AngularJS + Bootstrap)Curso Front-End (AngularJS + Bootstrap) + Fim!Fim! Julian Cesar juliancesar@gmail.com http://juliancesar.com.br

×