Quais são as diferenças entre NG-IF e NG-Show/Hide?
A primeira diferença é que o NG-IF é criado apenas quando a expressão após o nó DOM for verdadeiro, o NG-SHOW é criado no início e exibir: bloco e exibição: nenhum é usado para controlar a exibição e não exibir.
A segunda diferença é que o NG-IF (implicitamente) produzirá um novo escopo, e o mesmo é verdadeiro para ng-switch, ng-inclusão etc. para criar dinamicamente uma interface.
Isso fará com que o modelo NG seja encadernado com a variável básica em Ng-IF e vincule este modelo a outra área de exibição na divisão externa. Quando a camada interna muda, a camada externa não muda de maneira síncrona porque já existem duas variáveis.
<p> {{name}} </p> <div ng-if = "true"> <input type = "text" ng-model = "name"> </div>O NG-Show não tem esse problema porque não vem com seu próprio escopo de primeiro nível.
A maneira de evitar esse tipo de problema é sempre vincular elementos na página às propriedades do objeto (data.x) em vez de se ligar diretamente à variável base (x).
Veja o escopo em AngularJs para obter detalhes
Quando Ng-repetir itera sobre uma matriz, se houver os mesmos valores na matriz, que problemas estarão lá e como resolvê-los?
Duplicados em um repetidor não são permitidos. Adicionar faixa por $ index pode resolvê -lo. Obviamente, você também pode rastrear por qualquer valor comum, desde que possa identificar exclusivamente cada item na matriz (crie a associação entre o DOM e os dados).
A expressão escrita no NG-Click pode usar os métodos em objetos nativos JS?
Não apenas expressões no clique ng, mas apenas os métodos nativos JS não podem ser chamados diretamente desde que estejam na página, porque estes não existem no escopo $ do controlador correspondente à página.
Pegue uma castanha:
<p> {{parseint (55.66)}} <p>
Você descobrirá que nada é exibido.
Mas se você adicionar esta função em $ SCOPE:
$ scope.parseint = function (x) {return parseint (x);}Claro que não há problema como este.
Para esse tipo de exigência, o uso de um filtro pode ser uma boa escolha:
<p> {{13.14 | parseintfilter}} </p> app.filter ('parseintfilter', function () {return function (item) {return parseint (item);}}){{agora | 'yyyy-mm-dd'}} Nesta expressão, como as linhas verticais e os parâmetros subsequentes podem ser personalizados?
filtrar, formatos dados, recebe uma entrada, processa -os de acordo com uma determinada regra e retorna o resultado do processamento.
Filtro embutido
Existem nove tipos de filtros internos:
data (data)
moeda
Limitto (matriz limites ou comprimento da corda)
ordem (classificação)
minúscula (minúscula)
OUPERCASE (CAPS)
número (formate o número, adicione mil separador e receba parâmetros para limitar o número de casas decimais)
filtrar (processar uma matriz e filtrar elementos contendo uma substring)
JSON (Formating JSON Object)
Existem duas maneiras de usar o filtro, uma é diretamente na página:
<p> {{agora | Data: 'AAAA-MM-DD'}} </p>
Outro é usá -lo em JS:
// $ filtro ('Nome do filtro') (objetos que precisam ser filtrados, parâmetro 1, parâmetro 2, ...)
$ filtro ('data') (agora, 'yyyy-mm-dd hh: mm: ss');
Filtro personalizado
// Form App.Filter ('Nome do filtro', function () {Return function (objeto que precisa ser filtrado, parâmetro 1 do filtro, parâmetro de filtro 2, ...) {// ... faça algo para retornar o objeto após o processamento;}}); // Chestnut App.Filter ('timesfilter', function () {Return function (item, times) {var resultado = ''; para (var i = 0; i <tempos; i ++) {resultado+= item;} resultado de retorno;}})Qual é a relação entre fábrica, serviço e provedor?
fábrica
Coloque o método de serviço e os dados em um objeto e retorne este objeto
App.Factory ('Fooservice', function () {return {Target: 'Factory', SayHello: function () {return 'hello' + this.target;}}});serviço
Crie um serviço através do método do construtor e retorne um objeto instanciado
App.Service ('Fooservice', function () {var self = this; this.target = 'Service'; this.sayhello = function () {return 'hello' + self.target;}});Provedor
Crie um serviço que possa ser configurado através da Config. O retorno em $ get é usar a fábrica para criar o conteúdo do serviço
App.Provider ('Fooservice', function () {this.configData = 'Init Data'; this.setConfigData = function (data) {if (data) {this.configData = Data;}} this. $ get = function) {var self = this; return {alvo: 'Provadora',,}, this. $ get = function) {var. this.target;Do ponto de vista da implementação subjacente, o serviço chama a fábrica e retorna sua instância; O provedor de fábrica chama o fornecedor, retornando o conteúdo definido em seu $ get. As funções de fábrica e serviço são semelhantes, exceto que a fábrica é uma função normal que pode retornar qualquer coisa (o retorno pode ser acessado; portanto, como escrever essas variáveis privadas, você sabe); O serviço é um construtor, que não pode ser devolvido (aqueles vinculados a isso podem ser acessados); O provedor é uma fábrica aprimorada, que retorna uma fábrica configurável.
Veja AngularJS Factory vs Service vs Provedor
Que mecanismo é usado para ligação de dados do angular? Descrição detalhada do princípio
Mecanismo de inspeção suja.
A ligação de dados bidirecionais é um dos principais mecanismos dos angulares. Quando houver alguma alteração de dados na visualização, eles serão atualizados para o modelo. Quando houver alguma alteração de dados no modelo, a visualização também será atualizada simultaneamente. Obviamente, isso requer um monitoramento.
O princípio é que o Angular configura uma fila de escuta no modelo de escopo para ouvir alterações de dados e atualizar. Toda vez que um objeto está vinculado à vista, o AngularJS insere um $ Watch na fila $ Watch para detectar se há alguma alteração no modelo que ele monitora. Quando o navegador recebe um evento que pode ser processado pelo contexto angular, o loop $ digeriest será acionado, atravessando todos os relógios $ e finalmente atualizando o DOM.
Dê uma castanha
<botão ng-click = "val = val+1"> Aumente 1 </tobut>
Ao clicar, uma operação de atualização será gerada (pelo menos dois loops $ digery são acionados)
Pressione o botão
O navegador recebe um evento e entra no contexto angular
O loop $ digeri
Como $ Watch Monitoring $ SCOPE .VAL MUDANÇAS RELATÓRIAS, A $ DIGEST LOOP é aplicado
Nenhuma alteração detectada no novo loop $ DIGEST
O navegador retomará o controlador e atualiza o DOM correspondente ao novo valor de $ scope.val
O limite superior do loop $ Digest é 10 vezes (uma exceção é lançada após mais de 10 vezes para evitar loops infinitos).
Consulte a ligação de dados para angularjs
Dois bloqueios da interface horizontal a e b. Se um evento for acionado em A, de que maneiras B podem saber? Descrição detalhada do princípio
Em outras palavras, esse problema é como se comunicar entre os módulos de interface horizontal. Existem dois métodos, um é compartilhar serviços e o outro deve ser baseado em eventos.
Serviços compartilhados
No Angular, um objeto Singleton pode ser gerado através da fábrica, e esse objeto pode ser injetado nos módulos A e B que precisam de comunicação.
Com base em eventos
Existem duas maneiras de fazer isso
O primeiro é usar o controlador pai. No controlador filho, acione um evento ($ emit) para o controlador pai e, em seguida, ouça os eventos ($ on) no controlador pai e depois transmitisse ($ transmitido) para o controlador filho. Dessa maneira, através dos parâmetros transportados pelo evento, os dados são propagados através do controlador pai e entre os mesmos controladores de nível.
O segundo tipo deve usar $ rootscope. Cada aplicação angular possui um escopo de raiz $ rootscope por padrão. O escopo da raiz está no nível superior e há escopos em todos os níveis pendurados nela. Portanto, se o subcontrolador usar diretamente o $ RootsCope para transmitir e receber eventos, a comunicação entre pares poderá ser alcançada.
Veja a comunicação entre controladores em AngularJS
Como uma aplicação angular deve ser bem em camadas?
Divisão da estrutura do diretório
Para projetos pequenos, você pode organizá -los por tipo de arquivo, como:
Filtros de Serviços de Modelos de Modelos de Controladores CSSJS
No entanto, para projetos maiores, é melhor dividi -los de acordo com módulos de negócios, como:
CSSMODULES Controladores de conta Modelos Serviços Filtros modelos Modelos de controladores de disco
É melhor ter um diretório comum em módulos para armazenar coisas públicas.
Divisão do código lógico
Como estrutura de MVVM, as aplicações angulares devem ser divididas de acordo com o modelo, o modelo de visualização (controlador) e as visualizações.
A divisão do código lógico aqui se refere principalmente a tentar tornar a camada do controlador muito fina o máximo possível. Extrair a lógica compartilhada para o serviço (como solicitações de dados em segundo plano, compartilhamento de dados e cache, comunicação entre módulos baseados em eventos, etc.), extraia operações de interface compartilhadas para a diretiva (como seleção de data de encapsulação, paginação, etc. em componentes, etc.), extrair operações de formato compartilhado para filtro, etc. etc., etc.
Em aplicações complexas, os construtores correspondentes também podem ser estabelecidos para entidades, como o módulo de disco rígido (disco), que pode ter várias visualizações como LIST, nova criação e detalhes e controladores correspondentes, respectivamente. Em seguida, um construtor de disco pode ser criado para concluir as operações de adição de dados, exclusão, modificação e verificação. Se houver um controlador relacionado ao disco, o construtor de disco será injetado no construtor de disco e uma instância será gerada. Esta instância possui os métodos de adição, exclusão, modificação e verificação. Isso não apenas tem camadas claras, mas também percebe a reutilização (tornando a camada mais fina do controlador).
Consulte a prática aprofundada dos angulares no Suning Cloud Center
Quais bibliotecas de roteamento são comumente usadas para aplicações angulares e quais são suas diferenças?
NGROUTE e UI.Router são comumente usados em Angular1.x, e também há um novo roteador (orientado a componentes) projetado para o Angular2. O por trás não foi usado no projeto real, então não vou falar sobre isso.
Seja NGROUTE ou UI.Router, como um recurso adicional adicional da estrutura, deve ser introduzido na forma de dependências do módulo.
a diferença
O módulo NGROUTE é um módulo de roteamento angular, enquanto o módulo UI.Router é um módulo de terceiros desenvolvido com base no módulo NGROUTE.
O UI.Router é baseado no estado (estado), o NGROUTE é baseado no URL e o módulo UI.Router tem funções mais poderosas, refletidas principalmente nos aspectos de nidificação dos pontos de vista.
Use o UI.Router para definir rotas com relacionamentos pais e filhos claros e insira modelos de roteamento filho em <Div Ui-View> </div> do modelo de roteamento pai através da Diretiva da Ui-View, percebendo assim o Nesting. Isso não pode ser definido no NGROUTE. Se <d div ng-view> </div> for usado na visualização pai-filho ao mesmo tempo, ela cairá em um loop morto.
Exemplo
NGROUTE
var app = angular.module ('nGroUteApp', ['ngroute']); app.config (function ($ routeProvider) {$ routeProvider .when ('/main', {modelurl: "main.html", controlador: 'main'}) .othewise ({RedirectTo:Ui.Router
var app = angular.module ("uirouteApp", ["ui.Router"]); app.config (function ($ urlouterprovider, $ stateprovider) {$ urlouterterProvider.otherwise ("/index"); $ stateProvider .State ("main main", {urwl: "/"/"); 'Mainctrl'})Se você planeja um sistema totalmente componente através da Diretiva Angular, que desafios você pode encontrar?
Eu nunca fiz um conjunto completo de componentes com a diretiva, então não posso explicar.
Uma coisa que pode ser pensada é como os componentes interagem com o mundo exterior e como eles podem ser usados através da configuração simples.
Aplicações angulares desenvolvidas por diferentes equipes. Se você deseja integrá -los, quais problemas podem ser encontrados e como resolvê -los?
Conflitos entre diferentes módulos podem ser encontrados.
Por exemplo, todos os desenvolvimentos de uma equipe são realizados sob Modulea, enquanto o código desenvolvido por outra equipe é realizado no Moduleb
angular.module ('myApp.modulea', []) .Factory ('servicea', function () {...}) angular.module ('myApp.moduleb', []) .factory ('servicea', function () {...}) angular.module ('MyApp', ['myApp.myAp.mymod.mod.mod.modleaMeaMeaMeaMap (' MyApp], myApp.mod.mod.modleaMeaMeaMeaMeaMap ('MyApp], myApp.mod.Mod.modleaMeaMeaMeaMap.modap'modaps.mod.mod.mod.mod.modleaMeaMeaMeaMap.Map.MApp.Map.MOp.Mod.Isso fará com que o Servicea, sob dois módulos, seja substituído.
Parece que não há boa solução no Angular1.x, por isso é melhor fazer planejamento unificado no estágio inicial, fazer acordos e se desenvolver estritamente de acordo com o contrato. Cada desenvolvedor escreve apenas código de bloco específico.
Quais são as desvantagens do angular?
Fortes restrições
Isso leva a altos custos de aprendizagem e não é amigável para o front end.
Mas, ao seguir as convenções do AngularJS, a produtividade será alta e o programador Java amigável.
Não propício para SEO
Como todo o conteúdo é adquirido e renderizado dinamicamente, os mecanismos de pesquisa não podem rastejar.
Uma solução é que, para o acesso normal ao usuário, o servidor responde ao conteúdo do aplicativo AngularJS; Para acesso ao mecanismo de pesquisa, ele responde às páginas HTML especificamente para SEO.
Questões de desempenho
Como a estrutura do MVVM, como a ligação bidirecional dos dados é implementada, haverá problemas de desempenho para grandes matrizes e objetos complexos.
Métodos que podem ser usados para otimizar o desempenho de aplicações angulares:
Reduza itens de monitoramento (como ligação unidirecional para dados que não mudam)
Defina ativamente o índice (especifique a rastreamento, os tipos simples se usam como índice por padrão, e os objetos usam $$ hashkey por padrão, por exemplo, alteração para rastrear por item.id)
Reduza a quantidade de dados renderizados (como paginação ou busca uma pequena parte dos dados a cada vez e recuperá -los conforme necessário)
Dados achatando (por exemplo, para estruturas de árvores, use estruturas de achatamento para construir um mapa e dados de árvores. Ao operar na árvore, uma vez que a mesma referência que os dados planos, as mudanças nos dados da árvore serão sincronizados com os dados planos originais)
Além disso, para o Angular1.x, existem problemas com a verificação suja e o mecanismo de módulos.
Móvel
Ionic pode ser tentado, mas não é perfeito.
Como ver a visão de Peter-Paul Koch sobre o Angular em janeiro de 2015?
Como você vê o controlador como sintaxe introduzida no Angular 1.2?
O benefício mais fundamental
Antes do Angular 1.2, qualquer ligação à vista estava diretamente ligada ao $ SCOPE
função myctrl ($ scope) {$ scope.a = 'aaa'; $ scope.foo = function () {...}}Usando controladores, não há necessidade de injetar $ SCOPE novamente, o controlador se torna um objeto JavaScript muito simples (POJO), um viewModel mais puro.
função myctrl () {// use VM para capturá -lo para evitar as funções internas, fazendo com que o contexto mude ao usar esse var vm = this; vm.a = 'aaa';}princípio
Do ponto de vista da implementação do código -fonte, a sintaxe dos controladores apenas cria um atributo no $ SCOPE com o alias AS, por exemplo, do objeto controlador.
if (Directive.Controlleras) {Locais. $ SCOPE [Directive.Controlleras] = ControllerInstance;}No entanto, além de tornar o controlador mais mencionado acima, você também pode evitar encontrar um poço relacionado ao escopo do AngularJS (ou seja, o poço no qual ng-se gera um escopo de primeiro nível, que é realmente um poço em tais, todos os fietxes, o que não é o que é o que é um dos leditários, quando o referências, que é o que é um pit. existe).
<Div ng--controller = "testCtrl como vm"> <p> {{name}} </p> <div ng-if = "vm.name"> <input type = "text" ng-model = "vm.name"> </div> </div>pergunta
Um problema que você encontrará com os controladores é que, como nenhum escopo $ é injetado, métodos sob $ emit, $ transmitido, $ on, $ relógio etc. não podem ser usados. Essas operações relacionadas a eventos podem ser encapsuladas e manuseadas uniformemente, ou o $ SCOPE é introduzido em um único controlador para tratamento especial.
Controlador angular de referência como sintaxe vs escopo
Detalhes da "injeção de dependência" de Angular
castanha
A injeção de dependência é um padrão de design de software que visa lidar com dependências entre os códigos e reduzir o acoplamento entre os componentes.
Por exemplo, se você não estiver usando o AngularJS, pode ser necessário fazer isso se quiser consultar dados do plano de fundo e exibi -los no front -end:
var animalbox = document.QuerySelector ('. var animais = ['gato', 'cachorro', 'coelho']; retorno de chamada (animais); }} var render = function (el, http) {http.get ('/api/animais', function (animais) {el.innerhtml = animais;})} render (httprequest, caixa de animais);No entanto, se os parâmetros não forem aprovados quando a renderização for chamada, como o seguinte, um erro será relatado porque El e HTTP não podem ser encontrados (a dependência é definida e a dependência não será encontrada automaticamente ao executar)
render ();
// TypeError: não consigo ler a propriedade 'Get' de indefinida
E usando o AngularJs, você pode fazer isso diretamente
função myctrl = ($ scope, $ http) {$ http.get ('/api/animais'). Sucesso (function (dados) {$ scope.animals = data;})}Em outras palavras, quando o aplicativo angular está em execução, o myctrl é chamado e duas dependências, $ scope e $ http são injetadas automaticamente.
princípio
AngularJS Infina o nome do serviço de dependência através do nome do parâmetro do construtor e usa o ToString () para encontrar a sequência correspondente correspondente a essa função definida e analisa os parâmetros (dependências) na regularidade, obtém a dependência correspondente no mapa de dependência e instanta -o e passa.
Para simplificar, provavelmente é assim:
var inject = {// Armazenamento de dependência de armazenamento armazenamento de relacionamento: {}, // Registre o registro de dependência: function (nome, recurso) {this.storage [nome] = recurso; }, // analisar a dependência e a chamada de chamada: function (target) {var self = this; var fn_args =/^function/s*[^/(]*/(/s*([^/)]*)/)/m; var Strip_comments = /(//////.*$)|(///**/s/s ]*?/*//))/mg; fntext = Target.toString (). Substitua (Strip_comments, ''); argdecl = fntext.match (fn_args) [1] .split (/,?/g); var args = []; argdecl.foreach (function (arg) {if (self.storage [arg]) {args.push (self.storage [arg]);}}) retornar function () {Target.apply ({}, args); }}}Usando esse injetor, a castanha anterior que não usa AngularJS pode ser chamada após modificá -la.
inject.Register ('el', AnimalBox); inject.register ('ajax', httprequest); render = inject.resolve (render); render ();pergunta
Como o injetor angularJS assume que o nome do parâmetro da função é o nome da dependência e, em seguida, procure a dependência, se a dependência for injetada como na castanha anterior, depois que o código for comprimido (os parâmetros são renomeados), a dependência não pode ser encontrada.
// função myctrl = ($ scope, $ http) {...} // function myctrl = (a, b) {...}Portanto, os dois métodos a seguir são geralmente usados para injetar dependências (existem requisitos para a ordem em que as dependências são adicionadas).
Método de anotação da matriz
myApp.Controller ('myctrl', ['$ scope', '$ http', função ($ scope, $ http) {...}])$ Injeção explícita
myApp.Controller ('myctrl', myctrl); função myctrl = ($ scope, $ http) {...} myctrl. $ inject = ['$ scope', '$ http'];Reabastecer
Para um contêiner DI, três elementos devem ser incluídos: o registro de dependências, a declaração de dependências e a aquisição de objetos.
No AngularJS, o módulo e o $ fornecem podem fornecer o registro de dependências; O injetor embutido pode obter objetos (injeção automaticamente completa de dependência); A declaração de dependências é como mencionada na pergunta anterior.
Aqui está uma castanha
/ Para o módulo, mais de um parâmetro é passado, o que significa que um novo módulo é criado e uma matriz vazia significa que não há dependência de outros módulos // existe apenas um parâmetro (nome do módulo), que significa obter o módulo // definir o MyApp.Servmes.Services ao seu angular de dependência.Módulo ('MyApp', ['MyApp.) Angular.Module ('MyApp.Services', []) // Provedor possui fábrica, serviço, provedor, valor, constante // Definir um httpServiceanGular.module ('MyApp.Services'. Serviço ('HttpService', ['$ http', função ($ http) {{...consulte
[AngularJS] implementam uma simples injeção de dependência sozinha
Entenda módulos e injetores em angular, isto é, injeção de dependência
Cenário de aplicação prática de injeção de dependência em AngularJS
Como ver Angular2
Comparado com o Angular1.x, o Angular2 fez grandes mudanças e é quase uma nova estrutura.
Com base no TypeScript (que pode ser desenvolvido usando o TypeScript), os tipos de linguagem fortes são mais benéficos quando as equipes de projeto em larga escala colaboram.
A componente melhora a eficiência do desenvolvimento e manutenção.
Existem também módulos que suportam carregamento dinâmico, novos roteadores, suporte nativo para promessas, etc.
Ele atende a padrões futuros e absorve as vantagens de outras estruturas, que vale a pena esperar, mas também há mais coisas a aprender (es a seguir, TS, RX, etc.).
O exposto acima é uma compilação das informações das informações da entrevista do AngularJS. Continuaremos a adicionar informações relevantes no futuro. Obrigado pelo seu apoio a este site!