Angularjs - NgView не работает

Question

Вот базовая настройка, в которой по умолчанию используется частичное 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);

}

Замечания:

1. В настоящее время, если я нажимаю на любого сотрудника, нет "Сотрудник /??" добавляется в путь к адресной строке [что не является преступлением для меня], однако, div основного содержимого не меняет частичное на employee.html.

2. Если я закомментирую "$locationProvider.html5Mode(true);", локальный хост по умолчанию будет теперь " http://localhost:31219/ ", и когда я нажимаю на любого сотрудника, в адресной строке отображается " http://localhost:31219/Employee/1 ', и страница перемещается на страницу ошибки 404.

Я знаю, что здесь что-то убивает, что решение настолько простое, что ускользает от меня.

Цели:

1. Я действительно хотел бы избежать хеш-тегов в моей адресной строке.

2. Было бы неплохо, но не требуется, чтобы сотрудник / идентификатор не отображался в адресной строке, но я подозреваю, что частичное не может измениться без него. и, естественно,

3. Я хочу, чтобы частичное изображение перешло на страницу employee.html при нажатии на сотрудника.

Кто-нибудь видит, где я не так с этим кодом?

Заранее спасибо!

Answer 1

Это была проблема:

<a href="Employee/{{employee.id}}"><img  class="smallImage" ng-src="content/app/images/{{employee.image}}" alt="{{employee.description}}"></a>

Решение:

1. Мне нужно было поставить '#/' в img href -> href="#/Employee/{{employee.id}}"
2. Закомментируйте '$locationProvider.html5Mode(true);'

Как примечание, я бы очень хотел знать, как заставить это работать без этих надоедливых хеш-тегов. Любые идеи кто-нибудь?

Answer 2

Решение:

1. Мне нужно было поставить '#/' в img href -> href="#/Employee/{{employee.id}}"
2. Закомментируйте '$locationProvider.html5Mode(true);'

Как примечание, я бы очень хотел знать, как заставить это работать без этих надоедливых хеш-тегов. Любые идеи кто-нибудь?

Чтобы использовать html5mode, ваш сервер должен обслуживать основной индексный файл приложения для недопустимых маршрутов.

Так, например, если ваш код на стороне сервера обрабатывает операции CRUD с такими путями, как: /api/employee, / api / employee /:id и т. Д.

и он обслуживает статический контент, изображения, HTML, CSS, JS и т. д.

Для любого другого запроса, который в противном случае был бы 404, он должен вместо ответа 404 ответить кодом 200 и предоставить файл index.html.

Таким образом, любой нестатический и не серверный маршрут обрабатывается приложением angular.

Это упомянуто в руководстве Angular на этой странице: http://docs.angularjs.org/guide/dev_guide.services.%24location

Обратите внимание на комментарий на стороне сервера в конце:

HTML переписывание ссылок

Когда вы используете режим API истории HTML5, вам потребуются разные ссылки в разных браузерах, но все, что вам нужно сделать, это указать обычные ссылки URL, такие как: <a href="/some?foo=bar">link</a>

Когда пользователь нажимает на эту ссылку:

В устаревшем браузере URL-адрес меняется на /index.html#!/some?foo=bar

В современном браузере URL-адрес меняется на / some? Foo = bar. В случаях, подобных следующему, ссылки не переписываются; вместо этого браузер выполнит полную перезагрузку страницы до исходной ссылки.

Ссылки, содержащие целевой элемент Пример: <a href="/ext/link?a=b" target="_self">link</a>

Абсолютные ссылки, которые идут на другой домен Пример: <a href="http://angularjs.org/">link</a>

Ссылки, начинающиеся с '/', которые приводят к другому базовому пути при определении базы
Пример: <a href="/not-my-base/link">link</a>

Серверная сторона

Использование этого режима требует перезаписи URL на стороне сервера, в основном вы должны переписать все ваши ссылки на точку входа вашего приложения (например, index.html)