AngularJS navigation

Ich versuche zum implementieren einer navigation in einer Webseite mithilfe von angularJS. Das problem ist, dass der Weg gar nicht mehr funktioniert. Die browser-Konsole gibt keine Fehler und die ng-view einfach nicht zeigen, das templatesUrls.

route.js

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

routeApp.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'partials/task.html',
            controller: 'TraineesController'
        })
        .when('/technology', {
            templateUrl: 'partials/technology.html',
            controller: 'TraineesController'
        })
.otherwise({redirectTo:"/technology"});

});

Index.html

<html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/taskman.css"/>
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js"></script>
<script type="text/javascript" src="app/route.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</head>
<body>
<a href="#/technology" class="btn btn-sm btn-danger nav-button-margin">
  <i class="glyphicon glyphicon-user"></i>&nbsp;Account panel
</a>
<div class="col-sm-12">
  <div ng-view></div>
</div><!-- Closing col-sm-12-->
</body>
</html>

app.js

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

app.controller('TraineesController', function($scope, $http, $log) {
  getTrainee(); //Load all available tasks

  function getTrainee(){  
  $http.post("ajax/getTrainee.php").success(function(data){
        $scope.trainees = data;
       });
  };
});

task.html

<div class="widget-box" id="recent-box" ng-controller="TraineesController">
Random text tables
</div>
  • Nicht mit dem gleichen controller auf den Körper und die route.
  • Entfernen von ng-controller-tag aus Körper, seine bereits in route.js
  • Aktualisiert die Frage immer noch das gleiche problem. <div ng-include src="'partials/task.html'"></div> scheint zu funktionieren, aber nicht das ng-view
InformationsquelleAutor Spinxas | 2014-08-21
  1. 1

    Habe ich aus zwei verschiedenen plunkers, die erste ist eine einfache app, nur um ein Beispiel von Routen, die Magie mit eckigen...

    Ersten Beispiel, grundlegende Wege

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

app.controller('MainCtrl', function($scope) {

  $scope.technology = 'this is the tech page';
  $scope.task = 'this is the task';

});

app.config(['$routeProvider',
  function($routeProvider) {

    $routeProvider
      .when('/technology', {
        templateUrl: 'technology.html',
        controller: 'MainCtrl'
      })
      .when('/task', {
        templateUrl: 'task.html',
        controller: 'MainCtrl'
      })
      .otherwise({
        redirectTo: '/technology'
      });

  }
]);

    Das zweite Beispiel ist eine Anwendung-Beispiel, basierend auf Ihre Bewerbung, es ist im Grunde genommen Ihre Anwendung, aber etwas anders...

    Zweites Beispiel, Ihre app

    //I like to keep the app.js file "clean", what means that this file will only
//load the app modules and declare the DI of the app...
var app = angular.module('myApp', [
  'ngRoute',            //ngRoutes directive from angularjs
  'myAppControllers',   //controllers module, u can add how controllers wtv u need
  'myAppRoutes',        //routes module, you can keep the routes configs separated or in the same file
]);
//start the modules, other way to do this is to put this lines in every 
//single controllers or route file, what is ugly
angular.module('myAppRoutes',[]);
angular.module('myAppControllers',[]);
    • Sie sir, sind mein held. Vielen, vielen Dank!
    InformationsquelleAutor Juan Biscaia
  2. 2

    entfernen Sie die ; von hier:

    .when('/technology', {
        templateUrl: 'partials/technology.html',
        controller: 'TraineesController'
    }) //<-----here you have a ; remove it and it will work.
.otherwise({redirectTo:"/technology"});

    ; brach die Verkettung und verursacht einen Syntaxfehler gibt.

    update:

    können Sie entfernen Sie diesen controller:

    <body ng-controller="TraineesController">

    und stattdessen können Sie stellen Sie den controller in die jeweiligen templates.

    Kasse diesem plunkr demo.

    • Sie haben Controller definiert? wenn Sie irgendwelche Fehler in der browser-Konsole, teilen Sie diese auch.
    • meine app.js var app = angular.module('myApp', []); app.controller('TraineesController', function($scope, $http,$log) { getTrainee(); // Laden Sie alle verfügbaren Aufgaben, Funktion getTrainee(){ $http.post("ajax/getTrainee.php").success(function(data){ $scope.Auszubildende = data; }); }; }); task.html <div class="widget-box" id="recent-box" ng - controller="TraineesController"> ...Andere Funktionen... entfernt habe ich den controller vom Körper, aber es funktioniert immer noch nicht
    • Haben Sie Fehler in Ihrem browser für die Konsole?
    • Ich aktualisierte die Frage mit der zur Verfügung gestellten Informationen.
    • Kasse das demo habe ich in der Antwort.
    • Danke für die demo die navigation fing an zu arbeiten, aber es taucht immer wieder mit einem Fehler - Fehler: [ng:areq] - Argument 'TraineesController' ist keine Funktion, hab undefined
    • ja, dass passiert, wenn wir die Richtlinie, aber wir haben nicht diese controller geschrieben.
    • Dein Beispiel perfekt funktioniert, aber ich versuche es zu implementieren, um mein system, das ist, warum ich bin immer die Fehler und versuchen es herauszufinden. Danke für all die Unterstützung, hoffentlich wird dieser Fehler behandelt werden. 🙂
    • Finden Sie eckige nicht finden ng-controller="TraineesController", das ist, warum dieser Fehler kommt, versuchen Sie deklarieren diese und sehen, ob das hilft.
    • Ich habe erklärt es im app.js (Siehe die Frage oben), muss ich darauf überall? Vielen Dank für die Hilfe.

    InformationsquelleAutor Jai
Schreibe einen Kommentar