angular and ui-router example is not working

Question

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>

you never initialize angular in this code snippet. there is never a reference to `ng-app`. — Claies, Apr 02 '15 at 11:03

score 1 · Accepted Answer · edited May 23 '17 at 10:24

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.

Ok great... Thank you, I'll check what are the differences... to make my example work. So I don't do the same mistakes again and again ... It's for three days I'm busy to try to find a workable solution and ended up with ui-router ... but yah I mesed up a bit , and try and retry to get things work :=) Thank you for your help:=) — Laurent Lequenne, Apr 02 '15 at 16:42

angular and ui-router example is not working

1 Answers1