0

I'm working on single page aplication based on Angular. I want to do something like card stack made from divs. Like this.

enter image description here

Idea is that app will have some url links and card should be append when url changes. For example I have 4 links. Home | About | Contacts | Details

On page load will append home card then About etc. So url will change and next card should append.

So my question is: how append some html block when url changes in Angular? I mean that url will be changed but view should be the same and I want just append some html to existing view

Thanks

Buga1234
  • 151
  • 1
  • 3
  • 11

1 Answers1

0

If using ui.router you can do it like this and update the scopes with the images.

Here is a code example

'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';
      }

    });

  });
herrh
  • 1,328
  • 1
  • 16
  • 33
  • thanks for the answer. I think there is misunderstanding. I do not want to change views. Can I just append html code to existing view on url change?. – Buga1234 May 24 '16 at 22:34
  • Sure. You can use the same view for multiple routes... Then you can check if the route is correct and set the correct image.. That is happening in my code in lines following after `//images` The image changes with the different routes. The view doesn't if you use same view for multiple routes. – herrh May 24 '16 at 22:38
  • will the view reload when route changes? – Buga1234 May 24 '16 at 22:42
  • Check this on your own ;) – herrh May 24 '16 at 22:44
  • as I see it actually reloads . Is there some way to append html without reloading the view? – Buga1234 May 24 '16 at 22:53
  • 1
    Sure, see [here](http://stackoverflow.com/questions/18337093/updating-url-in-angular-js-without-re-rendering-view) or use google ;) – herrh May 24 '16 at 22:55
  • You are welcome! Happy coding and please accept this answer if it solved your problem. – herrh May 24 '16 at 22:58