Mapping AngularJs component in routing when() method

Question

I am trying to create my first AngularJS app. But I can not understand why my routing is not working properly(i think there is some problem in my when() method and directory structure). Here is my directory structure(I have followed AngularJS standard naming convention). Directoty Structure

-Home
--sidebar
---sidebar.component
---sidebar.template
--home.component
--home.template
--home.module
-menu
--menu.module
--menu-list
---menu-list.component
---menu-list.template
-app.js

app.js

    angular.module('myApp', [
  'ngRoute',
  'menu',
  'home'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider) {
  $locationProvider.hashPrefix('!');

  $routeProvider
  .when('/menu-list', {
    template: '<menu-list></menu-list>'
  })
  .when('/home', {
    template: '<home></home>'
  })
  .when('/sidebar', {
    template: '<sidebar></sidebar>'
  })
  .otherwise('/home');
}]);

menu.module.js

angular.module('menu',[]);

menu-list.component.js

angular.module('menu')
.component('menu-list', {
    templateUrl: 'menu/menu-list/menu-list.html',
    controller: [
        function MenuListController() {
            alert("MenuListController Called");
        }
    ]
});

I dont know how <menu-list> in when() method works, I mean do i have to name it with template(html) or component name — user6717114
– user6717114, Commented Feb 5, 2018 at 13:02

Mickers · Accepted Answer · 2018-02-05 15:20:23Z

0

Been a long time since I've tried using ngRoute but here's how my 'otherwise' statement differs from yours:

.otherwise({
    redirectTo: '/home'
  });

The difference is here I pass in an object with the property 'redirectTo'. You can check this article out as well.

answered Feb 5, 2018 at 15:20

Mickers

1,4492 gold badges21 silver badges32 bronze badges

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

1 Comment

user6717114 Over a year ago

what should be inside '<>' in when() method? Should it be the component name or module name?

user6717114 · Accepted Answer · 2018-02-06 05:15:45Z

The Problem was I did not name component correctly. In angularJS to include the view in html we need to name component in camelCase and it will be included by hyphen-case

Component name: 'phoneList'
View name: '<phone-list></phone-list>'

Example from AngularJS-Tutorial

app/index.html:

<html ng-app="phonecatApp">
<head>
  ...
  <script src="bower_components/angular/angular.js"></script>
  <script src="app.js"></script>
  <script src="phone-list.component.js"></script>
</head>
<body>

  <!-- Use a custom component to render a list of phones -->
  <phone-list></phone-list>

</body>
</html>

app/phone-list.component.js:

// Register `phoneList` component, along with its associated controller and template
angular.
  module('phonecatApp').
  component('phoneList', {
    template:'phone-list.html',
    controller: function PhoneListController() {
      //...
    }
  });

Note:If any error or written badly feel free to Edit

Collectives™ on Stack Overflow

Mapping AngularJs component in routing when() method

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related