无法使Angular-Route工作

Question

我试图使用模板和AngularJS进行路由，我相信我已经正确设置了它，尽管它无法正常工作。 我浏览了堆栈溢出以及在线上不同的论坛，没有一个推荐的解决方案对我有用。

我的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

有什么我想念的吗？ 这完全使我逃脱了，我花了很多时间试图弄清楚这一点。 我也在本地主机上测试。

Answer 1

您可以尝试$ stateProvider插入$ routeProvider

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

Answer 2

好的，我们在上述评论中的对话有点长，所以这是我为您提供的答案。

以下是html的精简版本：

<!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>

请注意，在我添加了angular.min.js和angular-route.min.js之后，我已经包含了index.js（我假设是您发布的js代码）。 没关系，我是从CDN（内容交付网络）获取它们的，假设您已在节点上安装了angular（通过在命令行中键入“ npm install angular”），您的链接应该可以正常工作...但是我确实质疑您为什么将您的node_modules文件夹放在“ js”文件夹中。 您是否正在使用node和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文件：pages / home.html，pages / add.html和pages / details.html。 每个文件仅包含一个带有目标名称的div标签，例如： <div>Home</div>

我的项目文件夹结构为：

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

该代码在我的机器上正常工作，并且在您的机器上也应该工作。 为了使其正常工作，您必须在Web服务器上运行代码。 因此，您必须从某处的公司托管，或者正在运行MAMP（对于Mac OS）， WAMP（Windows）或XAMPP（Mac OS或Windows）之类的程序。

无法使Angular-Route工作

问题描述

2 个解决方案

解决方案1
0 2015-06-02 01:35:19

解决方案2
0 2015-06-02 02:44:37

无法使Angular-Route工作

问题描述

2 个解决方案

解决方案1 0 2015-06-02 01:35:19

解决方案2 0 2015-06-02 02:44:37

解决方案1
0 2015-06-02 01:35:19

解决方案2
0 2015-06-02 02:44:37