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

我有什么遗失的吗？这完全逃脱了我，我花了很多时间试图弄清楚这个。我也在localhost上测试。

Answer 1

您可以尝试$ stateProvider insted of $ routeProvider

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

Answer 2

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

以下是html的精简版：

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'
    });
});

请注意，在包含angular.min.js和angular-route.min.js之后，我已经包含了index.js（我假设是你发布的js代码）。没关系，我从CDN（内容传送网络）获取它们，假设您使用节点安装了角度（通过在命令行输入＆n; {39; npm install angular＆＃39;），您的链接应该可以正常工作...但是我确实怀疑为什么你的node_modules文件夹里面有一个＆＃39; js＆＃39;夹。你在使用node和npm吗？

我在你的index.js文件中使用上面的html，我已经组织了这样的文件：

<div>Home</div>

我有三个像你这样的html文件：pages / home.html，pages / add.html和pages / details.html。每个文件只包含一个div标记，其中包含目标名称，如：my_project - js - index.js - pages - add.html - details.html - home.html index.html

我的项目文件夹结构是：

    public void onResume() {
    super.onResume();
    mDrawerLayout.closeDrawer(contenerView);
}

此代码在我的计算机上正常运行，也应该适用于您的计算机。为了使其工作，您必须在Web服务器上运行代码。因此，您必须在某个地方从公司托管，或者运行MAMP (for Mac OS)，WAMP (Windows)或XAMPP (Mac OS OR Windows)等程序。

无法使Angular-Route正常工作

2 个答案: