angularjs angular-ui-router multiple-views

angular and ui-router example is not working

Hello I'm trying a simple application with Angular and UI-Router... But for some reason, it's not working at all.

In chrome, there is no error in the console, but there is even no output at all

Maybe some one has some clue on what's happening... I definitely have no idea.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="/Scripts/angular.min.js"></script>
    <script src="/Scripts/angular-ui-router.js"></script>
</head>
<body>
    <div>
        <a href="#/media/list">Route 1</a>
        <div ui-view="viewSidebar"></div>
        <div ui-view="viewContent"></div>
    </div>

    <script>
        var app = angular.module('app', ['ui.router']);
        app.config(
          ['$stateProvider', '$urlRouterProvider',
              function ($stateProvider, $urlRouterProvider) {
                  $urlRouterProvider.otherwise('/media/list');
                  $stateProvider.state('mediaList', {
                      views: {
                          url: "/media/list",
                          'viewSidebar': {
                              template: '<p>SideBar</p>',
                              controller: 'SidebarControllerView'
                          },
                          'viewContent': {
                              template: '<p>Thumb view</p>',
                              controller: 'MediaControllerView'
                          }
                      }
                  });
              }]);

        app.controller('MediaControllerView', ['$scope', MediaControllerView]);
        app.controller('SidebarControllerView', ['$scope', SidebarControllerView]);


        function MediaControllerView($scope) {
            $scope.model = 1;
        };


        function SidebarControllerView($scope) {
            $scope.model = 1;
        };


    </script>
</body>
</html>

Solution

There is a working plunker

One important wrong setting is the URL. It does not belong to the view, but to the state:

...
$stateProvider.state('mediaList', {
      // url belongs to the state
      url: "/media/list",
      views: {
          // url does not belong to the views
          // url: "/media/list",
          'viewSidebar': {
              template: '<p>SideBar</p>',
              controller: 'SidebarControllerView'
          },
          'viewContent': {
              template: '<p>Thumb view</p>',
              controller: 'MediaControllerView'
          }
      }
  });
  ...

Check it here

And also, as DTing spotted we have to provide ng-app:

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

NOTE: ng-strict-di is not a must but... it is a must - to avoid later issues...

if this attribute is present on the app element, the injector will be created in "strict-di" mode. This means that the application will fail to invoke functions which do not use explicit function annotation (and are thus unsuitable for minification), as described in the Dependency Injection guide, and useful debugging info will assist in tracking down the root of these bugs.