Search code examples
javascriptangularjsangularjs-scopehybrid-mobile-appurl-template

Accessing $state outside angularjs


I have an angularjs application. The app is supposed to be a hybrid mobile app for android and iOS. I have a JavaScript file in the project which is not a part of any module. In that JavaScript file I need to call the respective template URL, either through $state or any method which loads the controller also.

For $scope I found many ways of accessing it outside that angularjs project but could not find the same for $state.


Solution

  • we can use java-script

    window.location.href //to change location 
    

    for example: suppose right now I am in https://www.google.co.in/

    now i want to navigate to https://news.google.co.in/

    we can simply write

    window.location.href ="https://news.google.co.in/"
    

    it will navigate to that page

    Now in your project you might have defined your routing like this

    function routeConfig($stateProvider, $urlRouterProvider, $httpProvider) {
    $stateProvider
      .state('landing.home', {
        url: '/home',
        templateUrl: "app/components/homeFolder/home.html",
        controller: 'homeController',
        controllerAs: 'homec'
      })
      .state('landing.hometwo', {
        url: '/home1',
        templateUrl: "app/components/OnHand/Templates/OnHandhome.html",
        controller: 'OnHandController',
        controllerAs: 'Onhand'
      })
    
      })
    

    Now if you are in angularjs controller you will simply use

     $state.go('landing.home');// to navigate to your required location 
    

    But if you are not in angularjs Module you can change window.location to navigate to required page

    for example to achieve ---$state.go('landing.home'); you can write

    window.location.href ="https:complete url"
    

    or otherwise

    window.location.hash ="#/home1" //the url which is defined for that state