AngularJS с маршрутом и API JSON
Я пытался использовать AngularJS с плагином JSON API. У меня нет ошибки, но маршрут не работает, и на странице не печатаются части/...?
Я изменил постоянные ссылки на %postName%.
Я использую MAMP, и моя ссылка: http://localhost:8888/angular-wp.
Содержимое JSON работает: http://localhost:8888/angular-wp/api/get_posts/
В маршрутной области было два пустых значения.
Main.html
<p>main</p>
<a href='/demo'>This links to /demo</a>
<ul>
<li ng-repeat='post in posts'>
<a href='{{post.slug}}'>{{post.title}}</a>
</li>
</ul>
Demo.php
{{post.content}}
<p>demo :)</p>
Index.php
<!DOCTYPE html>
<html lang='en' ng-app='app'>
<head>
<meta charset='UTF-8' />
<title>hooo</title>
</head>
<body>
<header>
<h1>
<a href='/'>Worcamp 2014</a>
</h1>
</header>
<div ng-view>TODO: have angular infect the content here via ajax</div>
<footer>© <?php echo date('Y'); ?> worcamp</footer>
<script src='<?php echo get_template_directory_uri(); ?>/bower_components/angular/angular.js'></script>
<script src='<?php echo get_template_directory_uri(); ?>/bower_components/angular-route/angular-route.js'></script>
<script type='text/javascript'>
<?php $pathTheme = get_template_directory_uri(); ?>
angular.module('app', ['ngRoute'])
.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
templateUrl: '<?php echo $pathTheme; ?>/partials/main.html',
controller: 'Main'
})
.when('/:slug', {
templateurl:
'<?php echo $pathTheme; ?>/partials/demo.php',
controller: 'Slug'
});
//.otherwise({ redirectTo: '/'});
})
.controller('Main', function($scope, $http, $routeParams){
$http.get('/api/get_posts/').success(function(res) {
$scope.posts = res.posts;
});
})
.controller('Slug', function($scope, $http, $routeParams){
$http.get('/api/get_posts/?slug=' + $routeParams.slug).success(function(res) {
$scope.post = res.post;
});
});
</script>
</body>
</html>
2 answers
Дважды проверьте, есть ли ошибка "nobase" в вашей консоли. Если да, то в соответствии с документацией AngularJS и fix.io (кредиты за этот ответ идут автору этого поста) базовый тег на помощь.
<html ng-app="app">
<head>
<base href="/angular-wp/">
<title>AngularJS Demo Theme</title>
<?php wp_head(); ?>
Пожалуйста, обратите внимание, что "/angular-wp/" в данном случае является подтекстом (тестовый URL-адрес похож на "http://localhost/angular-wp /"), вы должны заменить его соответствующим образом. Если вы установите неверный базовый href, вы получите ошибку, например это или это.
Если вы думаете о переключении плагина: я использовал плагин "WP REST API" (который реализует WP API), а затем $http.get('WPURL/wp-json/posts', function (data, ...) {...}), это сработало идеально.
Вы получаете изображение, показанное в сообщениях, например, через data[post-index].featured_image.source, смотрите все свойства через console.log(data[0]).