Workshop Mundo Senai - Hello, Angular.js
•Transferir como PPTX, PDF•
2 gostaram•1,639 visualizações
O documento apresenta Fabio Elisio, um desenvolvedor front-end com experiência desde 2000. Ele descreve brevemente suas qualificações e sites antes de resumir os principais conceitos do AngularJS, incluindo módulos, controladores, diretivas e estrutura de pastas. Finalmente, explica como criar módulos e controladores em Angular.
Recomendados
Mais conteúdo relacionado
Destaque
Destaque (20)
Semelhante a Workshop Mundo Senai - Hello, Angular.js
Semelhante a Workshop Mundo Senai - Hello, Angular.js (20)
Workshop Mundo Senai - Hello, Angular.js
- 2. Fabio Elisio de Melo Nunes Trabalho na area desde 2000 Microsoft Certified HTML5, Javascript, CSS3 Analista de Sistemas – SENAI – NQTS - Front github.com/felisio www.fabioelisio.com
- 3. Modelo e arquitetura Definições Modulos e Controllers
- 5. Web Server Web Browser URL requisição para o server Resposta com Paginas e Arquivos Eventos, links e novas requisições Resposta com Paginas e Arquivos HTML Javascript Browser carrega conteudo e arquivos (html, css, js) HTML Javascript Browser carrega conteudo e arquivos (html, css, js)
- 6. Web Server Web Browser URL requisição para o server Resposta com Paginas e Arquivos Eventos, links e novas requisições Resposta com dados formato JSON HTML Javascript Browser carrega conteudo e arquivos (html, css, js) Dados JSON Dados são lidos na pagina Carregada.
- 9. Definições
- 10. Um Framework Javascript client-side para adicionar interatividade ao HTML. Conceito de Aplicação “Single Page” – Recursos são carregados dinamicamente e incluido na Pagina. Más como chamar esse Javascript Dentro do HTML
- 11. • Escrever nossa aplicação Angular em pequenas peças. • Deixar o nosso código mais reutilizável, testável, e legível. • Onde definimos as dependências para o nosso aplicativo. M Módulos são utilizados por outros módulos M M
- 12. Diretiva pode ser uma tag ou um atributo HTML que diz ao Angular para executar ou fazer uma referência a um código Javascript .
- 13. • ng-app – Define o modulo da aplicação • ng-controller – Define um controller em determinada parte da aplicação • ng-model – associa o valor de um componente a uma propriedade na view model (geralmente adicionado nos elementtos de form) • ng-click – invoca um metodo no controller ao clicar no componente • ng-repeat – equivalente ao foreach, repete o conteudo para cada item de uma array na view model • ….
- 14. Estrutura de Pasta (https://github.com/angular/angular-seed)
- 16. Carrega arquivos no index.html Chamando primeiro modulo Incluindo diretiva no HTML
- 17. Carregando Rota Padrão Carregando Rota especifica do Modulo
- 18. Criando seu modulo Carregando controlador do Modulo Testando – agenda.html
- 19. Magia do Two-way-binding $rootScope > $scope $watch, $watchCollection, $on, $emit e $broadcast
- 20. Criando um objeto no controller Imprimindo no HTML
- 21. Criando um array de objetos no controller Imprimindo no HTML com a diretiva ng-repeat
- 22. Criando formulario para inserção de dados e pegando com a diretiva ng-submit Criando metodo no controller para inserir o dado
- 23. Criando linha na lista com o metodo para removerc Criando metodo no controller para remover o dado
- 24. Criação de diretivas customizadas JQLite embutido no framework Abstração de requisições RESTFull com o $resource Criação de Services e Factory Grande quantidade de modulos criado pelas comunidades …
- 26. Obrigado! www.github.com/felisio @felisio fabio.elisio@gmail.com www.fabioelisio.com
Notas do Editor
- ----- Meeting Notes (18/11/14 12:23) ----- falar sobre o ciclo time do angular, com dois estados config e run
- Encapsulam comportamentos e são reutilizaveis Deixa o HTML mais limpo
- ----- Meeting Notes (18/11/14 12:23) ----- falar das depencias ngRoute e myApp.agenda
- Isolated Scope Algumas diretivas podem requisitar um tipo especial de escopo, que não herda propriedades do $rootScope. Essas diretivas ainda têm ligação com o root, somente a herança por protótipo que muda.
- Inserir comentario sobre uso de estancia do proprio controller para ser carregado no html
- Inserir comentario sobre uso de estancia do proprio controller para ser carregado no html
- Inserir comentario o data-bind e o uso do angular.copy para zerar o objeto do escopo
- Inserir comentario o data-bind e o uso do angular.copy para zerar o objeto do escopo
- Falar como o framework ja é difundido e usado pela comunidade de desenvolvedores Front End
- Falar como o framework ja é difundido e usado pela comunidade de desenvolvedores Front End
- Falar como o framework ja é difundido e usado pela comunidade de desenvolvedores Front End