Stack mit eckigen Router Controller hinzufügen

Question

Stack mit etwas ziemlich einfach.Ich benutze ngRoute zum ersten Mal und konfrontiert dies.

Ich habe es geschafft, HTML-Includes funktioniert zu bekommen, aber, der Versuch, Controller hinzuzufügen passiert nichts.

Js-Datei:

var app = angular.module('admin', ['ngRoute']) 

// Router config 
app.config(function($routeProvider){ 
    $routeProvider 
    .when('/', { 
     templateUrl:"partials/index.html" 
    }) 
    .when('/news', { 
     templateUrl:"partials/news.html", 
     controller:"newsCtrl" 
    }) 
    .when('/changelog', { 
     templateUrl:"partials/changelog.html" 
    }) 
    .when('/todos', { 
     templateUrl:"partials/todos.html" 
    }) 
    .when('/users', { 
     templateUrl:"partials/users.html" 
    }) 
    .when('/messages', { 
     templateUrl: "partials/messages.html" 
    }) 
    .otherwise({ 
     redirectTo: '/' 
    }); 
}) 

// Sidebar directive 
app.directive('sidebar', function() { 
    return { 
    restrict: "E", 
    templateUrl: "partials/sidebar.html" 
    } 
}) 

/* News Controller */ 
app.controller('newsCtrl', function($scope) { 
    $scope.greeting = "HI" 

    $scope.news = [ 
    "news 1", 
    "news 2", 
    "news 3" 
    ] 
}) 

und die HTML-Datei (news.html):

<h3>News list:</h3> 
<div class="content-container"> 
    {{ newsCtrl.greeting }} 
    {{2+2}} 
    <li ng-repeat="item in newsCtrl.news">{{item}}</li> 
</div> 

Der Ausgang I erhalten ist so ziemlich wie folgt aus:

Nachrichten

Ich habe versucht, Controller klassischen Weg zu befestigen - immer noch kein Ergebnis. Was fehlt mir?

Answer 1

Ich nehme an, Sie haben die <ng-view> Direktive in Ihre Haupt-HTML-Datei eingefügt, so dass NgRouter sie durch die Vorlage jeder Route ersetzen kann.

In Ihrem Beispiel verwenden Sie $scope. Das bedeutet, dass Sie direkt von Ihren Vorlagen auf die Eigenschaften Ihres Controllers zugreifen können. dh:

<li ng-repeat="item in news">{{item}}</li>

Auf der anderen Seite, wenn Sie die Controller Als Syntax verwenden wollen, würden Sie so etwas tun:

.when('/news', { 
    templateUrl:"partials/news.html", 
    controller:"newsCtrl", 
    controllerAs: "vm" 
}) 

---

app.controller('newsCtrl', function() { 
    var vm = this; 
    vm.greeting = "HI" 

    vm.news = [ 
    "news 1", 
    "news 2", 
    "news 3" 
    ] 
}) 

---

<h3>News list:</h3> 
<div class="content-container"> 
    {{ vm.greeting }} 
    {{2+2}} 
    <li ng-repeat="item in vm.news">{{item}}</li> 
</div> 

Answer 2

Alles, was Sie brauchen, ist etw wie folgt aus:

var myApp = angular.module('myApp', ['ngRoute']); 

myApp 
.config(function($routeProvider) { 
    $routeProvider 
     .when('/', { 
      controller: 'HomeController as homeCtl', 
      templateUrl: 'partials/home.html' 
     }) 
     .when('/about', { 
      controller: 'AboutController as aboutCtl', 
      templateUrl: 'partials/about.html' 
     }) 
     .when('/contact', { 
      controller: 'ContactController as contactCtl', 
      templateUrl: 'partials/contact.html' 
     }) 
     .otherwise({ 
      redirectTo: '/' 
     }); 
}) 
.controller('HomeController', function() { 
    var self = this; 
    self.user = 'marios'; 
}) 
.controller('AboutController', function() { 

}) 
.controller('ContactController', function() { 

}); 

und die home Vorlage:

<div> 
    <p>Hello {{homeCtl.user}}</p> 
</div> 

Scheck here ein funktionierendes Beispiel oder here.

Answer 3

Ich empfehle Ihnen, die John Papas Style Guide zu sehen, und man kann so etwas machen

var app = angular.module('admin', ['ngRoute']); 

    app.config(routeConfig) 
     .controller('newsCtrl', newsCtrl); 
    // Router config 
    routeConfig.$inject = ['$routeProvider']; 
    function routeConfig($routeProvider){ 
     $routeProvider 
     .when('/', { 
      templateUrl:"partials/index.html" 
     }) 
     .when('/news', { 
      templateUrl:"partials/news.html", 
      controller:"newsCtrl", 
      controllerAs: "vm" 
     }) 
     .when('/changelog', { 
      templateUrl:"partials/changelog.html" 
     }) 
     .when('/todos', { 
      templateUrl:"partials/todos.html" 
     }) 
     .when('/users', { 
      templateUrl:"partials/users.html" 
     }) 
     .when('/messages', { 
      templateUrl: "partials/messages.html" 
     }) 
     .otherwise({ 
      redirectTo: '/' 
     }); 
    }) 

    // Sidebar directive 
    app.directive('sidebar', function() { 
     return { 
     restrict: "E", 
     templateUrl: "partials/sidebar.html" 
     } 

}) 

/* News Controller */ 
function newsCtrl() { 
    var vm = this; 

    vm.greeting = "HI" 

    vm.news = [ 
    "news 1", 
    "news 2", 
    "news 3" 
    ] 
}) 

In html

<h3>News list:</h3> 
<div class="content-container"> 
    {{ vm.greeting }} 
    {{2+2}} 
    <li ng-repeat="item in vm.news">{{item}}</li> 
</div>