如何使用angular ui-router实现流畅的导航

How to handle smooth navigation using angular ui-router

本文关键字：导航 实现 何使用 angular ui-router      更新时间：2023-09-26

我是angular的新手，使用angular ui-router创建一个小项目。在进入文档之后，我已经创建了示例流。但是我在将json值传递给模板时卡住了。

  • 我无法在页面上绘制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>

演示-活塞

尝试将test.html更改为:

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

并为索引添加一个新状态(我称之为'home')，所以你的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更新为接受'id'参数:

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

和index.html将在这一行更新，以传递一个id值:

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