Angularjs - 在URL更改時將html代碼附加到正文

Question

我正在基於Angular的單頁應用程序。我想做一些類似於由div製作的卡片堆棧。喜歡這個。

想法是，應用程序將有一些URL鏈接和卡進行網址更改時追加。例如，我有4個鏈接。主頁|關於|聯繫人|詳細信息

在頁面加載將追加家庭卡，然後關於等。所以網址會改變，下一張卡應該附加。

所以我的問題是：如何在url中改變URL時附加一些html塊？我的意思是URL將被改變，但鑑於應該是一樣的，我想只是追加一些HTML到現有視圖

感謝

Answer 1

如果使用ui.router您可以用圖片做這樣的和更新的範圍。

這裏是一個代碼示例

'use strict'; 

angular 
    .module('myApp', [ 
    'ui.router' 
    ]) 
    .config(function ($locationProvider, $stateProvider, $urlRouterProvider, $compileProvider) { 

    // define states 
    $stateProvider 
    .state('home', { 
     url: '/', 
     templateUrl: 'views/home.html' 
    }) 
    .state('about', { 
     url: '/about', 
     templateUrl: 'views/about.html' 
    }); 

    // define alternative route 
    $urlRouterProvider.otherwise('/'); 

    }) 

    .run(function ($rootScope) { 

     // image changes with route change 
     if(toState.url === '/') { 
     $rootScope.headerImg = 'images/headers/home.jpg'; 
     } else if (toState.url === '/about') { 
     $rootScope.headerImg = 'images/headers/about.jpg'; 
     } else { 
     $rootScope.headerImg = 'images/headers/error.jpg'; 
     } 

    }); 

    });