eckig: Aktualisieren einer Ansicht ohne Neuladen der Seite

Ich habe ein Root-Scope-JSON-Array, das betrachtet wird, ist mehrere Controller und wird in noch einem anderen Controller aktualisiert. Das JSON-Array enthält URLs, die aktualisiert werden. Die View-Controller zeigen ungefähr die Hälfte der Zeit aktualisierte URLs an, aber wenn ich die Seite neu lade, bekomme ich 100% der Zeit aktualisierte Ansichten. Ich habe versucht mit $ scope. $ Apply() und $ Timeout, aber sie machten keinen Unterschied.
Könnte mir bitte jemand sagen, welche eckigen Werkzeuge dafür da sind? Ich hoffe, dass es einen einfachen Ansatz dafür gibt.eckig: Aktualisieren einer Ansicht ohne Neuladen der Seite

Quelle

2016-12-02 user2917629

Dies ist eine sehr breite Fragen mit mehreren verschiedenen möglichen Ansätze, versuchen Sie genauer zu sein, indem Sie mehr Details oder Code bereitstellen. – svarog

Haben Sie versucht, ngView und ngRoute zu verwenden? Die tatsächlich gelieferte Datei ändert sich nie und Ihre Ansichten werden in ngView ausgefüllt, um zu ändern, was der Benutzer sieht (sowie die URL). Es sieht so aus, als ob die Seite weg navigiert wurde, aber nicht, also wird $ rootScope beibehalten. –

@DominicAquilina: Sowohl ngView als auch ngRoute würden in Verbindung miteinander verwendet werden, um zu erreichen, wonach ich suche? Oder würde ich das eine oder das andere benutzen? Bis jetzt habe ich nur Controller und Dienste verwendet, um Funktionalität zu teilen. – user2917629

von meinem früheren Kommentar Going:

Index

<!doctype html> 
<html ng-app="myapp"> 
    <head> 
    <!--Head stuff--> 
    </head> 

    <body> 
    <div ng-view=""></div> 

    <!-- Scripts, other stuff --> 
    </body> 
</html>

Haupt Script

'use strict'; 

angular 
.module('myapp', [ 
    //... 
    'ngRoute', 
    //... 
    ]) 
.config(function (..., $routeProvider, ...) { 
    $routeProvider 
    .when('/404', { 
     templateurl: '404.html', 
     controller: 'ErrorCtrl', 
     controllerAs: 'errorCtrl', 
     title: 'You are lost' 
    }) 
    .when('/', { 
     templateUrl: 'views/home.html', 
     controller: 'HomeCtrl', 
     controllerAs: 'homeCtrl', 
     title: 'Home' 
    }) 
    .when('/contact', { 
     templateUrl: 'views/contact.html', 
     controller: 'ContactCtrl', 
     controllerAs: 'contactCtrl', 
     title: 'Contact Us' 
    }) 
    .otherwise({ 
     redirectTo: '/404' 
    }); 

    //... 
}) 
.run (function (...) { 
    //... 
});

Nutzungs

<a href="/contact">Contact Us</a>

Sie würden den gesamten Basisvorlagencode, der für Ihre Seiten üblich ist, verwenden und den Index einschließen. Grundsätzlich wird das Zeug, das sich nicht ändert, immer da sein. Andernfalls entfernen Sie es von der Hauptseite und legen Sie es in eine Vorlagendatei mit einem eigenen Controller. Alternativ können Sie einige gemeinsam genutzte Controller verwenden und die Ansichten einfach als Vorlagen verwenden und dann alle Funktionen in Direktiven verschieben. Ich bevorzuge die letztere Methode, aber ersteres ist oben gezeigt.

Bemerkenswert an dieser Lösung ist, dass die Seite nur einmal geladen wird. Da Sie immer auf dem Index bleiben, wenn Sie zu einer anderen Ansicht navigieren, müssen Sie nur den HTML-Code für die neue Vorlage von Ihrem Server abrufen und in die Ansicht einfügen (für die ngRoute zuständig ist). Ich glaube, dass Sie standardmäßig eine # in Ihrer URL haben, so dass Sie wahrscheinlich den HTML5-Modus aktivieren möchten. $locationProvider in der Config-Funktion und dann fügen Sie diese Zeile:

$locationProvider.html5Mode ({ enabled: true });

Sie müssen auch eine Basis mit dem Kopfelement Ihrer Indexdatei hinzufügen:

<base href="/" />

HFG: Routes tutorial, HTML5 mode

Wenn Sie Grunt verwenden Vielleicht möchten Sie auch in ngTemplates suchen. Es kann wirklich die Leistung steigern.

Quelle

2016-12-02 22:23:14

eckig: Aktualisieren einer Ansicht ohne Neuladen der Seite

Antwort

Verwandte Themen