角模板未加載/路線

我在學習角度，我遇到了顯示我的部分問題。這可能是一些微不足道的事，我忘了，但我似乎無法找到它。角模板未加載/路線

的index.html

<!DOCTYPE html> 
    <html ng-app="myTool"> 
    <head> 
    <link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-route.js"></script> 
     <script type="text/javascript" src="app.js"></script> 
    <script type="text/javascript" src="tool-controller.js"></script> 
    </head> 

    <body> 
    <div class="container"> 
     <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
      <div class="navbar-header"> 
      <a class="navbar-brand" href="#"><img alt="myTool" src="/templogo.png"></a> 
      </div> 
      <div id="navbar" class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      <li><a ng-href="#/dashboard">DashBoard</a></li> 
      <li><a ng-href="#/new">New</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
      <li><a ng-href="#">Logout </a> </li> 
      </ul> 
      </div> 
     </div> 
     </nav> 
    <div ng-view> 
    </div> 
    </div> 

    </body> 
    </html>

app.js

angular.module('myTool',['ngRoute']) 
    .config(function($routeProvider){ 
     $routeProvider.when('/new', { 
     templateUrl: '/tool-new.html', 
     controller:'ToolController', 
     controllerAs: "tool" 
     }) 
     .when('/dashboard', { 
     templateUrl: '/empty.html' 
     }) 
     .when('/', { 
     templateUrl: '/index.html' 
     }) 
     .otherwise({ redirectTo: '/' }); 
    });

工具controller.js

angular.module('myTool', []) 
    .controller('ToolController',['$scope', function($scope) { 
     $scope.list = []; 
     $scope.tool = {}; 
     $scope.submit = function() { 
       $scope.list.push(this.tool); 
       $scope.succes = 'sent'; 
      }; 
     $scope.search = function() { 
     }; 
    }]);

和我的部分是工具new.html和empty.html 。

我真的不明白我的思念：

-index.html與NG-視圖佔位佈局我的部分

基本路線+回落
我的控制器鏈接到我的模板
html文件作爲我的模板與隨機的東西里面。
IM上的本地webserv運行一切

我試圖加入控制器作爲依賴的寫在angulardoc，我也試着專門調用腳本代碼的模板之間我ng-show標籤。

感謝您的建議。

來源

2015-09-19 jayD

文件index.html和empty.html是否在任何文件夾內？因爲你的'templateUrl：'/ empty.html''前面有一個斜線。也檢查你的控制檯，看看你是否有任何錯誤，你可以嘗試'

' –

現在沒有一切都在同一個文件夾中，我試過/'空'和'空'，它不工作:(。我沒有在控制檯中的錯誤 – jayD

嘗試（在視圖名稱的開頭只是刪除 '/'）將您的看法是這樣的：

angular.module('myTool',['ngRoute']) 
.config(function($routeProvider){ 
    $routeProvider.when('/new', { 
    templateUrl: 'tool-new.html', 
    controller:'ToolController', 
    controllerAs: "tool" 
    }) 
    .when('/dashboard', { 
    templateUrl: 'empty.html' 
    }) 
    .when('/', { 
    templateUrl: 'index.html' 
    }) 
    .otherwise({ redirectTo: '/' }); 
});

而且還從工具controller.js

angular.module('myTool') 
.controller('ToolController',['$scope', function($scope) { 
    $scope.list = []; 
    $scope.tool = {}; 
    $scope.submit = function() { 
      $scope.list.push(this.tool); 
      $scope.succes = 'sent'; 
     }; 
    $scope.search = function() { 
    }; 
}]);

刪除[]

來源

2015-09-19 21:50:37

是的，我已經嘗試過，它已經沒有做任何事情 – jayD

男人，看到我更新的答案。它的工作原理！請檢查它並回答我 –

它是否適用於您？） –

你錯過了html中控制器的名字，即toolController也切換到你的文件的JavaScript命名約定，它將變得更容易編碼。你在html中的實際代碼應該有ng-controller =「toolController」，它應該放在你身上r div標籤以加載控制器。

來源

2015-09-19 21:50:56

它在那裏，在我的new.html：'

它不會在那裏工作，爲了加載部分你必須告訴html哪個控制器有你的內容ng-view你的body標籤或你的div標籤在index.html中必須包含ng-控制器加載tool-new.html –

角模板未加載/路線

回答

相關問題