angulaire.js - Comment implémenter Jump dans AngularJS? Avez-vous besoin d'écrire un itinéraire?

Question

Je veux réaliser que cliquer sur un lien accédera à la page de détails. Je suis un débutant en Angular, alors donnez-moi quelques réponses. Merci

Answer 1

Méthode 1 : utilisez ngRoute fourni avec angulaire
Dépendance : angulaire-route.js (bower install angulaire-route)
Site Web : http://docs.angularjs.cn/api/ngRoute/service/ $route#example
Utilisation :
a. Il doit être spécifié avec la directive ng-view dans l'interface utilisateur, par exemple : <p ng-view></p> zone de la page
b. Configurer l'inscription

// 注入 ngRoute
var angularApp = angular.module("Your App Name", ['ngRoute'])
angularApp.config(function ($routeProvider) {
    $routeProvider.
    when('/list', {
        // 配置列表路由及 Controller
        templateUrl: 'partial/list.html', //TODO 列表页面
        controller: 'listController' //TODO 列表控制器
    }).
    when('/detail', {
        // 配置详情路由及 Controller
        templateUrl: 'partial/detail.html', //TODO 详情页面
        controller: 'detailController' //TODO 详情控制器
    }).
    otherwise({
        //默认路由
        redirectTo: '/list'
    });
});

Méthode 2 : Utiliser un routeur ui tiers
Dépendance : angulaire-ui-router.js (bower install angulaire-ui-router)
Site Web : https://github.com/angular-ui / ui-router
Utilisation :
a. Vous devez spécifier la commande ui-view dans ui, par exemple : <p ui-view></p> ​la page
b. Configuration Registre

// 注入 ui.router
var angularApp = angular.module("Your App Name", ['ui.router'])
angularApp.config(function ($stateProvider) {
    $stateProvider.
    state('list',{
        url:'/list',
        templateUrl: 'list.html',
        controller: 'listController'
    }).
    state('detail',{
        url:'/detail',
        templateUrl: 'detail.html',
        controller: 'detailController'
    })
});

Vous pouvez vous référer à certains articles pour connaître l'utilisation détaillée et les différences. Chacun a ses propres avantages et inconvénients

Answer 2

Pour les applications d'une seule page, vous devez utiliser $router pour faire correspondre l'URL et le contrôleur de modèle.

<a href='#/detail/{{phone.id}}'>{{phone.name}}</a>

app.config(function($routeProvider) {
    $routeProvider
        // route for the home page
        .when('/home', {
            templateUrl : '/static/view/layout/home.html',
            controller  : 'HomeController'
        })
        .when('/detail/:id', {
            templateUrl : '/static/view/detail.html',
            controller  : 'DetailController'
        })
})

app.controller("DetailController", function($scope, $routerParams){
    console.log($routerParams.id);//
})

Si vous n'écrivez pas une candidature d'une seule page, c'est l'adresse normale de la page.

Answer 3

Ce qui précède a été entièrement expliqué. La méthode habituelle consiste à utiliser ui-router pour accéder à l'état que vous avez défini, comme celui-ci.