A idéia principal do Angular é direcionar tudo através dos dados, e tudo o mais é uma extensão dos dados.
Para aplicar a ideia de que tudo é um objeto, pode -se dizer em Angular que tudo é dados.
Sobre construção de projetos
(1) requerjs e yeoman
Quando você entrar ou usar o Angular, você sempre ficará confuso com perguntas semelhantes. Minha resposta prática é que você não precisa exigirjs ou yeoman. O primeiro não é usado porque o próprio Angular tem a implementação do módulo. Este último ocorre porque a estrutura organizacional angular e a construção de projetos são completamente desnecessárias para serem tão complicadas. Basta escrever ou puxar um projeto de semente no Github.
(2) Como organizar a estrutura do projeto
Esse problema é um pouco inútil porque varia completamente de pessoa para pessoa para projetar. Pessoalmente, recomendo duas estruturas organizacionais, uma de acordo com a função de código, ou seja, o controlador é colocado em uma pasta e os serviços são colocados em uma pasta. O outro segue as funções implementadas. Por exemplo, o usuário coloca o modelo, serviços e controladores correspondentes na pasta do usuário.
Ambos estão bem e, do ponto de vista da manutenção, o segundo será melhor.
(3) Divisão de Controlador e Serviço
Aqui, os controladores geralmente são um controlador em uma página. Se uma página tiver uma peça comum, a parte pública sempre usará um controlador. O serviço deve ser dividido em duas partes, uma é um serviço que interage com os dados do servidor, e o outro é algum conteúdo comum funcional, que coloca alguns serviços reutilizáveis escritos por si mesmos, semelhantes a notificar etc.
Quanto a se o serviço deve ser dividido de acordo com funções e módulos, depende do projeto.
(4) Uso de plug-ins e bibliotecas angulares
Definitivamente, não é realista para um projeto ficar pronto on-line, mas é ainda mais irrealista escrever tudo sozinho. Muitos plug-ins no Angular são desenvolvidos pela equipe Angular ou algumas pessoas encapsuladas com plug-ins de jQuery. Minha visão sobre plug-ins é muito simples. Se você os usar, poderá usá -los o mais rápido possível. Se você não pode atender às necessidades, pode escrevê-las ou melhorá-las nos plug-ins existentes.
Para plug-ins que você não pode lidar por algumas horas de depuração, ouça meus conselhos e desista deles. A maioria dos plug-ins são plug-ins de interface do usuário, então você não precisa buscar a complexidade. Às vezes, os controles HTML simples também têm sua própria beleza simples.
Se você encontrar conflitos de plug-in angular, especialmente plug-ins de interface do usuário, você deve desistir de um deles na maioria dos casos, como o Angular-UI e a tira angular.
Dicas de uso
Vamos para o texto principal abaixo e listarei algumas das técnicas que usei no processo de uso do Angular, que serão listadas uma a uma na forma de uma cena. Não vou explicar alguns conceitos básicos de angular aqui. Este artigo é uma coisa hábil, não um tutorial básico.
(1) Conflito de frasco entre "{{}}" em angular e python
No modelo usado pelo frasco do Python, a ligação de dados também é passada através de dois aparelhos "{", que conflitam com a ligação de dados do Angular. Existem duas soluções para isso. Um é modificar a marca de ligação do angular e o outro é modificar a marca de ligação do frasco. Ambas as soluções são fornecidas aqui.
Modificar Angular:
$ interpolateProvider.startsymbol ('{[{'). Ensndsymbol ('}]}');
// Basta adicionar esta frase para configurar e colocá -la no módulo de rota. Aqui você altera o angular original {{}} ligando -se a {[{}]} ligação a {[{}]} ligação.
Modifique o Flask:
Classe CustomFask (Flask): jinja_options = Flask.jinja_options.copy () jinja_options.update (dict (block_start_string = '{%', Block_end_string = '%}', variável_start_string = '{{', variável_end_end = ' Comment_end_string = '#>',)) App = CustomFlask (__ name__, instance_path = '/web')Aqui eu recomendo modificar o frasco, porque, após o uso do Angular, as extremidades dianteiras e traseiras são separadas. O modelo Jinjia de Flask não é mais necessário. Ao mesmo tempo, se você modificar a etiqueta de ligação angular, outros controles e bibliotecas terão problemas.
(2) Remova o URL sempre padrão para "#"
Ao definir a rota, ative o modo HTML5.
angular.module ('roteador', ['ngroute']). config (['$ routeProvider', '$ locationProvider', função ($ routeProvider, $ locationProvider) {$ locationProvider.html5mode (true); // definir esta sentença}]);(3) ng-click = "Expression" e instruções semelhantes, como escrever múltiplas expressões na expressão?
Por exemplo, se eu quiser atribuir valores a 2 variáveis em um clique ng, posso dividi-lo através do ";" ponto e vírgula:
<a ng-click = "obja = 1; objb = 2"> </a>
(4) $ watch não tem efeito ou apenas entra em vigor uma vez
De um modo geral, essa situação aparecerá ao ouvir uma string ou número, $ scope. $ Watch ("nome", function () {}). Não entra em vigor ou apenas entra em vigor uma vez. A solução é que o $ relógio ouve um objeto o máximo possível e anexe o valor que você deseja ouvir em um objeto.
Quando você usa modal no Angular-UI, isso é mais óbvio. O motivo específico é devido à herança do $ SCOPE. Como o Modal é equivalente a criar outro escopo no controlador da página atual, é impossível recuperar e rastrear a cadeia de protótipo para literais. Se você deseja resolvê-lo, deve ter um objeto para alcançar a ligação de dados de dados no escopo pai-filho através da cadeia de protótipos.
(5) Espero que o conteúdo da NG-View seja exibido em toda a página
Geralmente, uma página pode ter um Menu ou barra lateral fixo, essas peças fixas e, em seguida, cada rota altera o modelo de NG-View. Se uma página deseja que a página inteira se exiba completamente, ela não incluirá peças fixas como o Menu Top.
Aqui está geralmente um modelo.html exibido por um index.html e uma visão ng. Menu superior e barra lateral estão localizados em index.html. A tela deles está oculta, ligando uma variável a um NG-IF.
Se uma página precisar ser totalmente exibida por si só e não exibir barra lateral, uma mensagem será enviada em seu controlador através do $ SCOPE. $ Emit e o controlador da página de índice ouve a mensagem através do $ SCOPE. Depois que a mensagem é ouvida, as variáveis que controlam a barra lateral visível e oculta são alteradas.
Você também pode usar o serviço para controlar uma variável global, e as recomendações pessoais ainda são através da transmissão de mensagens.
(6) Lembre-se de usar ng-if em vez de ng-show
Este é um pequeno poço de angular, ou pode -se dizer que é um poço que não é grande ou pequeno. Alguns dados de lista longa podem ser exibidos por padrão oculto e clicando para ser exibido. Esta parte do conteúdo que pode controlar o visível e o oculta também será acompanhada por muita ligação de dados. Isso afeta muito o desempenho ao renderizar a página.
Pegue uma lista. Por exemplo, o Angular geralmente recomenda que uma página não tenha mais de 2.000 dados de ligação. Se houver uma página que ligue diretamente 2.000 modelos e você o carregue, você descobrirá que está muito preso. Se você definir a cada 100 modelos como NG-Show, ele não será exibido por padrão, você descobrirá que ele ainda está muito preso.
Em seguida, você substitui todo o NG-SHOW por NG-IF e descobrirá que o desempenho é instantaneamente rápido como dois aplicativos. O motivo é que o NG-SHOW ainda executará todas as ligações, e o NG-IF executará ligações quando for igual ao verdadeiro, ou seja, ele executará as ligações quando for exibido. Isso melhorará bastante o desempenho. Eu usei essa modificação simples antes e a página carregou cerca de 10 vezes mais rápida.
Portanto, quando você puder usar o NG-IF, use-o em vez de todo o NG-Show e Ng-Hide.
(7) Sobre Ng-Bind-Html
Geralmente, os dados estão vinculados a elementos HTML, e NG-Bind é suficiente, mas em algumas situações, o que precisa ser amarrado não são dados comuns, mas HTML. Então NG-Bind não é suficiente. Você precisa usar NG-Bind-HTML, que produzirá o conteúdo como formato HTML. Por exemplo, se você deseja gerar HTML com classe, use NG-Bind-HTML e a cooperação do NGSanitize é necessária e o arquivo correspondente precisa ser introduzido.
(8) Obtenha o resultado após o filtro de dados de repetição ng
Isso geralmente é usado ao pesquisar, como vários dados de repetição NG formando uma lista. Em seguida, filtre um campo e agora você precisa obter o resultado após o filtro, existem 2 maneiras.
Um está escrito em html ng-repetir como este:
ng-repeat = "Food in Foodcategory._DisplayFoods = (Foodcategory.Foods | Filtro: {'Nome': Searchobj.Foodfilter} | Ordemby: Food.sort_order)"
Dessa forma, _displayfoods é o resultado final da exibição após o filtro. Outra maneira é usar dois conjuntos de dados, um conjunto é gravado no controlador e, em seguida, o filtro e o pedido são operados no controlador. O resultado final é usado para NG-REPEAT.
O primeiro método é mais conveniente, enquanto o segundo método é melhor e o desempenho é bom.
(9) NG-Class e NG no estilo atribuem valores ao julgar
Determine se aplicar uma determinada classe e diferentes estilos com base no valor da variável.
ng-class = "{'Estado-erro':! FoodForm.FoodStock. $ válido}"
ng-estilo = "{cor: i.color == '' || i.name == 'LIVE'? 'Padrão': '#ffff'}"
(10) A verificação do formulário toma a entrada como exemplo
A forma angular pode ser verificada através do atributo html5 da entrada. Aqui, ele está bloqueado principalmente pelos atributos do formulário e do nome de entrada. formname.inputName. $ Valid indica se o espaço em que o nome é o nome de entrada passa sua própria verificação de atributo.
(11) $ PROMED
$ Q.All ([Resource.Query (). $ Promise, Resource2.Query (). $ Promise]). Então (Functon (Success) {Console.log (Success);}, Functon (Error) {Console.log (Error);}); FoodFactory.Food.Save (F). FoodFactory.Food.get ({id: result.id}). $ Promise.Then (function (Data) {});});Isso não é explicado, basta ler diretamente. Observe que a promessa de $ http precisa ser devolvida manualmente; portanto, em geral, ele passa $ recurso.
(12) Apenas uma propriedade no $ watch ouve
Defina o terceiro parâmetro de $ Watch como True to Deep Watch. No entanto, às vezes você não quer ou precisa ouvir todas as propriedades da coleção. Basta monitorar um ou vários deles, embora você possa loop $ assista através do loop for, é obviamente muito frustrante.
Através do método de escrita a seguir, você pode monitorar uma propriedade única de objeto de uma coleção.
$scope.people = [ { "groupname": "g1", "persions": [ { "id": 1, "name": "bill" }, { "id": 2, "name": "bill2" } ] }, { "groupname": "g2", "persions": [ { "id": 3, "name": "bill3" }, { "id": 4, "name": "Bill4"}]}] $ scope. $ watch (function ($ scope) {return $ scope.people.map (function (obj) {return obj.persions.map (function (g) {return g.name});};};} função (newval) {$ scope.count ++; verdadeiro);(13) Tratamento anti-shake de Debounce
Isso é muito útil para o processamento de partida frequente e é adequado para alguns cenários como NG-Change e $ Watch. Por exemplo, quando a pesquisa de palavras -chave é eliminada, o $ Debounce é encapsulado como um serviço e a interface é chamada diretamente. Código: http://jsfiddle.net/warspawn/6k7kd/
(14) Localize rapidamente em um local
De um modo geral, a página pode ser combinada com o código JS para obter um posicionamento rápido através do formulário <a id = "inferior"> </a>. No Angular, também é implementado por meio de princípios semelhantes, e o código é o seguinte:
var antigo = $ local.hash (); $ local.hash ('Batchmenu-Bottom'); $ anchorScroll (); $ local.hash (antigo);Isso ocorre porque a localização direta.Hash causará alterações na URL e saltos de página, portanto, um código para evitar o salto é adicionado.
Eu resumi muito por enquanto. Muitas coisas são pesquisadas por informações e praticadas por mim. Espero que eles sejam úteis para o TX que você precisa. Se houver alguma coisa nova no futuro, continuarei a escrever.
O exposto acima é um resumo das habilidades de aplicação angular. Continuaremos a adicionar e organizar artigos relevantes no futuro. Obrigado pelo seu apoio a este site!