Component based routing using ui-router | AngularJS

Question

We had created a component named contact using [email protected] and [email protected] problem lies on click of a button,nothing is displayed in the home page.It would be great if someone could help us to figure out the error.

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <title>Component based routing</title>
    <!--Styles-->

    <!--Libs-->
    <script src="../libs/angular.js"></script>
    <script src="../libs/angular-ui-router.js"></script>

    <!--Components-->
    <script src="app.js"></script>
    <script src="contact/contact.js"></script>
    <script src="contact/contact.component.js"></script>

</head>

<body>
    <h1>Component based routing</h1>
    <div ng-app="app">
        <ul>
            <li>
                <a href="#/contact">Contact</a>
            </li>
        </ul>
        <h4>Test</h4>
        <ui-view></ui-view>
    </div>
</body>

</html>

app.js

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

contact.js

angular
    .module('contactApp', ['ui-router']);

contact.component.js

angular
    .module('contactApp')
    .config(['$stateProvider',function ($stateProvider) {
        $stateProvider.state('contact', {
                url: '/contact',
                component: 'contact'
            })
    }])
    .component('contact',{
        template: `<h1>Contact</h1>`
    })

Bill P · Accepted Answer · 2019-11-21 13:15:02Z

0

You app module, where component is registered, is contactApp. You need to change html to that app module:

<div ng-app="contactApp">

EDIT

If we assume that app is the main app module and there are other modules declared, then all the other have to be registered under that main app like this:

angular.module('app', ['contactApp']);

and then in html you use app, as you already do:

<div ng-app="app">

*You can also have multiple apps in the same html but it is not the recommented way

edited Nov 21, 2019 at 13:15

answered Nov 21, 2019 at 12:00

Bill P

3,61610 gold badges24 silver badges34 bronze badges

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

1 Comment

ColleenF123456 Over a year ago

Assume we had multiple components with their respective modules;e.g home and contact.Do we have to register the app under a common module in the main page?

Collectives™ on Stack Overflow

Component based routing using ui-router | AngularJS

index.html

app.js

contact.js

contact.component.js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

index.html

app.js

contact.js

contact.component.js

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related