Vermeiden Sie die Verwendung von ui-view in Angular-ui-router

Wie es scheint, Angular.js ui-router muss haben ui-view um die ganze Sache zu arbeiten. Hier ist ein Beispiel ohne ui-view - und routing funktioniert NICHT (kein Alarm): http://plnkr.co/edit/e1vzj6pDdqADKJ2LSsd3?p=preview

HTML:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" src="http://code.angularjs.org/1.2.12/angular.js" data-semver="1.2.12"></script>
    <script data-require="ui-router@*" data-semver="0.2.8" src="http://angular-ui.github.io/ui-router/release/angular-ui-router.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <a href="#/link">Test</a>
    <!--div ui-view></div-->
  </body>

</html>

Javascript:

var app = angular.module('plunker', ['ui.router']);

app.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {

  $stateProvider
    .state("link", {
      url: "/link",
      resolve: {
        test: function() {
          alert("Triggered resolve /link");
          return true;
        }
      }
    });
}]);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

Wenn Sie <div ui-view></div> zurück, es würde funktionieren.

Dies ist nicht tragisch, weil ich Sie verlassen könnte, dass ui-view leer. Ich glaube nicht, verwenden ui-view (mag seltsam klingen), weil ui-view ersetzen DOMs. Ich möchte nur Knebel meine container anstatt das zu tun, abgeschlossen rip-and-replace.

  1. Ist es der richtige Ansatz zu verlassen ui-router leer wie ein hack?

  2. Ist es eine Möglichkeit zu ui-router NICHT erforderlich ui-view?

InformationsquelleAutor HP. | 2014-02-12
  1. 2

    Können Sie verwenden, ng-und ng-wenn man das Umschalten von dom-Elementen. Aber ich werde Ihr zeigen, dass manchmal müssen Sie nur mit ui-router wie einer Objekt-orientierten Standort-management-tool.

    Können Sie die ui-sref - Attribut auf Ihre <a> anstatt einer reinen href als "hack" zu bekommen in einem Zustand, der nicht weiß, wo man gerendert.

    Bearbeitete ich Ihre plunkr zu demonstrieren:

    http://plnkr.co/edit/KLm8HTIkvnbGzhzmwSwG?p=preview

    grundsätzlich ändern

      <a href="#/link">Test</a>

    zu:

     <a ui-sref="link">Test</a>

    Ich bin nicht sicher, ob best practices oder nichts. Es ist eine gute Frage, und ich bin sorry kann ich nicht vollständig beantworten, die auf der 1-st-Punkt, die Sie vorgenommen haben. Nicht sicher, ob es der richtige Ansatz, es hängt alles davon ab, wie Sie mit ui-router. In einem ziemlich großen app haben wir etwas viele benannte Ansichten und dann machen wir mit ui-view, aber ich kann sehen, wie manchmal, es wäre nutzlos.

    • Mit ui-sref funktioniert und ohne ui-view Richtlinie in den HTML-Code. Ich bin neugierig, warum ist das der Fall. Auch wie verwende ich ui-sref wenn ich übergeben zu müssen, params, nicht nur die state
    • ich gabelte die plunk und erstellt ein für Sie, der zeigt, wie pass params: plnkr.co/Bearbeiten/L38Tz8CiUt4e4FV6Vmml?p=Album Vorhören. Ich kann sehen, wie in einigen Situationen, die Art der übergabe von Sachen, um ui-router benefitial aber in den meisten Situationen, die ich verwenden würde, rein hrefs. Wenn Sie in der Tat nicht brauchen, rendering, Ansichten, würde ich immer noch verwenden Sie eine leere ui-Ansicht nur Ursache der html-code sieht einfach besser aus.
    • baba, hast du auch nichts ändern in Ihrem plnkr code, weil ich nicht sehen, den code zu übergeben, params
    • Never mind, ich dachte, hier angular-ui.github.io/ui-router/site/#/api/...
    • Ich hatte in meinem Kommentar
    InformationsquelleAutor Nikola Yovchev
Schreibe einen Kommentar