Please enable JavaScript.
Coggle requires JavaScript to display documents.
EmberJS - guides.emberjs.com/v2.18.0/getting-started/quick-start/…
EmberJS - guides.emberjs.com/v2.18.0/getting-started/quick-start/
Getting Started
1.1. Quick Start
Instalar EmberJS através do npm
A criação vai ser através da cli de um novo projeto, onde deve-se rodar o servidor e pode ser acessado pelo localhost
Toda mudança é detectada pelo servidor e o browser é recarregado
generators - Automatiza boilerplate para tarefas comuns
O EmberJS tb tem um comando para fazer build
1.2. Installing Ember
Ferramentas disponíveis:
Gerenciamento de aplicativos modernos
Generators para criar componentes, rotas e outros
Convenção de projeto de layout
Suporte a ES6 via Babel
Testes com QUnit
Vários addons
Dependencies - git, node, npm e watchman (opcional)
1.3. Core Concepts
Visão geral de como funciona:
Maps: URL -> Route
Loads: Route -> Model -> Template
Persists: Web Server
Loads & Accesses: Template -> Component
1.4. JavaScript Primer
Precisa de conhecimento prévio de ES6
Tutorial
2.1. Creating Your App
Usamos ember new nome-do-app
Estrutura de diretório:
app - E onde contém os arquivos e pastas para models, components, routes, templates e styles
config - Contém o environment.js onde configura o aplicativo
node_modules - Os modulos do node
public - Assets como imagens e fontes
vendor - Dependências que não dependem do npm
tests - Testes que iram rodar na aplicação
ember-cli-build - Descreve como dar build no app
ES6 modules são usados
Servidor de desenvolvimento - ember serve
2.2. Planning Your App
Ensina como planejar e inserir testes
2.3. Routes and Templates
ember generate route route-name - comando para se criar novas rotas
Rotas e templates devem ter o mesmo nome
Construído em 3 partes:
Entrada na rota /app/router.js
Rota manipula o arquivo /app/routes/about.js
Carrega o template app/templates/about.hbs
{{link-to}} - Criar links entre as rotas
Todos os route handler tem um lifycicle hooks
{{outlet}} - Onde o conteúdo da nossa rota atua deve ser mostrado
Podemos executar testes durante a chamada de rotas
Helpers test:
visit - Carrega quando visitar uma url
click - Carrega quando clicado em alguma parte
andThen - Aguardo por um comando
currentURL - Retorna a url atual
2.4. The Model Hook
{{each}} - Faz um loop em cada objeto do modelo
2.5. Installing Addons
Ember Observer website contém addons para a aplicação
2.6. Building a Simple Component
Componentes tem 2 partes:
Um template - app/templates/components/rental-listing.hbs
O comportamento - app/components/rental-listing.js
Componentes são testados com testes de integração
2.7. Creating a Handlebars Helper
Manipular data antes de ser usada
2.8. Using Ember Data
Biblioteca de gerenciamento de dados