CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
jlp
jlp

Reputation: 1706

Angular UI-Router with component not working

I have a simple project that uses ui-router with component. For the 'hello' component, nothing happened if I clicked on the 'hello' link; if I clicked on the "About" link, then it showed the view because it doesn't use a component. Can someone please let me know why the 'hello' component is not working? I have tried different version of angular-ui-router.js, but didn't fix the issue. Thanks.

index.html:

<!DOCTYPE html>
<html>
 <head>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
 <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>  -->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.js"></script> 
 <script src=https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-rc.1/angular-ui-router.min.js"> </script> 
 <script src="js/hello-component.js"></script> 
 <script src="js/hellogalaxy-module.js"></script>

 <style>.active { color: red; font-weight: bold; }</style>
</head>
 <body ng-app="hellogalaxy">
    <a ui-sref="hello" ui-sref-active="active">Hello</a>
    <a ui-sref="about" ui-sref-active="active">About</a> 
<ui-view></ui-view>
</body>
 </html>

hellogalaxy-module.js:

 var myApp = angular.module('hellogalaxy', ['ui.router']);
 myApp.config(function($stateProvider) {
 var helloState = {
       name: 'hello',
       url: '/hello', 
       component: 'hello'
 };

 var aboutState = {
       name: 'about',
       url: '/about',
       template: '<h3>Its the UI-Router hello world app!</h3>'
 } 
 $stateProvider.state(helloState);
 $stateProvider.state(aboutState);
 });

hello-component.js:

 angular.module('hellogalaxy').component('hello', 
 {
     template: '<h3>{{$ctrl.greeting}} Solar System!</h3>'            
     controller: function() {  this.greeting = 'hello'}
 })

Upvotes: 0

Views: 480

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222552

You should load the module first and then the component, change the order as,

 <script src="js/hellogalaxy-module.js"></script>
<script src="js/hello-component.js"></script>

Upvotes: 2

Related Questions