1

In case we have to prevent angular2 to open some route on mobile but we have to open same in web, which is best option

either usage to global service where check for screen size, or make some logic in separate file like authguard in angular2 on the basis of routing ?

or something else, if explain with the help of example it would be very useful to me.

Pardeep Jain
  • 84,110
  • 37
  • 165
  • 215

1 Answers1

1

Like you said, I would prefer making a global service who's job it is to return the current environment and use this service anywhere navigations are being made on a component. This way you can reuse the service for logic that may or may not be related to routing.

export class HeroesComponent implements OnInit {
  heroes: Hero[];
  selectedHero: Hero;

  constructor(
    private router: Router,
    private envCheckService: EnvironmentCheckService) { } 

  onSelect(hero: Hero): void {
    this.selectedHero = hero;
  }

  gotoDetail() {
    if (this.envCheckService.isMobileOrTablet() === false) {
      this.router.navigate(['/detail', this.selectedHero.id]);
      return;
    }
    this.router.navigate(['/otherplace'. this.selectedHero.id])

  }

}

And I guess the service would look something like this:

function _window() {
 return window;
}

@Injectable()
export class EnvironmentCheckService {

  constructor() {
  }

  public nativeWindow() {
      return _window();
   }

  public isMobileOrTablet(): boolean {
    return this.nativeWindow().mobileAndTabletcheck = function() {
      let check = false;
      (function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
      return check;
    }();
  }

}
Yeysides
  • 1,262
  • 1
  • 17
  • 27
  • What is **EnvironmentCheckService** here ?? Seems your code in incomplete, please elaborate more to clearify – Pardeep Jain Apr 26 '17 at 16:10
  • @PardeepJain EnvironmentCheckService is just a generic name for a service that you would implement who's job it would be to return an environment variable. Your question was what the best practice would be. If you want to see implementation please update question. – Yeysides Apr 26 '17 at 17:27
  • can you post implemented example along with this ? it would be very helpful for me. – Pardeep Jain Apr 27 '17 at 06:51
  • @PardeepJain I updated my answer. I also changed the method name being called because it returns a boolean now. Here's what I used as a ref: http://stackoverflow.com/questions/11381673/detecting-a-mobile-browser – Yeysides Apr 27 '17 at 14:36