Angularjs - 在URL更改时将html代码附加到正文

Question

我正在开发基于Angular的单页面应用程序。我想做像div这样的卡堆栈。像这样。

想法是app会有一些url链接，并且当url更改时应该附加卡。例如，我有4个链接。主页|关于|联系方式|细节

在页面加载时会附加主页卡然后关于等等。所以url会改变，下一张卡应该附加。

所以我的问题是：当Angl中的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';
      }

    });

  });