ng-Vorlage mit ui.router, separate Dateien

Im Moment habe ich ng-template in meiner Datei index.html wie diese heute bin mit,ng-Vorlage mit ui.router, separate Dateien

<script type="text/ng-template" id="/home.html"> 
    //html here... 
</script>

Ich verwende ui.router auch, und das Aussehen so,

   $stateProvider 
       .state('home', { 
        url: '/home', 
        templateUrl: '/home.html', 
        controller: 'mainController', 
        resolve: { 
         postPromise: ['serv', function(serv) { 
          return serv.getAll(); 
         }] 
        } 
       });

Das funktioniert gut. Die Sache ist, ich möchte meine Anwendung skalieren und mehr über Best Practice und wie man tatsächlich mit eckigen arbeiten. Mein Hintergrund ist .NET MVC, wo es Master/View/Teilansicht gibt. Also versuche ich den gleichen Ansatz hier mit eckigen, aber in meinem Fall habe ich die index.html als Master, und home.html wäre Ansicht oder teilweise, wenn Sie so wollen. Appriciere alle Eingaben, die ich bekomme.

Quelle

2016-03-31 Dejan.S

Wahrscheinlich besser, wenn Sie Ihre 'Ansichten' in verschiedene' .tpl.html' Dateien und 'templateUrl: 'Pfad/to/view.tpl.html''' – Daniel

Es ist in der Tat ein same-ish-Ansatz hier - zumindest mit eckigen 1.x (noch nicht in 2 eingetaucht). :)

Zwei schöne Quellen, die ich herüber zurück gekommen bin, als ich in dieser Suche sind:

Gemeinsam sollten sie in die richtige Richtung weisen.

Quelle

2016-03-31 15:20:57 st2rseeker

-1

Sie könnten <ng-view> in Ihrer index.html-Datei verwenden.

index.html

<body> 

     <ng-include src="'app/views/structure/navigation.tpl.html'"></ng-include> 

     <ng-view autoscroll="true"></ng-view> 

     <ng-include src="'app/views/structure/footer.tpl.html'"></ng-include > 

     <!--Scripts--> 
     <!--<script src="bower_components/masonry/dist/masonry.pkgd.min.js"></script>--> 
     <!--<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>--> 
     <script src="assets/libs/flexslider/jquery.flexslider.js"></script> 
     <script src="assets/libs/masonry/masonry.pkgd.min.js"></script> 
     <script src="assets/libs/imagesloaded/imagesloaded.pkgd.min.js"></script> 
     <script src="assets/libs/angular/angular.min.js"></script> 
</body>

In Ihrem Modul können Sie es wie aussehen:

var app = angular.module('myApp', ['ngRoute', 'ngSanitize', 'ui.bootstrap']);

Die oben ist natürlich eine andere Datei.

Jetzt können Sie Ihre app.routes Datei haben:

app.config(function($routeProvider, $locationProvider){ 
    $routeProvider.when('/',{ 
     templateUrl: "app/views/misc/home.tpl.html", 
     controller: "HomeController" 
    }) 
    .when('/about',{ 
     templateUrl: "app/views/misc/about.tpl.html", 
     controller: "AboutController" 
    }) 
    .when('/hobbies',{ 
     templateUrl: "app/views/pages/hobbies.html", 
     controller: "HobbiesController" 
    }).otherwise({redirectTo:'/'}); 

    $locationProvider.html5Mode(true);

Jetzt müssen Sie einen Controller:

app.controller('HomeController', function($scope, ROOT) { 
    $scope.Root = ROOT; 
    console.log("In Home Controller") 
    $scope.top = { 

     backstretch: [ 
      ROOT+'/assets/img/big/big-1.jpg', 
      ROOT+'/assets/img/big/big-2.jpg', 
      ROOT+'/assets/img/big/big-4.jpg' 
     ] 
    }; 
});

Jetzt, da ich HomeController verwendet ich, dass dieses Beispiel für den Einsatz.

Meine Routen-Datei sagte when('/') gehen Sie zum Dateipfad app/views/misc/home.tpl.html und der Controller ist HomeController. Da ich in meiner app.module Datei habe ich var app = angular.module kann ich einfach app.controller('HomeController) schreiben, jetzt ist alles angeschlossen.

In meinem home.tpl.html alles, was ich tun muss, ist setzen <div> Tags.

Abhängig von der Größe des Projekts wird das Design darstellen. Je größer das Projekt, desto modularer möchten Sie es machen.

Quelle

2016-03-31 15:33:52 Drew1208

nicht wirklich was ich suche, bin ich Arbeiten mit 'ui.route' –

ng-Vorlage mit ui.router, separate Dateien

Antwort

Verwandte Themen