Angularjs - Append html code to body when URL changes

Question

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

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

herrh · Accepted Answer · 2016-05-24 23:02:08Z

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

    });

  });

edited May 24, 2016 at 23:02

answered May 24, 2016 at 22:28

herrh

1,3781 gold badge17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Buga1234 Over a year ago

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?.

herrh Over a year ago

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.

Buga1234 Over a year ago

will the view reload when route changes?

herrh Over a year ago

Check this on your own ;)

herrh Over a year ago

Sure, see here or use google ;)

|

Collectives™ on Stack Overflow

Angularjs - Append html code to body when URL changes

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related