129 | 8.7 [Instalação em Windows](chapters/08-recursos/08g-windows-setup.md) 130 | 131 | 132 | ## Contribuindo com a tradução 133 | 134 | [Aqui](https://github.com/IonicBrazil/ionic2-docs/blob/master/CONTRIBUTING.md) você pode visualizar o nosso guia de contribuição. 135 | 136 | Além disso, confira nosso [glossário](https://github.com/IonicBrazil/ionic2-docs/blob/master/glossario.md) para termos técnicos em inglês e suas traduções PT-BR. 137 | 138 | 139 | ## Informações 140 | 141 | * Documentação em [inglês](http://ionicframework.com/docs/v2/) 142 | -------------------------------------------------------------------------------- /chapters/02-componentes/2c-alertas.md: -------------------------------------------------------------------------------- 1 | # Alertas 2 | 3 | Alertas são uma ótima forma de oferecer ao usuário a habilidade de escolher uma ação específica ou uma lista de ações. Eles também podem prover ao usuário importantes informações ou requerer dele que tome uma decisão (ou várias decisões). 4 | 5 | De uma perspectiva de interface de usuário, você pode imaginar os alertas como um tipo de modal flutuante, que cobre apenas uma parte da tela. Isso significa que alertas apenas podem ser usados para rápidas ações como verificaçao de senhas, pequenas notificações ou ações rápidas. O fluxo mais complexo do usuário deve ser reservado para os [modais](/chapters/02-componentes/) de tela cheia. 6 | 7 | Alertas são bastante flexíveis, e podem ser customizados facilmente. Dê uma olhada em [API docs](/chapters/07-api/) para mais informações. 8 | 9 | * Contents 10 | * Basic Alerts 11 | * Prompt Alerts 12 | * Confirmation Alerts 13 | * Radio Alerts 14 | * Checkbox Alerts 15 | 16 | ## Utilização básica: 17 | 18 | Alertas básicos são geralmente usados para notificar o usuário sobre novas informações (uma modificação no app, uma nova funcionalidade), uma situação urgente que requer reconhecimento, ou como uma confirmação para o usuário que uma ação teve sucesso ou não. 19 | 20 | ``` ts 21 | doAlert() { 22 | let alert = Alert.create({ 23 | title: 'New Friend!', 24 | subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!', 25 | buttons: ['Ok'] 26 | }); 27 | this.nav.present(alert); 28 | } 29 | ``` 30 | 31 | ## Prompt Alerta 32 | 33 | Prompt Alerta oferece ao usuário uma forma de fazer entrada de dados ou informações. Por exemplo, muitas vezes o Prompt Alerta será usado para perguntar ao usuário por confirmação de sua senha como uma forma de segurança antes de continuar seguindo o fluxo do app. 34 | 35 | 36 | ``` ts 37 | let prompt = Alert.create({ 38 | title: 'Login', 39 | message: "Enter a name for this new album you're so keen on adding", 40 | inputs: [ 41 | { 42 | name: 'title', 43 | placeholder: 'Title' 44 | }, 45 | ], 46 | buttons: [ 47 | { 48 | text: 'Cancel', 49 | handler: data => { 50 | console.log('Cancel clicked'); 51 | } 52 | }, 53 | { 54 | text: 'Save', 55 | handler: data => { 56 | console.log('Saved clicked'); 57 | } 58 | } 59 | ] 60 | }); 61 | ``` 62 | 63 | ## Alertas de confirmação 64 | 65 | Alertas de Confirmação são usados quando é requerido explicitamente que o usuário confirme uma certa escolha depois do processamento ser feito no app. Um exemplo comum desse tipo de alerta é a checagem se o usuário tem certeza se deseja apagar ou remover um contato da sua lista de contatos. 66 | 67 | ``` ts 68 | let confirm = Alert.create({ 69 | title: 'Use this lightsaber?', 70 | message: 'Do you agree to use this lightsaber to do good across the intergalactic galaxy?', 71 | buttons: [ 72 | { 73 | text: 'Disagree', 74 | handler: () => { 75 | console.log('Disagree clicked'); 76 | } 77 | }, 78 | { 79 | text: 'Agree', 80 | handler: () => { 81 | console.log('Agree clicked'); 82 | } 83 | } 84 | ] 85 | }); 86 | ``` 87 | 88 | ## Radio Alerta 89 | 90 | Radio Alerta é outro tipo simples de Alerta de Confirmação, porém use esse componente quando quizer oferecer várias escolhas. Ele oferece ao usuário uma lista de opções à serem escolhidas, mas permite apenas uma escolha final, antes de continuar seguindo em frente. 91 | 92 | ``` ts 93 | doRadio() { 94 | let alert = Alert.create(); 95 | alert.setTitle('Lightsaber color'); 96 | 97 | alert.addInput({ 98 | type: 'radio', 99 | label: 'Blue', 100 | value: 'blue', 101 | checked: true 102 | }); 103 | 104 | alert.addButton('Cancel'); 105 | alert.addButton({ 106 | text: 'Ok', 107 | handler: data => { 108 | this.testRadioOpen = false; 109 | this.testRadioResult = data; 110 | } 111 | }); 112 | ``` 113 | 114 | ## Checkbox Alerta 115 | 116 | Checkbox Alerta é um outro tipo de Alerta de Confirmação, mas use o componente de Checkbox para oferecer várias escolhas. Ele oferece ao usuário uma lista de opções que podem ser escolhidas. 117 | 118 | ``` ts 119 | doCheckbox() { 120 | let alert = Alert.create(); 121 | alert.setTitle('Which planets have you visited?'); 122 | 123 | alert.addInput({ 124 | type: 'checkbox', 125 | label: 'Alderaan', 126 | value: 'value1', 127 | checked: true 128 | }); 129 | 130 | alert.addInput({ 131 | type: 'checkbox', 132 | label: 'Bespin', 133 | value: 'value2' 134 | }); 135 | 136 | alert.addButton('Cancel'); 137 | alert.addButton({ 138 | text: 'Okay', 139 | handler: data => { 140 | console.log('Checkbox data:', data); 141 | this.testCheckboxOpen = false; 142 | this.testCheckboxResult = data; 143 | } 144 | }); 145 | } 146 | ``` 147 | -------------------------------------------------------------------------------- /chapters/01-introducao/01d-migration.md: -------------------------------------------------------------------------------- 1 | # 1.4 Conceitos de Migração 2 | 3 | Ionic 2 é construído em cima de Angular 2, que é uma reescrita completa do framework original. Todas as partes do Angular que você conhece ainda estão lá, mas há nova sintaxe e as mudanças estruturais sobre os quais os desenvolvedores precisam estar cientes. Para uma visão geral das mudanças no Angular 2, dê uma olhada em [Aprenda Angular 2](http://learnangular2.com/). 4 | 5 | Em Ionic 2, devem se sentir muito familiar com as coisas. Todos os conceitos de Ionic V1 ainda estão na V2, embora eles podem ser ligeiramente diferentes. Você ainda tem visões e controladores como você faz na V1, mas em V2, elas foram fundidas em uma instância. 6 | 7 | Veja este exemplo V1. 8 | 9 | V1 10 | 11 | ```ts 12 | .config(function($stateProvider){ 13 | $stateProvider 14 | .state('main', { 15 | url: '/', 16 | templateUrl: 'templates/main.html', 17 | controller: 'MainCtrl' 18 | }) 19 | }) 20 | 21 | .controller('MainCtrl', function(){ 22 | 23 | }) 24 | ``` 25 | 26 | Você pode escrever isso em V2 como este: 27 | 28 | ```ts 29 | @Page({ 30 | templateUrl:'main/main.html' 31 | }) 32 | export class MainCmp { 33 | constructor(){ 34 | 35 | } 36 | } 37 | ``` 38 | 39 | Outras mudanças, como mudanças de navegação, são muito diferentes, mas por boas razões, como nós prometemos. Agora, você pode tratar componentes como pontos de vista arbitrários e navegar por eles do jeito que você quiser. Isto torna a navegação muito mais flexível e permite pilhas de navegação muito mais nativa de estilo. 40 | 41 | # Migrando do Angular 1 42 | 43 | Enquanto Angular 2 requer aplicativos para ser atualizado para a mudança de sintaxe, os desenvolvedores podem ser pró-ativos e certificar se o seu aplicativo é atualizável, seguindo as melhores práticas e trabalhar com o guia Angular Style de John Papa ou o guia Angular Style de Todd Motto. Ambos irão fornecer-lhe os passos necessários para preparar seu código para a migração. 44 | 45 | ## ControllerAs Syntax 46 | 47 | ControllerAs Syntax é um recurso do Angular 1.x aonde ao invés de você ligar dados para **$scope**, você pode ligar para a instância direta do controlador, como alternativa. Isso faz com que a migração de um controlador de Angular 1.x para uma classe Angular 2 seja muito mais fácil. É bastante fácil migrar para controllerAs de um controlador tradicional: 48 | 49 | _index.html_ 50 | 51 | ```ts 52 |
100 | 105 | O grupo industrial mais popular de todos os tempos e em grande parte 106 | responsável por trazer a música para uma audiência em massa. 107 |
108 |
123 | São Paulo
124 | 41 Listings
125 | 
129 | Amsterdam
130 | 64 Listings
131 | 
135 | San Francisco
136 | 72 Listings
137 | 
141 | Madison
142 | 28 Listings
143 | 
196 | Marty McFly
198 |November 5, 1955
199 |
202 |
203 | Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.
205 |
232 |
235 |
236 | Museum of Football
239 |11 N. Way St, Madison, WI 53703
240 |Institute of Fine Cocktails
245 |14 S. Hop Avenue, Madison, WI 53703
246 |Solucionando problemas no seu aplicativo Ionic
2 | 3 | Não consegue encontrar uma solução nesta página? Confira o [fórum oficial do Ionic](http://forum.ionicframework.com), onde os amigáveis Ionites da comunidade podem lhe ajudar! 4 | 5 |Ajuda! A tela do meu aplicativo está em branco e não aparecem erros
6 | 7 | - Garanta que seu @App tenha `template` ou `templateUrl` 8 | - Garanta que o template do seu @App tenha um elemento `Meu componente ou diretiva não está carregando!
14 | 15 | Você pode fazer algumas verificações caso seu componente ou diretiva não estiver funcionando. Certifique-se que: 16 | 17 | - o componente/diretiva foi incluído no array de `directives` de quaisquer componentes cujo template contém o item com problema 18 | - seu seletor não tenha erros de ortografia 19 | - você esteja utilizando o seletor corretamente, como um atributo, elemento ou classe CSS 20 | - seu seletor tenha uma [sintaxe apropriada](http://learnangular2.com/components/): 21 | - `[attr]` se é um seletor de atributo 22 | - `element` se é um seletor de elemento 23 | - `.class` se é um seletor de classe CSS 24 | 25 | ```ts 26 | @Directive({ 27 | selector: '[my-dir]' // <-- [my-dir] porque é um atributo 28 | }) // Poderia ser my-dir, [my-dir], .my-dir 29 | class MyDir { 30 | constructor(){ console.log("Estou vivo!"); } 31 | } 32 | 33 | @Page({ 34 | template: `Hello World
`
35 |
36 | // Ou, dependendo do tipo da sua diretiva
37 | //template: `Hello World
`
39 |
40 | directives: [MyDir] // <-- Não me esqueça!
41 | })
42 | class MyPage {}
43 | ```
44 |
45 | Erros comuns:
46 | 47 | - Esquecer `()` depois de uma anotação: `@Injectable()`, `@Optional()`, etc. 48 | 49 | ```ts 50 | @Directive({ 51 | selector: 'my-dir' 52 | }) 53 | class MyDirective { 54 | // Errado, deveria ser @Optional() 55 | // Neste caso @Optional faz nada, então MyDirective lançará um erro se parent estiver indefinido 56 | constructor(@Optional parent: ParentComponent) {} 57 | } 58 | ``` 59 | 60 | - Adicionar provedores (providers) para cada componente quando na verdade você deseja ter a mesma instância de provedor injetada em todos (por exemplo serviços). Para uma classe ser injetável ela apenas precisa estar no array de `providers` do componente ou qualquer componente pai (por exemplo `@App`), mas não em ambos. Colocá-la tanto no componente que tem aquele provedor injetado quanto no componente-pai ou acima na hierarquia criará duas instâncias separadas do provedor. O exemplo abaixo demonstra esse problema: 61 | 62 | ```ts 63 | let id = 0; 64 | class MyService { 65 | constructor(){ this.id = id++; } 66 | } 67 | 68 | @Component({ 69 | selector: 'my-component', 70 | template: 'Hello World', 71 | providers: [MyService] // <-- Cria uma nova instância de MyService :( 72 | }) // Desnecessário pois MyService está no providers do App 73 | class MyComp { 74 | // id é 1, s é uma instância de MyService diferente daquela que está em MyApp 75 | constructor(s: MyService) { console.log("MyService id é: " + s.id); } 76 | } 77 | 78 | @App({ 79 | template: 'Erros comuns de JS:
91 | 92 | `Cannot resolve all parameters for YourClass(?). Make sure they all have valid type or annotations.` 93 | 94 | Também pode ser precidido por `Error during instantiation of Token(Promise
122 |
`
125 | directives: [forwardRef(() => MyIcon)] // MyIcon ainda não foi definida
126 | }) // forwardRef vai resolver a dependência de MyIcon quando MyIcon for utilizada
127 |
128 | @Directive({
129 | selector: 'icon'
130 | })
131 | class MyIcon {
132 | constructor(containerButton: MyButton) {} // MyButton foi definida
133 | }
134 | ```
135 |
136 | -------
137 |
138 | `No provider for ParamType! (MyClass -> ParamType)`
139 |
140 | Isso significa que o Angular sabe qual o tipo do objeto que deveria injetar, mas não sabe como injetá-lo. Certifique-se que:
141 |
142 | - caso o parâmetro seja um serviço, você tenha adicionado a classe especificada à lista de provedores disponíveis no seu aplicativo
143 |
144 |
145 | ```ts
146 | import {MyService} from 'myservice';
147 |
148 | @App({
149 | templateUrl: 'app/app.html',
150 | providers: [MyService] // Não me esqueça!
151 | })
152 | class MyApp {
153 | ```
154 |
155 | Caso o parâmetro seja outro componente ou diretiva (por exemplo, um componente-pai), adicioná-lo à lista de providers fará com que o erro suma, mas causará o mesmo efeito que o item #2 da seção [Erros comuns](#Common_mistakes) acima. Ou seja, você criará uma nova instância da classe do componente (pense nisso como um "processo de transformação" do seu componente em um serviço), mas na verdade você não receberá a referência para a instância que deseja (aquela obtida durante a compilação do seu aplicativo, feita pelo Angular). Invés disso, certifique-se que a diretiva ou componente que você espera ser injetada esteja disponível para o seu componente (exemplo: que realmente seja um componente-pai se você está esperando que seja um pai). Veja o código abaixo para facilitar o entendimento:
156 |
157 | ```ts
158 | @Component({
159 | selector: 'my-comp'
160 | template: '',
161 | directives: [forwardRef(() => MyDir)]
162 | })
163 | class MyComp {
164 | constructor(){ this.name = "Meu Component"; }
165 | }
166 |
167 | @Directive({
168 | selector: '[my-dir]'
169 | })
170 | class MyDir {
171 | constructor(c: MyComp) { <-- Esse é o ponto de interesse do exemplo
172 |
173 | // Ocorrerá erros quando a diretiva estiver em uma div normal por que não existe MyComp
174 | // na árvore de componentes então não há o que injetar
175 | console.log("Nome do componente host: " + c.name);
176 | }
177 | }
178 |
179 | @App({
180 | template: "