Typescript angular 1.x ui.router

Question

Trying to write a ui.router in typescript for the first time. as of now my code looks like this:

class Configuration {
    constructor(private $stateProvider: ng.ui.IStateProvider, 
                private $urlRouterProvider: ng.ui.IUrlRouterProvider) {
        this.init();
    }

    private init(): void {
        this.$stateProvider.state("main", Configuration.defaultState());
        this.$stateProvider.state("login", Configuration.login());
        this.$urlRouterProvider.otherwise('/main');
    }

    private static defaultState(): ng.ui.IState {
        return {
            url: "/main"
            , template: "<h1>hello</h1>"
        }
    }

    private static login(): ng.ui.IState {
        return {
            url: "/login"
            , template: "login"
        }
    }
}

angular.module('smm')
    .config(($stateProvider: ng.ui.IStateProvider, 
             $urlRouterProvider: ng.ui.IUrlRouterProvider) => {
        return new Configuration($stateProvider, $urlRouterProvider)
    });

As much as the compile code looks all right, the router does not seem to work, I have no error in the console nor any route is executed. I guess the problem is silly but I can't seem to find it. Any idea?

Radim Köhler · Accepted Answer · 2015-07-10 11:20:41Z

3

For me is your code working as is. There is a working plunker with your code as is.

This is the index.html

<html ng-app="smm" >

  <head>
    <title>my app</title>
    <style>ul { padding-left: 0; } li { list-style: none; }</style>
    <script data-require="angular.js@*"
            src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"
    ></script>
    <script data-require="ui-router@*" 
            src="//rawgit.com/angular-ui/ui-router/0.2.15/release/angular-ui-router.js"
    ></script>
    <script src="script.js"></script>
    <script src="Config.js"></script>
  </head> 

  <body>
    <ul>
      <li><a href="#/login">/login</a>
      <li><a href="#/main">/main</a>
    </ul>

    <div ui-view=""></div>
  </body> 
</html>

This is script.js:

var app = angular
  .module('smm', [
    'ui.router' 
  ])

And content of the Config.js could be found here

Check the working example here

Note, with

<html ng-app="smm" ng-strict-di>
...

we would need:

angular.module('smm')
    .config(['$stateProvider', '$urlRouterProvider',
    ($stateProvider, $urlRouterProvider) => {
        return new Configuration($stateProvider, $urlRouterProvider)
    }]);

Check that forked version here, and playground snippets here

answered Jul 10, 2015 at 11:20

Radim Köhler

124k48 gold badges243 silver badges343 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jacek Dominiak Over a year ago

awesome, thanks ... thought it was a stupid error from my side, lack of ui-view on the index .... sorry ... and thanks once again

Radim Köhler Over a year ago

If that helped, great! Enjoy amazing combination - Angular, Typescript and UI-Router ;)

Collectives™ on Stack Overflow

Typescript angular 1.x ui.router

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related