无法获得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的工作

回答

相关问题