これは、デフォルトの noemployee.html パーシャルを持つ基本的なセットアップです: ng-view として
Index.html コンテンツ:
<div id="container" ng-controller="EmployeeCtrl">
<!-- Side Menu -->
<span id="smenuSpan">
<ul id="thumbList">
<li ng-repeat="employee in employees | filter:categories">
<a href="Employee/{{employee.id}}"><img class="smallImage" ng-src="content/app/images/{{employee.image}}" alt="{{employee.description}}"></a>
</li>
</ul>
</span>
<!-- Content -->
<span id="contentSpan">
<div ng-view></div>
</span>
</div>
私のルートプロバイダー:
var EmployeeModule = angular.module('EmployeeModule', [], function($routeProvider, $locationProvider) {
$routeProvider.when('/', { templateUrl: 'content/app/partials/noemployee.html', controller: EmployeeModule.EmployeeCtrl });
$routeProvider.when('Employee/:id', { templateUrl: 'content/app/partials/employee.html', controller: EmployeeModule.EmployeeCtrl });
$routeProvider.otherwise({ redirectTo: '/' });
$locationProvider.html5Mode(true);
私のコントローラー:
function EmployeeCtrl($scope, $http, $routeParams, $timeout) {
$scope.employees = [
{ "id": 1, "category": "ones", "image": "person1.jpg", "description": "person 1 description", name:"Jane Smith" },
{ "id": 2, "category": "twos", "image": "person2.jpg", "description": "person 2 description", name: "Mark Sharp" },
{ "id": 3, "category": "threes", "image": "person3.jpg", "description": "person 3 description", name: "Kenny Suave" },
{ "id": 4, "category": "fours", "image": "person4.jpg", "description": "person 4 description", name: "Betty Charmer" },
{ "id": 5, "category": "fives", "image": "person5.jpg", "description": "person 5 description", name: "John Boss" }
];
$scope.employeesCategories = [];
$scope.currentEmployee = {};
$scope.params = $routeParams;
$scope.handleEmployeesLoaded = function (data, status) {
//$scope.images = data;
// Set the current image to the first image in images
$scope.currentEmployee = _.first($scope.employees);
// Create a unique array based on the category property in the images objects
$scope.employeeCategories = _.uniq(_.pluck($scope.employees, 'category'));
}
$scope.fetch = function () {
$http.get($scope.url).success($scope.handleEmployeesLoaded);
};
$scope.setCurrentEmployee = function (employee) {
$scope.currentEmployee = employee;
};
// Defer fetch for 1 second to give everything an opportunity layout
$timeout($scope.fetch, 1000);
}
所見:
現在、従業員をクリックしても「Employee/??」は表示されません。がアドレス バーのパスに追加されます [これは私にとって犯罪ではありません]。
「$locationProvider.html5Mode(true);」をコメントアウトすると、デフォルトのローカルホストは「http://localhost:31219/#/」になり、従業員をクリックするとアドレスバーに「http://localhost: 」と表示されます。 31219/Employee/1 '、ページは 404 エラー ページに移動します。
私はここで何かをろくでなしにしているので、解決策が非常に単純であることを知っています。
目標:
- アドレスバーにハッシュタグを付けないようにしたいです。
従業員/IDがアドレスバーに表示されないことはいいことですが、必要ありませんが、それなしでは部分的に変更できないと思います. そして、当然
従業員をクリックすると、パーシャルが「employee.html」ページに変更されます。
このコードのどこが間違っているのか、誰にもわかりますか?
前もって感謝します！