English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
L'idea centrale di Angular è quella di guidare tutto con dati, ogni altra cosa è un'estensione dei dati.
Adottando l'idea che tutto sia un oggetto in JavaScript, in Angular si può dire che tutto sia dati.
Riguardo alla costruzione del progetto
(1) requirejs e Yeoman
Quando si inizia a toccare o utilizzare Angular, si ha sempre la confusione riguardo a problemi simili, la mia risposta pratica è che non è necessario requirejs o Yeoman. Il primo non viene utilizzato perché Angular ha già l'implementazione di module. Il secondo è perché la struttura di Angular e la costruzione del progetto non necessitano di essere così complessi, è sufficiente scrivere a mano o clonare un progetto seed su GitHub.
(2) Come organizzare la struttura del progetto
Questo problema è un po' inutile, perché dipende completamente dalle persone e dai progetti. La mia raccomandazione sono due tipi di strutture organizzative, una secondo la funzione del codice, ossia tutti i controller in una cartella, tutti i servizi in un'altra cartella. L'altra segue la funzione implementata, ad esempio, l'utente mette i corrispondenti template, servizi e controller nella cartella User.
Entrambi vanno bene, ma dal punto di vista della manutenzione, la seconda opzione è migliore.
(3) Divisione di controller e service
Di solito, il controller è un controller per una pagina, se una pagina ha parti comuni, queste parti comuni utilizzano sempre un controller. Per il service, deve essere suddiviso in due parti: una parte per interagire con i dati del server e un'altra parte per contenuti funzionali common, dove si possono collocare servizi riciclabili scritti da sé, come notify.
Riguardo a whether the service deve essere ulteriormente suddivisa in base alle funzioni e ai moduli, dipende dal progetto.
(4) Utilizzo di plugin e librerie Angular
Non è realistico prendere tutto il necessario da internet per un progetto, ma nemmeno è realistico scrivere tutto da zero. Molti plugin di Angular sono stati sviluppati dal team Angular o da alcune persone che li hanno encapsulati con jQuery. La mia opinione sui plugin è semplice: se possono soddisfare le tue esigenze, usa li rapidamente; se non possono, scrivili tu stesso o migliora un plugin esistente.
Per quei plugin che non riesci a risolvere dopo ore di debug, ascoltami, abbandonali. La maggior parte dei plugin sono plugin UI, non è necessario cercare di essere complessi, a volte anche semplici controlli HTML hanno un loro bello.
Se incontri conflitti tra plugin Angular, specialmente plugin UI, nella maggior parte dei casi dovresti abbandonare uno di essi, come angular-ui e angular-strap.
Tecniche di utilizzo
Entriamo nel testo principale, elencherò alcune tecniche che ho utilizzato durante l'uso di angular, che saranno elencate una per una in forma di scenario. Non spiegherò alcune concetti di base di Angular in questo articolo, che è più un articolo di tecniche che non un tutorial di base.
(1) Il conflitto tra "{{}}" in angular e Python flask
Nella template di flask utilizzata in Python, i vincoli di dati sono anch'essi gestiti attraverso due parentesi graffe "{"
Modifica angular:
$interpolateProvider.startSymbol('{[{').endSymbol('}]}');
// Aggiungi questa frase nel config, posizionata nel modulo del route. Ecco come si modifica il binding {{}} originale di angular, sostituendolo con il binding {[{ }]}.
Modifica flask:
class CustomFlask(Flask):
jinja_options = Flask.jinja_options.copy()
jinja_options.update(dict(
block_start_string='{%',
block_end_string='%}',
variable_start_string='{#',
variable_end_string='#}',
comment_start_string='<#',
comment_end_string='#>',
))
app = CustomFlask(__name__, instance_path='/web')
Ti consiglio di modificare flask, poiché dopo aver utilizzato angular, la separazione tra front-end e back-end. Il template Jinjia di flask non è più necessario, e se hai modificato i segni di binding di Angular, altri controlli e librerie potrebbero avere problemi.
(2) Rimuovere il "#" sempre presente nell'URL
Quando si configura il route, abilitare il modalità HTML5.
angular.module('router', ['ngRoute'])
.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
}
]
(3) ng-click="expression" e istruzioni simili, come scrivere più espressioni in expression?
Ad esempio, se voglio assegnare due variabili in un ng-click, posso farlo con il ";" punto e virgola:
<a ng-click="obja=1;objb=2"></a>
(4) $watch non ha avuto effetto o ha funzionato solo una volta
Questo tipo di situazione di solito si verifica quando si ascolta una stringa o un numero, $scope.$watch("name",function(){}).Non funziona o funziona solo una volta, la soluzione è di utilizzare $watch per ascoltare un oggetto, basta aggiungere il valore che si desidera ascoltare in un oggetto.
Quando usi il modal di angular-ui, questo è abbastanza evidente. La ragione è l'erede di $scope, perché il modal crea un altro scope nel controller della pagina corrente, quindi non è possibile cercare追溯原型链per i literal. Per risolvere questo problema, devi avere un oggetto che possa implementare il binding di aggiornamento dei dati attraverso la catena di prototype tra scope genitore e figlio.
(5) Voglio che il contenuto di ng-view sia visibile su tutta la pagina
Di solito una pagina può avere una top-menu o una sidebar fisse, parti che non cambiano. E ogni volta che cambia il route, è il template di ng-view. Se una pagina desidera visualizzare interamente se stessa, senza parti fisse come la top-menu.
Di solito ci sono un index.html e un template.html visualizzato da ng-view, con top-menu e sidebar situati in index.html. Controlla la visibilità di questi elementi tramite un vincolo ng-if con una variabile.
Se una pagina deve essere completamente visibile, senza sidebar o altro, invia un messaggio tramite $scope.$emit nel controller, poi il controller della pagina index ascolta il messaggio tramite $scope.$on. Una volta ricevuto il messaggio, cambia la variabile di controllo della visibilità della sidebar.
Puoi anche creare una variabile globale controllata tramite un servizio, ma personalmente consiglio di farlo tramite messaggi di broadcast.
(6) Ricorda di usare ng-if al posto di ng-show
Questo è un piccolo problema di Angular, che potrebbe essere definito un problema di medie dimensioni. Alcuni elenchi di dati lunghi possono avere alcune cose che vengono visualizzate tramite la forma di nascondere e mostrare tramite clic. E anche questa parte di contenuto controllabile di visibilità contiene molti vincoli di dati. Questo può influenzare notevolmente la prestazione durante il rendering della pagina.
Facciamo un esempio, per esempio, Angular consiglia di non superare 2000 vincoli di dati per una pagina. Se ora hai una pagina che lega direttamente 2000 modelli, quando la carichi, noterai che è molto lenta. Se imposti ogni 100 modelli su ng-show, di default non visibili, noterai che è ancora molto lenta.
Poi sostituisci tutti i ng-show con ng-if e vedrai che la prestazione migliora immediatamente come se fossero due applicazioni diverse. La ragione è che ng-show esegue tutti i vincoli al suo interno, mentre ng-if esegue i vincoli solo quando è uguale a true, ossia quando è visibile. In questo modo, la prestazione migliora notevolmente, grazie a questa semplice modifica, la pagina si carica circa 10 volte più veloce di prima.
Quindi, quando è possibile utilizzare ng-if, sostituirlo con tutti i ng-show e ng-hide.
(7) Riguardo a ng-bind-html
Di solito si legano dati a elementi html, con ng-bind è sufficiente, ma in alcune situazioni è necessario legare non dati comuni, ma html. Allora ng-bind non è sufficiente, è necessario utilizzare ng-bind-html, che esibirà il contenuto come html. Ad esempio, se si desidera esibire html con classi, utilizzare ng-bind-html e还需要ngSanitize, è necessario includere i file appropriati.
(8) Ottenere il risultato del filtro dei dati ng-repeat
Questo viene generalmente utilizzato durante la ricerca, ad esempio quando si formano elenchi con dati ng-repeat multipli. Quindi si filtra un campo, ora si desidera ottenere il risultato del filtro, ci sono 2 modi.
Un esempio è simile a questo nell'html ng-repeat:
ng-repeat="food in foodCategory._displayfoods = (foodCategory.foods | filter: { 'name': searchobj.foodfilter } | orderBy: food.sort_order)"
In questo modo _displayfoods è il risultato finale del filtro. Un altro modo è attraverso due set di dati, uno scritto nel controller, quindi il filtro e l'ordinamento sono operati nel controller, e infine il risultato finale viene utilizzato per ng-repeat.
Il primo metodo è più conveniente, il secondo metodo è migliore e ha anche prestazioni migliori.
(9) ng-class e ng-style assegnano valori in base al giudizio
Decidere in base al valore della variabile se applicare una certa classe e diversi stili di stile.
ng-class="{'state-error':!foodForm.foodstock.$valid}"
ng-style="{ color: i.color=='' || i.name=='活' ? 'default' : '#fff' }"
(10) Esempio di validazione del form con input
L'input di angular può essere validato attraverso le proprietà HTML5, qui principalmente attraverso le proprietà name di form e input, formname.inputname.$valid indica se lo spazio name di inputname ha superato la validazione delle proprie proprietà.
(11) $resource e $http con $promise
$q.all([
resource.query().$promise,
resource2.query().$promise
}).then(functon(success){
console.log(success);
},functon(error){
console.log(error);
});
foodFactory.food.save(f).$promise.then(function(result){
foodFactory.food.get({id:result.id}).$promise.then(function(data){
});
});
Questo non richiede spiegazioni, basta guardarlo. Attenzione: il promise di $http deve essere restituito manualmente, quindi di solito si utilizza $resource.
(12) Monitoraggio di un singolo attributo della collection tramite $watch
Impostando il terzo parametro di $watch su true, si può effettuare una deep watch. Tuttavia, a volte non si desidera o non è necessario monitorare tutte le proprietà di una collection. Basta monitorare una o alcune di esse. In questo caso, utilizzare un ciclo for per iterare $watch è chiaramente inefficiente.
Ecco come si può monitorare un singolo attributo di un oggetto in una collection.
$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 $scope.people.map(function(g){
return g.name
});
});
}, function (newVal) {
$scope.count++;
$scope.msg = 'nome della persona è stato cambiato'+ $scope.count;
}, true);
(13) Trattamento di debounce
Questo è molto utile per la gestione frequente, adatto a scenari come ng-change, $watch. Ad esempio, in situazioni di ricerca istantanea in base a una parola chiave, il $debounce viene impacchettato come servizio e chiamato direttamente l'interfaccia, codice: http://jsfiddle.net/Warspawn/6K7Kd/
(14) Posizionarsi rapidamente in una posizione specifica
In generale, all'interno della pagina, è possibile utilizzare il formato <a id="bottom"></a> per combinare il codice JavaScript e realizzare una posizione rapida. In Angular, è realizzato con un principio simile, il codice è il seguente:
var old = $location.hash();
$location.hash('batchmenu-bottom');
$anchorScroll();
$location.hash(old);
Si scrive così perché il direct location.hash causerebbe una variazione dell'URL, un cambio di pagina, quindi ho aggiunto il codice di prevenzione del cambiamento di pagina.
Per ora è tutto ciò che ho riassunto, molte cose sono state trovate cercando e praticando, spero che sia utile per chi ha bisogno, se in futuro ci saranno nuove cose, continuerò a scrivere.
Ecco la somma delle tecniche di Angular, continueremo a aggiungere e organizzare articoli correlati in futuro, grazie per il supporto della nostra comunità!
Dichiarazione: il contenuto di questo articolo è stato raccolto da Internet, il copyright spetta ai rispettivi proprietari, il contenuto è stato contribuito e caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, ti preghiamo di inviare una e-mail a: notice#oldtoolbag.com (al momento dell'invio dell'e-mail, sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, questo sito rimuoverà immediatamente il contenuto sospetto di violazione del copyright.