Usaremos o AngularJS e o Bootstrap para desenvolver um exemplo de aplicativo front-end. Por meio dessa prática simples do projeto, levaremos todos ao Palácio do Desenvolvimento de Front-end AngularJS e apresentaremos alguns pontos de conhecimento para você:
1.MVC Basics, por meio de exemplos de projeto, deixe todos terem um entendimento preliminar da aplicação do modelo de design do MVC.
2. Construa nosso primeiro aplicativo angularJS. Através do desenvolvimento de um caso de uso prático, todos podem obter uma certa compreensão perceptiva do desenvolvimento do front-end.
3. Um entendimento preliminar dos três componentes mais importantes dos angulares, a saber, modelo, visão e controlador.
4. Compreensão preliminar do uso de objetos de escopo do AngularJS.
Introdução básica ao modo MVC:
MVC é um modelo de arquitetura da interface do usuário. Seu objetivo é decompor as funções dos aplicativos em módulos especiais, perceber a reutilização dos módulos, reduzir o acoplamento entre os módulos e aprimorar a robustez do sistema. O modo MVC é dividido principalmente em três partes:
Modelo: usado para armazenar dados do sistema
Visualização: usado para implementar a interface da interface do usuário do sistema
Controlador: usado para conectar o modelo e a exibição.
Na minha opinião, a melhor maneira de aprender é a prática. Desenvolveremos um exemplo de aplicativo front-end. Por um exemplo, por um lado, podemos aprofundar nossa compreensão da estrutura do AngularJS e, ao mesmo tempo, também podemos sentir como o modelo MVC está incorporado no processo de desenvolvimento.
Introdução do aplicativo (Caminho de código: http://xiazai.vevb.com/201608/yuanma/bootstrap-mooc(vevb.com).rar)
Faremos um aplicativo da web que adivinhe os números, com a interface da seguinte maneira:
O plano de fundo do aplicativo gerará aleatoriamente um número aleatório com um intervalo de 1 a 1000. O usuário insere o número adivinhado na caixa de texto. Se a entrada estiver correta, o aplicativo exibirá um prompt verde abaixo. Se estiver errado, por exemplo, o número de entrada é maior ou menor que o número gerado pelo plano de fundo, o aplicativo exibirá um prompt correspondente, por exemplo:
Os números mostrados na parte inferior indicam quantas vezes adivinhamos.
A estrutura do diretório de código de todo o aplicativo é a seguinte:
Como atualmente estamos trabalhando em um exemplo de aplicativo simples, montamos o código de cada módulo. No futuro, quando construímos aplicativos front-end em larga escala, teremos muito cuidado ao organizar a estrutura do diretório de código de todo o projeto.
Na composição do arquivo mostrada na figura acima, o Angular.js é o arquivo da estrutura no qual confiamos para desenvolver aplicativos, o bootstrap.min.css é o arquivo da biblioteca de interface usado para projetar a interface da interface do usuário e o númeroguessing.html será o principal arquivo de aplicativos que desejam desenvolver. Em seguida, adicionaremos o código ao NumberGuessing.html passo a passo e aumentaremos gradualmente as funções do aplicativo.
Primeiro de tudo, o que precisamos fazer é criar um modelo HTML simples. Neste modelo, podemos adicionar lentamente funções. O código do modelo é o seguinte:
<! DOCTYPE html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <title> adivinhe o número! src = "angular.js"> </script> </body> </html>
No código do modelo acima, observe que há uma linha "meta ... charset =" utf = 8 "
O objetivo desta linha é permitir que o navegador exiba corretamente os chineses. Se essa linha não estiver disponível, o navegador exibirá chinês. No modelo, primeiro introduzimos o código do código da estrutura e o código da biblioteca da interface da interface da interface a ser usado posteriormente. Depois de concluído, carregamos -o no navegador para ver se há algum erro. Se isso estiver correto, o que vemos atualmente é um espaço em branco:
Em seguida, desenvolveremos o código lógico de fundo do aplicativo e primeiro determinaremos algumas variáveis a serem usadas:
OriginalVal, usado para armazenar números aleatórios gerados
Userguess, armazene o número adivinhado atualmente inserido pelo usuário
Numoftries, registre quantas vezes o usuário tentou
Desvio: registre a diferença entre o número inserido pelo usuário e o número aleatório de segundo plano. Se o número inserido pelo usuário for grande, a definição> 0; A entrada é pequena, a definição <0; Se a entrada estiver correta, então a definição == 0
Implementação do módulo controlador
O controlador é usado para conectar os dois módulos de modelo e visualização, e a lógica de negócios do sistema também é implementada no controlador. Quando o usuário faz algumas operações na interface, como clicar em um botão e inserir conteúdo, o controlador recebe as informações correspondentes do lado da exibição e, em seguida, o controlador aciona a lógica de processamento de eventos correspondente. Por exemplo, depois que o usuário insere um número na interface, clica no botão OK, o controlador recebe o valor de entrada da visualização e, em seguida, retira o número aleatório gerado pelo aplicativo do modelo, compara -o com os dois hatchback e retorna o resultado da comparação à exibição. A visualização exibe as mudanças de interface correspondentes com base no valor de desvio retornado. Vamos ver como o corpo lógico do controlador é implementado:
function adivinhe o tumbercontroller ($ scope) {$ scope.VerifyGuess = function () {$ scope.Deancia = $ scope.originalVal - $ scope.UserGuess; $ scope.numoftries = $ scope.numoftries + 1; } $ scope.initializeGame = function () {$ scope.numoftries = 0; $ scope.originalval = math.floor ((math.random () * 1000) + 1); $ SCOPE.USERGUESS = NULL; $ SCOPE.DEVIÇÃO = NULL; } $ scope.initializeGame (); }A função de adivinhação do número de compra configura as propriedades numéricas do objeto Model. O significado desses valores foi mencionado anteriormente. Ao mesmo tempo, essa função do controlador também deriva duas chamadas de interface, uma é verificada. Quando o botão Confirmar na interface é clicado, o módulo de exibição chamará a interface para determinar se os dados inseridos pelo usuário estão corretos. Ao mesmo tempo, a chamada atualizará os valores dos dois atributos, desvio e numoftries.
InitializeGame é usado para inicializar todo o aplicativo do sistema, gerar números aleatórios primeiro e depois inicializar algumas variáveis para esvaziar.
Em nossa função do corpo do controlador, um parâmetro $ escopo é passado. Esse parâmetro é passado para nós por AngularJS. É basicamente equivalente a M no modo MVC, que é modelo. É semelhante a um banco de dados, usado especialmente para armazenar dados de aplicativos e código lógico. Como você pode ver, na chamada InitializeGame, o controlador coloca Numoftries, OriginalVal e outros dados no objeto $ SCOPE. Na chamada verificada, ele obtém esses dados do $ SCOPE para cálculo e modificação.
Depois que o código do controlador acima é adicionado ao nosso arquivo de modelo NumberGuessing.html, o resultado é o seguinte:
<! DOCTYPE html> <html> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <title> adivinhe o número! src = "angular.js"> </script> <script type = "text/javascript"> function adivinhethEnMumController ($ scope) {$ scope.VerifyGuess = function () {$ scope.deviação = $ scope.originalValValValVert = scope.userguess; $ scope.numoftries = $ scope.numoftries + 1; } $ scope.initializeGame = function () {$ scope.numoftries = 0; $ scope.originalval = math.floor ((math.random () * 1000) + 1); $ SCOPE.USERGUESS = NULL; $ SCOPE.DEVIÇÃO = NULL; } $ scope.initializeGame (); } </script> </body> </html>Design de interface do aplicativo para visualização de aplicativo
A visualização, isto é, a visualização no MVC, é realmente para exibir os dados no modelo através de uma interface gráfica. Nosso aplicativo atual é simples e baseado no princípio da simplicidade, a experiência do usuário do design da interface pode não ser muito boa, mas é suficiente para entender rapidamente como usar o AngularJS e o Bootstrap para criar rapidamente uma interface front-end para um programa.
Vamos dar uma olhada na construção da interface e integrar a lógica do controlador e da interface:
<corpo ng-app = "App"> <div ng --Controller = "adivinhe o tumberController"> <H2> Adivinhe o número! </h2> <p> Por favor, adivinhe o número aleatório gerado pelo computador, que varia de 1 a 1000. ng-click = "verifyGuess ()"> Confirm </botão> <button ng-click = "InitializeGame ()"> return </button> <p> <p ng-show = "desvio <0"> mr., Você lance muito alto! </p> <p ng-show = "desvio> 0"> meu homem, se você tiver menos, adicione mais pontos, adicione mais pontos.
C em MVC, isto é, controlador, é uma ponte entre a interface (visualização) e dados (modelo). Para associar esses três, precisamos incorporar os três à estrutura do AngularJS e, em seguida, confiar no mecanismo da estrutura do AngularJS para alcançar a interconexão entre os três.
Para incorporar a vista no AngularJS, a instrução Código acima:
<corpo ng-app = "app">
NG-APP Esta propriedade diz ao Angular que o código HTML na etiqueta corporal será incorporado como uma parte da visualização na estrutura de Angusjs, e "App" é usado como o valor da propriedade NG-APP para informar a estrutura do AngularJS para carregar um módulo chamado "App". Este módulo é equivalente a um armazém de armazenamento. Dividimos várias funções do aplicativo front-end em várias unidades. Essas unidades são armazenadas em um módulo chamado App. Controlador e modelo também são unidades funcionais. Mais tarde, veremos que eles serão adicionados ao módulo chamado App. A estrutura do AngularJS eliminará as duas unidades de controlador e modelo deste módulo para uso.
Em seguida, primeiro colocamos este módulo chamado App na estrutura do AngularJS, o código é o seguinte:
<script type = "text/javascript"> angular.module ('app', []) função adivinhethEnumberController ($ scope) {....} <cript>Dessa forma, temos um módulo chamado App na estrutura do AngularJS e associamos o módulo à interface através do ng-app = "App". Em seguida, precisamos colocar a unidade do controlador no módulo de aplicativos, o código é o seguinte:
<script type = "text/javascript"> angular.module ('App', []) .Controller ('adivinheNumberController', adivinhação, tumberController); function adivinhe o tumbercontroller ($ scope) {....} </script>A função angular.Module gera e retorna um objeto de módulo. Este objeto contém uma interface chamada controlador. Através dessa interface, a unidade funcional do controlador que desenvolvemos pode ser colocada no módulo. A partir do código acima, podemos ver que colocamos uma unidade de controlador no módulo. O nome desta unidade é o GUESTHENumberController, que é o primeiro parâmetro de entrada da função do controlador. O segundo parâmetro de entrada é o corpo lógico funcional da unidade do controlador, que é a função de adivinhação que desenvolveu o controlador que desenvolvemos anteriormente.
Depois de concluir as etapas acima, nosso aplicativo é desenvolvido. Neste momento, nosso HTML pode ser carregado no navegador, para que você possa ver o efeito específico.
Antes do final, vamos profundamente no código para ver como o AngularJS integra vários módulos para formar um aplicativo de front-end completo. No código, existem alguns símbolos e atributos especiais, símbolos especiais, como: {{}} e atributos especiais como: ng-app, ng controlador, etc. No contexto angular, {{e}} são chamados de símbolos de interpolação e propriedades de ng. As variáveis angulares convertem imprensadas em {{e}} em valores correspondentes a variáveis, como o seguinte snippet de código:
<p> O número de vezes que você adivinhou é: <pan> {{numoftries}} </span> <p>
Numoftries significa quantas vezes o usuário tentou adivinhar. Se o valor dos numoftries for 0, o AngularJS escapará do código acima como:
<p> O número de vezes que você adivinhou é: <pan> 0 </span> <p>
O navegador renderá a interface para a seguinte situação:
A Diretiva AngularJS é um ponto de conhecimento técnico complexo. Na discussão subsequente, discutiremos isso em detalhes. Aqui, apresentamos brevemente o papel da diretiva angularJS, que estende principalmente a função de sintaxe do HTML. As diretivas são as partes mais poderosas da estrutura do AngularJS. Vamos apresentar brevemente a diretiva AngularJS usada no código.
NG-Controller: Esta diretiva conecta o controlador e a exibição representada pelo HTML. Somente com esta diretiva a visualização pode acessar as variáveis e interfaces definidas pelo controlador. Você pode tentar colocá -lo no código.
ng-model = ng-controller = "adivinhe o número
Remova esta frase e veja qual é o resultado.
Modelo Ng: Variáveis bidirecionalmente ligadas no modelo com controles à vista, por exemplo:
<input type = "number" ng-model = "userGuess"/>
Esta instrução vincula a variável Userguess no modelo à caixa de texto de entrada na interface. Quando o valor na caixa de texto muda, o valor correspondente do UserGuess também muda. Pelo contrário, se o valor da adivinhação mudar em segundo plano, o conteúdo na caixa de texto também mudar de acordo.
NG-Clique: conecte os eventos de clique gerados pela interface com a lógica de processamento do controlador, por exemplo:
<Button ng-click = "verifyGuess ()"> Confirmar </butut>
O código acima conecta o botão "OK", clique em Evento com a função verifyguess () do controlador. Depois que o botão for clicado, a função será executada.
NG-SHOW: Usado para controlar se o controle usado para controlar a exibição a ser exibido. Se o valor da expressão correspondente do NG-SHOW for verdadeiro, o controle será exibido. Se for falso, o controle não será exibido. Por exemplo:
<P ng-show = "Desvio <0"> sr., seu lance é muito alto! </p>
A função do código acima é que, quando o valor da definição da variável é menor que 0, o conteúdo do elemento parágrafo P será exibido na interface.
AngularJS é uma estrutura de desenvolvimento de front-end poderosa, mas relativamente complexa. O papel do nosso exemplo é apenas ajudar todos a entender as poderosas funções dos angulares e primeiro obter um certo entendimento perceptivo, de modo a estabelecer uma base sólida para analisar e dominar racionalmente toda a tecnologia de desenvolvimento de front-end do AngularJS no futuro.
Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.