ui-router $stateProvider text parameter not displaying with ui-view, AngularJS 1.6.x

Issue

Learning to use AngularJS (1.6.x) and ui-router and just trying to pass a simple text string (GOOD TEST) from a single $stateProvider.state parameter before I try more complicated things. Poured through other SO posts and AngularJS docs. My code has no syntax errors (komodo edit 11), and no angular reference or loading errors or any errors in console. Browser is chrome v66.0.x. The class/link to the state (US Calculator) and the URL are both executing just fine on the page. Just nothing happens when I click on the class to activate it. Guessing the .configs in the javascript are not set up properly. HTML and JS code follows:

angular
    .module('myTestApp', ['ui-router'])

.config(['$stateProvider', function($stateProvider){
    $stateProvider
        .state('usCalculator', {
            url: '/usCalculator',
            template: 'GOOD TEST'
        });
}]);

<!doctype html>
 <html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.18/angular-ui-router.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <script type="text/javascript" src="myTestApp.js"></script>
    <link rel="stylesheet" href="style.css">
  </head>
  
  <div class="container" ng-app="myTestApp">
      <a href="#/usCalculator">US Calculator</a>
      <div ui-view>
      </ui-view>
  </div>
</html>

Solution

There are 2 ng-app in your html and you are inserting "ui-router" , it should be "ui.router"

Check this plunkr

angular.module('myTestApp', ["ui.router"])

Answered By – Shashank Vivek

Answer Checked By – David Marino (AngularFixing Volunteer)

Issue

Solution

Leave a Reply Cancel reply