无法让 Angular-Route 工作答案

【问题标题】：Unable to get Angular-Route working无法让 Angular-Route 工作
【发布时间】：2015-06-02 10:53:30
【问题描述】：

我正在尝试使用 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

我有什么遗漏吗？这完全逃脱了我，我花了很多时间试图弄清楚这一点。我也在 localhost 上进行测试。

【问题讨论】：

脚本加载顺序不正确。首先加载 angular.js 和相关脚本，然后加载 ContactsModule.js、index.js。试试这个
我刚试过，没用
这可能是一个有争议的问题，但您确实在 <body> 标签之后关闭了您的 <html> 标签，对吧？
@ShehryarAbbasi 我有，我只是在复制时忘记添加它
你的 app.config 不应该在你的控制器里面。您在启动 app.config 之前忘记关闭控制器

标签： javascript html angularjs cordova angular-routing

【解决方案1】：

你可以试试 $stateProvider insted of $routeProvider

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

【讨论】：

【解决方案2】：

好的，我们在上面的 cmets 中的谈话有点长，所以这是我给你的答案。

以下是您的 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 (for Mac OS)、WAMP (Windows) 或 XAMPP (Mac OS OR Windows) 这样的程序。

【讨论】：