angular.js - Bagaimana untuk melaksanakan lompat dalam angularjs Adakah anda perlu menulis laluan?

Question

Saya ingin menyedari bahawa mengklik pautan akan melompat ke halaman butiran saya seorang pemula dalam Angular, jadi sila berikan saya beberapa jawapan. Terima kasih

Answer 1

Kaedah 1: Gunakan ngRoute yang disertakan dengan sudut
Kebergantungan: angular-route.js (bower install angular-route)
Laman web: http://docs.angularjs.cn/api/ngRoute/service/ $route#example
Penggunaan:
a. Ia perlu dinyatakan dengan arahan ng-view dalam ui, seperti: <p ng-view></p> kawasan halaman
b

// 注入 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'
    });
});

Kaedah 2: Gunakan ui-router pihak ketiga

Kebergantungan: angular-ui-router.js (bower install angular-ui-router)
Tapak web: https://github.com/angular-ui / ui-router
Penggunaan:
a Anda perlu menentukan perintah ui-view dalam ui, seperti: <p ui-view></p> Ini bersamaan dengan kawasan muat semula ​​halaman
b

// 注入 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'
    })
});

Anda boleh rujuk beberapa artikel untuk kegunaan dan perbezaan yang terperinci Masing-masing mempunyai kelebihan dan kekurangan tersendiri

Answer 2

Untuk aplikasi satu halaman, anda perlu menggunakan $router untuk memadankan url dan templatecontroller.

<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);//
})

Jika anda tidak menulis aplikasi satu halaman, itu adalah alamat halaman biasa.

Answer 3

Perkara di atas telah diterangkan sepenuhnya Kaedah biasa ialah menggunakan penghala-ui untuk melompat ke keadaan yang anda tentukan, seperti ini.