AngularJS routing issue ui-router

Question

AngularJS routing issue ui-router

622 Views Asked by Syed ibrahim At 27 February 2021 at 07:41

I'am not getting what is the problem, I have an index.html file and an app.js file

Index.html contains two ui-sref inside anchor tag
app.js as stateprovider. Please solve the issue. Thanks for taking out your precious time

var app=angular.module('myApp',['ui.router']);
app.config(function($stateprovider){
    var home=
        {
            name:'home',
            url:'/home',
            template:"<h1>Home</h1>",
            controller: 'myCtrl'
        };
    var contacts=
        {
            name:'contacts',
            url:'/contacts',
            template:"<h1>Contacts</h1>",
            controller: 'myCtrl'
        };
        $stateprovider.state(home)
        $stateprovider.state(contacts)
});
app.controller("myCtrl",function($scope,$http){
})

<!doctype html>
<html ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.20/angular-ui-router.js"></script>
    <script src="https://unpkg.com/[email protected]/release/angular-ui-router.js"></script>
    <script src="./app.js"></script>  
  </head>
  <body  >
      <div ng-controller="myCtrl">
        <ul>
          <li><a ui-sref="home">Home</a></li>
          <li><a ui-sref="contacts">Contacts</a></li>
        </ul>  
        <div>
          <div ui-view>
          </div>    
        </div>
      </div>
  </body>
</html>

Original Q&A

There are 1 best solutions below

**Bill P** · Answer 1 · 2021-02-27T16:40:32.820000

If you:

keep only one script for angular router(version 1.0 is the latest)
replace $stateprovider with $stateProvider

it works fine:

var app=angular.module('myApp',['ui.router']);
app.config(function($stateProvider){
    var home=
        {
            name:'home',
            url:'/home',
            template:"<h1>Home</h1>",
            controller: 'myCtrl'
        };
    var contacts=
        {
            name:'contacts',
            url:'/contacts',
            template:"<h1>Contacts</h1>",
            controller: 'myCtrl'
        };
        $stateProvider.state(home)
        $stateProvider.state(contacts)
});
app.controller("myCtrl",function($scope,$http){
})

<!doctype html>
<html ng-app="myApp">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.20/angular-ui-router.js"></script>
   
    <script src="./app.js"></script>  
  </head>
  <body  >
      <div ng-controller="myCtrl">
        <ul>
          <li><a ui-sref="home">Home</a></li>
          <li><a ui-sref="contacts">Contacts</a></li>
        </ul>  
        <div>
          <div ui-view>
          </div>    
        </div>
      </div>
  </body>
</html>

AngularJS routing issue ui-router

There are 1 best solutions below

Related Questions in ANGULARJS

Related Questions in ANGULAR-UI-ROUTER

Related Questions in UI-SREF

Trending Questions

Popular # Hahtags

Popular Questions