1. Começando
O Angular JS é um conjunto de estruturas, modelos, ligação de dados e componentes ricos da interface do usuário usados para desenvolver páginas da Web. Ele fornece a arquitetura de aplicativos da Web sem operações manuais de DOM. AngularJS é muito pequeno, apenas 60k, compatível com os navegadores convencionais e funciona bem com o JQuery.
2. Compreendendo os princípios básicos
① Algumas introduções ao angular
1. Conhecimento básico
1. Ongular desistiu do IE8
2. Os quatro pontos principais são MVC, modularidade, sistema de instruções e ligação de dados bidirecionais
2. Alguns princípios
1. Não reutilize o controlador. Um controlador geralmente é responsável apenas por uma pequena parte de vista.
2. Não opere DOM no controlador.
3. Não formate os dados no Controllerller, o NG possui bons controles de forma.
4. Não faça operações de filtragem de dados no controlador, existe um serviço $ filtro.
5. De um modo geral, os controladores não se ligarão e a interação entre os controladores será realizada através de eventos.
6. Ongular usa instruções para reutilizar a visualização.
7. $ SCOPE é uma estrutura de árvore que é paralela à tag DOM.
8. O objeto Child $ SCOPE herdará as propriedades e métodos no escopo dos pais.
9. Cada aplicação angular possui apenas um objeto $ Rootscope. (Geralmente localizado no NG-App).
10. Você pode usar o Angular.Element ($ 0) .Scope () para depurar.
11. Use o NGROUTE para roteamento entre as visualizações.
3. As instruções internas mais usadas e práticas de angulares para páginas HTML
①.NG-Class (adequado para situações em que um determinado estilo, como curtidas e atenção, mudará devido a uma determinada operação)
A diretiva da classe NG é usada para ligar dinamicamente uma ou mais classes CSS aos elementos HTML. O valor da diretiva da classe ng pode ser uma string, um objeto ou uma matriz.
Se for uma string, vários nomes de classe são separados por espaços.
Se for um objeto, você precisa usar um par de valores-chave, que é um valor booleano, e o valor é o nome da classe que você deseja adicionar. A classe só será adicionada se a chave for verdadeira.
Se for uma matriz, pode ser composto de cordas ou combinações de objetos, e os elementos da matriz podem ser strings ou objetos.
Duas maneiras recomendadas de usar:
1. Na forma de uma string, o código é o seguinte:
<i ng-class = "{true: 'on-ios-heart', false: 'on-ios-hart-outline'} [AccountInfo.isfocus]" ng-click = 'wetherfocus ()'> </i>Isso significa que a tag I possui um ícone básico de classe, NG-Class, que liga uma classe dinâmica. O valor desta classe é determinado se o AccountInfo.isfocus é verdadeiro ou falso. Se o seu valor for verdadeiro, a tag I acrescentará a classe ion-Iios-Heart. Se o seu valor for falso, a tag i adicionará a linha de coração ion-ios-Heart. Se o seu valor for falso, a tag i adicionará a linha de coração ion-ios-Heart.
Esta categoria. A tag It também liga um evento NG-Click. Além de lidar com a lógica correspondente, o valor do AccountInfo.isfocus também é determinado. Dessa forma, quando ocorre uma operação de clique, a classe correspondente da tag i será naturalmente alterada e, em seguida, diferentes estilos serão mostrados.
2. O estilo de valor-chave, o código é o seguinte:
<i ng-class = "{'on-ios-heart': ISIOS, 'ion-android-Heart': isandroid}"> </i>Obviamente, a partir do código, podemos ver que esse significado é que quando o ISIOS é verdadeiro, a classe ion-ios-Heart será realizada e quando o valor do isandroid é verdadeiro, a classe Ion-Android-Heart será realizada.
②.ng-show e ng-hide (adequado para exibir dois conteúdos diferentes para diferentes situações)
A diretiva NG-SHOW exibe o elemento HTML especificado quando a expressão é verdadeira, caso contrário, oculta o elemento HTML especificado.
A diretiva Ng-Hide oculta o elemento HTML especificado quando a expressão é verdadeira, caso contrário, o elemento HTML especificado é exibido.
Haha, parece um irmão que é incompatível com água e fogo. . . .
Exemplos são os seguintes:
<div> <span ng-click = "TogGleMenu ()"> </span> </div> <div> <ul ng-show = "Menustate"> ... </ul> <div ng-hide = "Menustate"> ... </div>
Defina uma variável booleana Menustate (no desenvolvimento real, você pode usar expressões, equações de trilogia etc.). Quando for verdadeiro, o conteúdo do NG-SHOW será exibido e o conteúdo do NG-Hide será oculto. Caso contrário, o oposto é verdadeiro. . .
③.ng-switch (adequado para exibir conteúdo diferente em várias situações)
A diretiva ng-switch exibe ou oculta a parte correspondente de acordo com a expressão.
Os elementos infantis correspondentes usam a diretiva NG-Switch-quando. Se a correspondência for selecionada, selecione a tela e os outros serão removidos.
Ao definir as opções padrão usando a diretiva NG-Switch-Default, as opções padrão serão exibidas se nenhuma delas corresponder.
exemplo:
<div ng ng-switch = "EssayType"> <div ng-switch-when = "4"> ..... </div> <div ng-switch-when = "3"> ... </div> <div ng-switch-when = "1"> ...
Model.
A diretiva do modelo NG liga os elementos de forma HTML na variável de escopo.
Se não houver variável no escopo, ela será criada. Modelo Ng é comumente usado em <input>, <select>, <sexttarea> e outros elementos.
O seguinte código:
<div> <textarea name = "my-massage-detail" ng-model = "content" placeholder = "Por favor, insira uma mensagem"> </sexttarea> <ang-click = "submitmes ()"> submeter </a> <br> </div>
Por definição, teoricamente falando, quando enviamos, não há problema em obter diretamente o valor do modelo NG definido na página no controlador. Mas, na verdade, isso não é viável. Os testes pessoais descobriram que uma saída indefinida era em saída e, se o valor inicial do modelo NG for definido no controlador, o valor inicial será obtido em vez do valor mais recente após a mudança.
Eu procurei algumas informações, o que significa aproximadamente. Limites angulares algumas de nossas definições. Só podemos usar um objeto não primitivo para passar os parâmetros.
O que isso significa? Uma pequena mudança no exemplo acima, como segue:
Código HTML:
<div> <textarea name = "my-massage-detail" ng-model = "model.content" placeholder = "por favor, digite uma mensagem"> </sexttarea> <ang-click = "submitmes ()"> submeter </a> </dn>
Código do controlador:
$ scope.model = {}; $ scope.model.content = ''; $ scope.submitmes = function () {console.log ($ scope.model.content);}Ou seja, definimos um objeto e, em seguida, definimos o modelo NG como uma propriedade nesse objeto para lidar com ele. Dessa forma, obtemos o valor mais recente do modelo NG.
Outra maneira simples é apenas passar o modelo NG como um parâmetro nele.
Exemplos são os seguintes:
// Código html <input type = "text" ng-model = "code"> <botão ng-click = "setCode (code)"> login </button> <br> // Código do controlador $ scope.setCode = function (code) {alert (code);}4. Habilidades práticas para interação de dados
①Use de promessa
ES6 define o objeto de promessa. Este objeto é muito útil, especialmente ao interagir com o plano de fundo. Não apenas impede que os retornos de chamada sejam muito profundos, mas também podem ser tratados uniformemente por algumas situações e também melhora a legibilidade do código. Esse serviço também é encapsulado no AngularJS, que é $ q.
O $ Q existe como um serviço do AngularJS e é apenas uma implementação simplificada do modo de programação assíncrono da promessa. O objeto de adiamento (objeto de atraso) pode ser obtido através de $ q.defer (). Existem três métodos para este objeto:
Resolve (valor): envie uma mensagem para o órgão de execução assíncrona do objeto Promise e diz a ele que concluí com êxito a tarefa, e o valor é a mensagem enviada.
Rejeitar (Value): Envie uma mensagem para o órgão de execução assíncrona do objeto Promise e diz a ele que é impossível concluir esta tarefa. O valor é a mensagem enviada.
Notificar (Valor): Envie uma mensagem para o órgão de execução assíncrona do objeto Promise para lhe dizer a conclusão atual da tarefa. O valor é a mensagem enviada.
Depois de enviar essas mensagens, a função de retorno de chamada existente será chamada.
A promessa é o objeto de promessa com este objeto de adiamento. O objeto de promessa pode ser obtido por meio de adiamento.
Então (SuccessCallback, ErrorCallback, NotifyCallback): Os parâmetros são diferentes funções de retorno de chamada sob diferentes mensagens. A adiar envia mensagens diferentes para executar diferentes funções de retorno de chamada. As mensagens são passadas como parâmetros dessas funções de retorno de chamada. O valor de retorno está de volta a um objeto de promessa que existe em apoio a chamadas de cadeia. Quando o primeiro objeto de adiamento envia uma mensagem, o objeto de adiamento correspondente da promessa subsequente também enviará uma mensagem, mas as mensagens enviadas são diferentes. Não importa se o primeiro objeto de adiamento envia rejeitar ou resolver, o segundo e posterior são enviados resolvidos e a mensagem é transitável.
Catch (ErrorCallback): então (NULL, ErrorCallback).
Finalmente (retorno de chamada): equivalente à abreviação de então (retorno de chamada, retorno de chamada). O método finalmente não aceita parâmetros, mas pode passar com sucesso a mensagem e o tipo de mensagem enviados por adiar para o próximo.
adefer (): usado para gerar um objeto de atraso var difer = $ q.defer ();
rejeit (): O parâmetro recebe uma mensagem de erro, que é equivalente a lançar uma exceção na função de retorno de chamada e, em seguida, chamando a função de retorno de chamada errado na próxima.
Todos (): o parâmetro é recebido como uma matriz de promessa e um novo objeto de promessa única é retornada. Quando todos os objetos de adiamento correspondentes desses objetos de promessa forem resolvidos, esse objeto de promessa única será resolvida. Quando um desses objetos de promessa é rejeitado, essa única promessa também é rejeitada.
Quando (): recebe o primeiro parâmetro como um valor arbitrário ou um objeto de promessa, e os outros 3, em seguida, os métodos da mesma promessa, e o valor de retorno é um objeto de promessa. Se o primeiro parâmetro não for um objeto de promessa, o retorno de chamada de sucesso será executado diretamente e a mensagem é esse objeto. Se for uma promessa, a promessa devolvida é na verdade um invólucro para o argumento desse tipo de promessa. A mensagem enviada pelo difer correspondente à promessa recebida será recebida pelo objeto Promise devolvido pela nossa função quando.
O uso específico é o seguinte:
No angular, defina um serviço especificamente para interação.
GET: function (url, opções) {<br> var diferred = $ q.defer (); <br> ShowTip (); $ http.get (url, opções) .success (function (data) {hidetip (); if (data.success) {adeferred.Resolve (dados);} else {deferred.reject (data.message);}}). {hidetip (); adiFred.Reject (Data);}); retorna adiErred.promise;} // a chamada no controlador get ('url', params) .then (function (dados) {// aqui é successCallback}, function (data) {// aqui está o erroCallback});Dessa forma, podemos definir algumas instruções uniformemente quando cada solicitação for emitida e ocultar esses prompts após o término da solicitação. Nesse código, o significado geral é que, quando a solicitação for bem -sucedida, diferido.Resolve (Data) será chamado para definir o status para o sucesso, de modo que a primeira função em que seja executada automaticamente, a saber, o sucesso do Backback, e os dados solicitados serão passados.
O exposto acima são as habilidades práticas de desenvolvimento de AngularJs que o editor apresentou a você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!