Agora estamos nos preparando para escrever o aplicativo AngularJS - Phonecat. Nesta etapa (etapa 0), você se familiarizará com os importantes arquivos de código -fonte, aprenderá a iniciar um ambiente de desenvolvimento contendo projetos de sementes do AngularJS e executará o aplicativo no lado do navegador.
Digite o diretório angular-phonecat e execute o seguinte comando:
checkout git -f etapa -0
Este comando redefinirá o diretório de trabalho do projeto Phonecat. É recomendável que você execute este comando em cada etapa de aprendizado, altere o número no comando para o número correspondente à etapa de aprendizado e o comando limpará todas as alterações que você fez no diretório de trabalho.
Execute o seguinte comando:
scripts de nó/web-server.js
Para iniciar o servidor, o terminal da linha de comando solicitará o servidor HTTP em execução em http: // localhost: 8000. Por favor, não feche o terminal. Fechar o terminal fechará o servidor. Digite http: // localhost: 8000/app/index.html no seu navegador para acessar nosso aplicativo Phonecat.
Agora, no navegador, você deveria ter visto nosso aplicativo inicial, o que é simples, mas significa que nosso projeto está pronto para ser executado.
O "Nada aqui ainda!" Exibido no aplicativo é construído a partir do código HTML a seguir, que contém os elementos -chave do AngularJs, que é exatamente o que precisamos aprender.
app/index.html
<! doctype html> <html lang = "en" ng-app> <head> <meta charset = "utf-8"> <title> meu arquivo html </title> <link rel = "stylesheet" href = "css/app.cs"> <link Rel = "Stylesheet" src = "lib/angular/angular.js"> </script> </ad Head> <body> <p> nada aqui {{'ainda' + '!'}} </p> </body> </html>O que o código está fazendo?
Diretiva Ng-App:
<html lang = "en" ng-app>
A diretiva NG-App marca o escopo do script angularJS. Adicionar o atributo ng-app em <html> significa que todo o script <html> é o escopo do angularjs. Os desenvolvedores também podem usar as diretrizes NG-APP localmente, como <Div Ng-App>, e os scripts AngularJS são executados apenas nesse <div>.
Tag de script angularjs:
<script src = "lib/angular/angular.js"> </script>
Esta linha de código é carregada no script angular.js. Quando o navegador carrega toda a página HTML, o script Angular.js será executado. Depois que o script angular.js for executado, ele procurará uma tag HTML contendo a diretiva NG-APP. Esta tag define o escopo do aplicativo AngularJS.
Brace duplo Expressão limitada:
<p> Nada aqui {{'ainda' + '!'}} </p>
Esta linha de código demonstra a função principal do modelo AngularJS - ligação, que consiste em aparelhos duplos {{}} e a expressão 'ainda' + '!'.
Essa ligação diz ao AngularJS que precisa calcular as expressões e inserir o resultado no DOM. Nas próximas etapas, veremos que o DOM pode ser atualizado em tempo real à medida que a operação da expressão muda.
A expressão da expressão de AngularJS é um trecho do tipo JavaScript, as expressões de AngularJS são executadas apenas no escopo dos angulares, não em todo o DOM.
Inicialize o aplicativo AngularJS
A inicialização automática de aplicativos AngularJS através das Diretivas NGAPP é uma maneira concisa de se adequar à maioria das situações. No desenvolvimento avançado, como o uso de scripts para carregar um aplicativo, você também pode usar o Bootstrap para inicializar manualmente os aplicativos AngularJS.
Existem três pontos importantes no processo de inicialização do aplicativo AngularJS:
1. O injetor usará para criar injeção de dependência para este aplicativo;
2. O injetor criará o escopo da raiz como o escopo do nosso modelo de aplicativo;
3. AngularJS vinculará o DOM no escopo da raiz, começando com as tags HTML marcadas com o NGAPP e lidando gradualmente com diretrizes e ligações no DOM.
Depois que o aplicativo AngularJS for inicializado, ele continuará ouvindo os eventos de acionamento HTML do navegador, como eventos de cliques de mouse, eventos de imprensa de chaves, respostas recebidas HTTP etc. que alteram o modelo DOM. Quando esses eventos ocorrem, o AngularJS detectará automaticamente alterações e fará o processamento e as atualizações correspondentes.
A estrutura do aplicativo acima é muito simples. O pacote de modelo contém apenas uma diretiva e uma ligação estática, e o modelo também está vazio. Em seguida, vamos tentar um aplicativo um pouco mais complexo!
O que esses arquivos no meu diretório de trabalho fazem?
O aplicativo acima vem do Projeto AngularJS Seed, geralmente podemos usar o AngularJS Seed Project para criar novos projetos. O projeto de semente inclui a mais recente base de código do AngularJS, biblioteca de testes, scripts e um exemplo simples de aplicativo que contém a configuração básica necessária para desenvolver um aplicativo típico da Web.
Para este tutorial, fizemos as seguintes alterações no projeto AngularJS Seed:
Excluir o aplicativo de amostra;
prática
Tente adicionar uma nova expressão sobre operações matemáticas ao index.html:
<p> 1 + 2 = {{1 + 2}} </p>
Resumir
Agora vamos para a etapa 1 e adicionar algum conteúdo ao aplicativo da web.
O exposto acima está as informações que classificam o carregador de inicialização do AngularJS. Continuaremos a adicionar informações relevantes no futuro. Obrigado pelo seu apoio a este site!