無法獲得Angular-Route的工作

我試圖使用AngularJS的模板和路由，我相信我已經設置好了，雖然它不會工作。我已經查看了堆棧溢出以及不同的論壇在線，並且非推薦的解決方案已經爲我工作。無法獲得Angular-Route的工作

我AngularModule樣子：

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

app.controller('main', function($scope){ 
$scope.visible = false; 
$scope.contacts = []; 

//add object to array 
$scope.newContact = function(){ 
    $scope.contacts.push({name:$scope.ContactName, phone:$scope.ContactPhone, email:$scope.ContactEmail}); 

    $scope.ContactName = ''; 
    $scope.ContactPhone = ''; 
    $scope.ContactEmail = ''; 
}; 

$scope.remove = function(item) { 
    var index = $scope.contacts.indexOf(item) 
    $scope.contacts.splice(index,1); 
} 

app.config(function($routeProvider) { 
    $routeProvider 
    .when('/',{ 
     templateURL : 'pages/home.html', 
     controller : 'main' 
    }) 
    .when('/add', { 
     templateURL : 'pages/add.html', 
     controller : 'addController' 
    }) 
    .when('/details',{ 
     templateURL : 'pages/details.html', 
     controller : 'detailsController' 
    }); 

}); 


app.controller('addController', function($scope) { 
}); 

app.controller('detailsController', function($scope) { 
}); 
});

這似乎是正確設置雖然我下面HTML仍保持空白：

<html ng-app="Contacts" class="ng-scope"> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="format-detection" content="telephone=no" /> 
    <meta name="msapplication-tap-highlight" content="no" /> 
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 --> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> 
    <link rel="stylesheet" type="text/css" href="css/index.css" /> 
    <link rel="stylesheet" type="text/css" href="css/bootstrap/dist/css/bootstrap.css"/> 
    <title>Contracts</title> 
</head> 
<body ng-controller= "main"> 
     <h1>Contacts</h1> 
     <div ng-view></div> 

    <script type="text/javascript" src="js/cordova.js"></script> 
    <script type="text/javascript" src="js/index.js"></script> 
    <script type="text/javascript" src="js/node_modules/angular/angular.js"></script> 
    <script type="text/javascript" src="js/node_modules/angular-route/angular-route.js"></script> 
    <script type="text/javascript" src="js/ContactsModule.js"></script> 
    <script type="text/javascript"> 
     app.initialize(); 
    </script> 
</body>

而且我的文件結構非常簡單：

/ 
/pages 
/pages/home.html 
/pages/add.html 
/pages/details.html

有什麼我失蹤？這已經完全逃脫了我，我花了很多時間試圖找出這一個。另外我在本地主機上測試。

來源

2015-06-02 Keeano

腳本加載順序不正確。首先加載angular.js和相關的腳本，然後加載ContactsModule.js，index.js。試試這個 – Venu

我剛剛試過，沒有工作 – Keeano

這可能是一個有爭議的問題，但是你在''標籤後面關閉了''標籤，對嗎？ –

你可以嘗試$ stateProvider insted的的$ routeProvider

$stateProvider 
    .state('home', { 
     url: '/home', 
     templateUrl: 'Entities/Home.html',    
    }) 
    .state('company', { 
     url: '/company', 
     templateUrl: 'Entities/Company.html', 
     controller: 'CompanyController' 
    });

來源

2015-06-02 01:35:19 Venu

好吧，讓我來試試這個真正的快速 – Keeano

我嘗試此http：// pastie.org/10218558它沒有工作 – Keeano

好吧，我們在上述意見的對話開始有點長，所以這是我給你的答案。

以下是你的HTML的精簡版：是，我已經index.js（我假設是您發佈的JS代碼）後，我已經包括angular.min

<!doctype html> 
<html ng-app="Contacts"> 
<head>  
    <title>Contacts</title> 
</head> 
<body> 
    <h1>Contacts</h1> 
    <div ng-view></div> 

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-route.min.js"></script> 
    <script src="js/index.js"></script> 
</body> 
</html>

通知。 js和angular-route.min.js。沒關係，我從CDN（內容交付網絡）獲取它們，假設你已經在節點上安裝了角度（通過在命令行鍵入'npm install angular'），你的鏈接應該工作得很好......但是我確實質疑爲什麼你在'js'文件夾中有你的node_modules文件夾。你使用節點和npm或不？

我使用上面的HTML與index.js文件，我已經安排是這樣的：

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

app.controller('main', function($scope){ 
    $scope.visible = false; 
    $scope.contacts = []; 

    //add object to array 
    $scope.newContact = function(){ 
    $scope.contacts.push({name:$scope.ContactName, phone:$scope.ContactPhone, email:$scope.ContactEmail}); 

    $scope.ContactName = ''; 
    $scope.ContactPhone = ''; 
    $scope.ContactEmail = ''; 
    }; 

    $scope.remove = function(item) { 
    var index = $scope.contacts.indexOf(item); 
    $scope.contacts.splice(index,1); 
    }; 

}); 

app.controller('addController', function($scope) { 
}); 

app.controller('detailsController', function($scope) { 
}); 

app.config(function($routeProvider) { 
    $routeProvider 
    .when('/',{ 
     templateUrl : 'pages/home.html', 
     controller : 'main' 
    }) 
    .when('/add', { 
     templateUrl : 'pages/add.html', 
     controller : 'addController' 
    }) 
    .when('/details',{ 
     templateUrl : 'pages/details.html', 
     controller : 'detailsController' 
    }); 
});

而且我有三個HTML文件，像你這樣的：頁/ home.html做爲，頁/加.html和pages/details.html。每個文件只包含一個div標籤像目的地的名稱：<div>Home</div>

我的項目文件夾結構爲：

my_project 
- js 
    - index.js 
- pages 
    - add.html 
    - details.html 
    - home.html 
index.html

此代碼是在我的機器上正常工作，也應該對你的工作。爲了使其工作，您必須在Web服務器上運行代碼。因此，您必須從某個公司託管，或者正在運行一個程序，如MAMP (for Mac OS)，WAMP (Windows)或XAMPP (Mac OS OR Windows)。

來源

2015-06-02 02:44:37 trevor

無法獲得Angular-Route的工作

回答

相關問題