how to implement controller with ui-router angularJS

Question

im trying to use ui-router in AngularJS for the first time, but i think ive set up script.js file incorrectly. Any help would be appreciated. Is the problem with the app.controller?? Where have i gone wrong?

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

app.config(function($stateProvider) {

    var homeState = {
    name: 'home',
    url: '/home',
    templateUrl: 'home.html',
    controller: 'HomeCtrl'
  },

    var category1State = {
    name: 'category1',
    url: '/category1',
    templateUrl: 'category1.html',
    controller: 'Category1Ctrl'
  },

    var category2State = {
    name: 'category2',
    url: '/category2',
    templateUrl: 'category2.html',
    controller: 'Category2Ctrl'
  },

    var category3State = {
    name: 'category3',
    url: '/category3',
    templateUrl: 'category3.html',
    controller: 'Category3Ctrl'


  };

   otherwise({redirectTo: '/home' })


  $stateProvider.state(homeState);
  $stateProvider.state(category1State);
  $stateProvider.state(category2State);
  $stateProvider.state(category3State);

});

app.controller('HomeCtrl', ['$scope', '$http', function($scope, $http, $stateParams) {
     $http.get('home.json').then(function(response){
     $scope.home = response.data;
  });
}])

app.controller('Category1Ctrl', ['$scope', '$http', function($scope, $http, $stateParams) {
    $http.get('category1.json').then(function(response){
    $scope.category1 = response.data;
  });
}])

app.controller('Category2Ctrl', ['$scope', '$http', function($scope, $http, $stateParams) {
    $http.get('category2.json').then(function(response){
    $scope.category2 = response.data;
  });
}])

app.controller('Category3Ctrl', ['$scope', '$http', function($scope, $http) {
    $http.get('category3.json').then(function(response){
    $scope.category3 = response.data;
  });
}])

and my index.html

<!DOCTYPE html>
<html lang="en" ng-app="catalogue">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->


    <title> Catalogue </title>

    <!-- Bootstrap core CSS -->
    <link href="bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="style.css" rel="stylesheet">


  </head>

  <body>

    <div class="container">

      <!-- The justified navigation menu is meant for single line per list item.
           Multiple lines will require custom code not provided by Bootstrap. -->
      <div class="masthead">
        <h3 class="text-muted"> Catalogue </h3>
        <nav>
          <ul class="nav nav-justified">

            <li><a ui-sref="home" ui-sref-active="active">Home </a></li>
            <li><a ui-sref="category1" ui-sref-active="active">Category1</a></li>
            <li><a ui-sref="category2" ui-sref-active="active">Category2</a></li>
            <li><a ui-sref="category3" ui-sref-active="active">Category3</a></li>


          </ul>
          <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </nav>
      </div>

     <div ng-controller="HomeCtrl">
         <div ng-view></div>
     </div>

      <!-- Site footer -->
      <footer class="footer">
        <p>&copy; 2017 Company, Inc.</p>
      </footer>

    </div> <!-- /container -->


   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
    <script src="script.js"></script>
    <ui-view></ui-view>
  </body>
</html>

whats your error message, or what are you to doing and expecting and what it the actual result? also, i think you're running two different routers at the same time. either ngRoute or uiRouter — alphapilgrim
– alphapilgrim, Commented Feb 1, 2017 at 19:25

alphapilgrim · Accepted Answer · 2017-02-01 19:31:49Z

Heres an example codepen to get you started, hope it helps:

(function() {
  'use strict';

  function config($stateProvider, $urlRouterProvider, $httpProvider) {
    $urlRouterProvider.otherwise('/');
    $stateProvider
      .state('home', {
        url: '/',
        controller: 'MainController as vm'
      })
      .state('other', {
        url: '/other',
        controller: 'OtherController as vm'
      });

    $httpProvider.interceptors.push(function() {
      return {
        response: function(res) {
          /* This is the code that transforms the response. `res.data` is the
           * response body */
          res.data = {
            data: data
          };
          res.data.meta = {
            status: res.status
          };
          console.log(JSON.stringify(res));
          return res;
        }
      };
    });

  }

  function cacheFactory($cacheFactory) {
    return $cacheFactory('headlineCache', {
      capacity: 1
    });
  }

  function MainController(httpInterceptor) {
    var vm = this;
    console.log('MainController');
    vm.title = 'Main Title';
    httpInterceptor
      .consoleLog();
  }

  function OtherController() {
    var vm = this;
    vm.title = 'Other Title';
    console.log('OtherController');
  }

  function httpInterceptor($http) {
    return {
      consoleLog: consoleLog
    };

    function consoleLog() {
      return console.log('httpInterceptor');
    }
  }

  function contactCard() {
    return {
      scope: false,
      restrict: 'E',
      template: '<div><h2></h2><p></p></div>'
    };
  }

  angular
    .module('app', ['ui.router'])
    .config(config)
    .controller('MainController', MainController)
    .controller('OtherController', OtherController)
    .directive('contactCard', contactCard)
    .factory('cacheFactory', cacheFactory)
    .factory('httpInterceptor', httpInterceptor);
}());

.container-fluid {
  background-color: #222;
  color: #fff;
  aside {
    position: absolute;
    left: 1px;
    top: 5px;
    ul {
      list-style-type: none;
      padding: 10px;
      li {
        margin: 0 0 4px 4px;
      }
      li a {
        padding: 4px;
        text-decoration: none;
        color: #fff;
      }
      .active {
        background-color: #fff;
        color: #222;
        border-radius: 4px;
      }
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>
<div class="container-fluid" ng-app="app">
  <aside>
    <ul>
      <li><a ui-sref="home" ui-sref-active="active">Home</a>
      </li>
      <li><a ui-sref="other" ui-sref-active="active">Other</a>
      </li>
    </ul>
  </aside>
  <div class="container" ui-view>
    <h1 class="text-center" ng-bind="vm.title"></h1>
  </div>
</div>

its just the navbar that loads, the routing to the other pages, doesnt actually work. Its just ui.router i want to use.. where am i using ngRoute?
@user6086008 I see in your script tags you have ngroute. You have two different ui-views defined. You need to name each views and point the specific route to that view.

Collectives™ on Stack Overflow

how to implement controller with ui-router angularJS

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