Как обрабатывать плавную навигацию с помощью углового ui-router

Я новичок в угловом и создаю небольшой проект с использованием углового ui-router. Подойдя к документам, я создал поток проб. Но я застрял в передаче значения json шаблону.Как обрабатывать плавную навигацию с помощью углового ui-router

Я не могу рисовать на JSON странице, если я добавить обычную строку в моем HTML, то он приходит в порядке, это происходит один раз я перейти с одного экрана на другой экран.
Невозможно перейти к обратному нажатию кнопки «Назад».

Это то, что я пробовал:

HTML:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Angular Demo</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script> 

</head> 
<body ng-app="myApp" ng-controller="appController"> 

<div class="container" ui-view> 
    <div id="div1"> 
    <ul> 
     <li ng-repeat="x in data"><a ui-sref="test">{{ x.id }}</a></li> 
    </ul> 
</div> 
</div> 

<script type="text/javascript" src="app.js"></script> 
<script type="text/javascript" src="controller.js"></script> 
</body> 
</html>

Demo - Plunker

источник

2016-10-07 M-S

У вас есть 'ui-sref ="/"' in 'test.html'. Это недопустимое имя состояния – Phil

пытается изменить свой test.html к этому:

<a href="#" ui-sref="home">back</a> 
<h1>test html</h1> 
<h3>id = {{ id }}</h1>

и добавить новый состояние для индекса (я назвал его «дом»), поэтому ваш app.js будет выглядеть следующим образом:

var app = angular.module('myApp', ['ui.router']); 
app.config(function($stateProvider, $urlRouterProvider) { 
$urlRouterProvider.otherwise('/'); 
$stateProvider 
    .state('test', { 
     url: '/test', 
     templateUrl: 'test.html', 
     controller: 'appController' 
    }) 
    .state('home', { 
     url: '/', 
     templateUrl: 'index.html', 
     controller: 'appController' 
    }); 
});

Controller.js обновляется, чтобы принять Ид Парам:

app.controller('appController',function($scope,$stateParams){ 
    var ctrl = this; 
    $scope.data = [{id:01},{id:02}]; 
    $scope.id = $stateParams.id; 
});

и index.html быть udpated на этой линии, чтобы передать значение идентификатора :

<li ng-repeat="x in data"><a ui-sref="test({ id: x.id })">{{ x.id }}</a></li>

источник

2016-10-07 03:45:18 laney

Спасибо, он работает, как я могу получить json obj в $ stateParams и как мне сопоставить мой маршрутизируемый вид. –

обновлено, чтобы передать значение «id» в шаблон. – laney

Как обрабатывать плавную навигацию с помощью углового ui-router

ответ

Смежные вопросы