AngularJS routing issue ui-router

Question

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>

Prevoiusly, I had only one CDN, just for checking I put one more but that still doesn't solve the problem — Syed ibrahim
– Syed ibrahim, Commented Feb 27, 2021 at 8:20
try changing $stateprovider to $stateProvider. Also an elaborate error message would help us more to debug the problem — Risalat Zaman
– Risalat Zaman, Commented Feb 27, 2021 at 12:44

Bill P · Accepted Answer · 2021-02-27 16:40:32Z

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>

Collectives™ on Stack Overflow

AngularJS routing issue ui-router

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related