Question

我在开始构建应用之前尝试了解路由，但它似乎无法正常工作。

我有一个基本的测试应用程序，我在其中创建了3个不同视图的3个html文件，我希望根据路径更改显示的视图。

但我总是看到索引视图。

以下是文件：

app.js：

'use strict';

angular.module('BalrogApp', ['ngRoute', 'ui.bootstrap', 'BalrogApp.controllers'])
.config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: '../index.html'
      })
      .when('/requests', {
        templateUrl: '../views/requestsList.html'
      })
      .when('/projects', {
        templateUrl: '../views/projectsList.html'
      })
      .otherwise({
        redirectTo: '/lol'
      });

  }]);

requestsController.js：

'use strict';

var requestsControllerModule = angular.module('BalrogApp.controllers', ['ngRoute', 'ui.bootstrap']);

requestsControllerModule.controller('requestsController', function($rootScope, $scope, $location, $routeParams) {

  this.studentName = "Request";
  this.studentMark = 75;

});

projectsController.js：

'use strict';

var projectsControllerModule = angular.module('BalrogApp.controllers', ['ngRoute', 'ui.bootstrap']);

projectsControllerModule.controller('projectsController', function($rootScope, $scope, $location, $routeParams) {

  this.studentName = "Project";
  this.studentMark = 75;

});

除了一些单词和与每个单词关联的控制器之外，html文件几乎相同。

以下是html wiews之间改变的几行：

index.html：

index view
<div class="row-fluid" ng-controller="requestsController as rc">
  <div class="span2">{{rc.studentName}} </div>
</div>

requestsList.html：

Request view
<div class="row-fluid" ng-controller="requestsController as r">
  <div class="span2">{{r.studentName}} </div>
</div>

projectsList.html

Project view
<div class="row-fluid" ng-controller="projectsController as p">
  <div class="span2">{{p.studentName}} </div>
</div>

不管路线是什么，如果我添加＆＃39; / projects＆＃39;或者＆＃39; /要求＆＃39;到了网址，我留在索引视图上。

知道我做错了吗？

Answer 1

确保ng-view中设置了index.html属性或元素。如果没有，路由器将无法工作另一个好的做法是在路由器上设置视图控制器，如下所示：

$routeProvider
  .when('<route_name>', {
    templateUrl: '../<tempate>.html',
    controller: '<controller_name>',
    controllerAs: 'myController'
  })

Answer 2

1。在您的基本文件（通常是index.html）上，请确保您有一个ng-view指令，该指令将用于加载所有部分视图

2。您的所有html模板都与基本文件位于同一位置吗？如果是，则可以尝试将templateUrl设置为"../index.html"而不是"/index.html" class Axovel_Customlogin_Model_Custom_Api extends Mage_Api_Model_Resource_Abstract { public function login($email,$password) { $login_customer_result = Mage::getModel('customer/customer')->setWebsiteId(1)->authenticate($email, $password); if ($login_customer_result == 1) { Mage::getSingleton("core/session", array("name" => "frontend")); $websiteId = Mage::app()->getWebsite()->getId(); $store = Mage::app()->getStore(); $customer = Mage::getModel("customer/customer"); $customer->website_id = $websiteId; $customer->setStore($store); try { $customer->loadByEmail($email); //$session = Mage::getSingleton('customer/session')->setCustomerAsLoggedIn($customer); $session = Mage::getSingleton('customer/session'); $session->login($email, $password); $session->setCustomerAsLoggedIn($session->getCustomer()); return $session->getSessionId(); }catch(Exception $e){ echo $e; } } } }。第一个检查基本文件所在目录之外的html文件，而第二个检查同一目录中的html文件

使用$ routeProvider的角度路由

2 个答案: