CODEWITHSUNDEEP
angularjstypescriptangular-ui-router
Jacek Dominiak
Jacek Dominiak

Reputation: 877

Typescript angular 1.x ui.router

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?

Upvotes: 1

Views: 1462

Answers (1)

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123901

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

Upvotes: 3

Related Questions