2014-10-27 76 views
1

我有一種情況。我目前正在使用角度路由測試angularjs路由功能。但是,當我從index.html中取出HTML片段代碼並將其放入視圖文件夾並從routeprovider調用它時,它似乎不起作用。我檢查了我的控制檯並沒有發生錯誤。我正在從MAMP爲我的網絡服務器工作。AngularRouteJS不能在localhost工作:8888

我Net標籤 enter image description here

我的控制檯 enter image description here

這裏是我的index.html

<!DOCTYPE html> 
<html lang="en" data-ng-app="customersApp"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Weather</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, minimal-ui"> 
    <!--[if lt IE 8]> 
    <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
    <![endif]--> 
    <!--[if lt IE 9]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 

    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700,800,300' rel='stylesheet' type='text/css'> 

</head> 
<body> 

    <div ng-view></div> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script> 
    <script src="scripts/angular-route.js"></script> 
    <script src="app/app.js"></script> 
    <script src="app/controllers/customersController.js"></script> 
</body> 
</html> 

這裏是我的app.js

(function(){ 

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

    app.config(function($routeProvider) { 
     $routeProvider 
      .when('/',{ 
       controller: 'CustomersController', 
       templateUrl: 'app/views/customers.html' 
      }) 
      .otherwise({redirectTo: '/'}); 
    }); 

}()); 

和最後我卡斯特omersController.js

(function(){ 
    var CustomersController = function ($scope){ 
     $scope.sortBy = 'name'; 
     $scope.reverse = false; 
     $scope.customers = [ 
      { 
       joined: "2004-12-24", 
       name: "Charles", 
       city: "Fairfax", 
       orderTotal: "124.45" 
      }, 
      { 
       joined: "2023-09-12", 
       name: "Donte", 
       city: "Altamonte Springs", 
       orderTotal: "5.9943" 
      }, 
      { 
       joined: "2013-01-25", 
       name: "Jelon", 
       city: "Waldorf", 
       orderTotal: "100" 
      } 
     ], 
     $scope.doSort = function(propName){ 
      $scope.sortBy = propName; 
      $scope.reverse = !$scope.reverse; 
     }; 
    }; 
    angular.module("customersApp").controller("CustomersController", ['$scope',CustomersController]); 
}()); 
+1

大多數*「似乎不工作」 *都伴隨着一個錯誤信息的情況。檢查您的瀏覽器的控制檯 – Phil 2014-10-27 01:33:57

+0

我的控制檯中沒有任何東西出現。它只是顯示一個空白頁面。 – dowomenfart 2014-10-27 01:37:11

+0

調試過程如何?嘗試在控制器中放置一些斷點,以確保它甚至被調用。另外,請檢查您的瀏覽器的* Net *控制檯,看它是否對您的模板發出請求以及響應是什麼。 – Phil 2014-10-27 01:39:47

回答

1

這也可能是這customersController.js

angular.module("customersApp", []) 

擺脫了第二個參數,因爲它重新創建模塊。它應該是

angular.module('customerApp').controller(... 

https://docs.angularjs.org/api/ng/function/angular.module#usage

+0

只是做了這個修復,它仍然沒有工作。 – dowomenfart 2014-10-27 01:52:04

+0

@ Donte'Trumble你對此沒有太大的幫助*「沒有/沒有工作」*的東西。如果您的代碼已更改,請更新您的問題。您是否嘗試過使用瀏覽器的調試器? – Phil 2014-10-27 01:53:51

相關問題