CODEWITHSUNDEEP
javascriptangularjsangular-ui-router
Javacadabra
Javacadabra

Reputation: 5758

Angular view is not being updated

Does anyone know where I am going wrong? I am trying to load up a new view on a section of the page in AngularJS.

I have the following code within sidebar.html:

<ul>
    <li><a ui-sref="MainPage({themeName:'theme1'})">Theme 1</a></li>
    <li><a ui-sref="MainPage({themeName:'theme2'})">Theme 2</a></li>
</ul>

Then my module.js file which contains all my routes looks like this:

var main = {
    name: "MainPage",
    url: "/:themeName",
    views: {
        "mainContent": {
            controller: "MainPageController",
            templateUrl: function($stateParams){
                var url =  'modules/main/template/' + $stateParams.themeName + '/home.html';
                console.log(url);
                return url;
            },
        },
        "sidebar":{
            templateUrl: "modules/main/template/sidebar.html",
            controller: "SidebarController"
        }
    }
};
$stateProvider.state(main);

When I look at the console I can see that the urlbeing returned is correct but my view isn't updated on the screen.

Would anyone be able to point out where I'm going wrong, I'm not seeing any errors in my console and the application is loading fine.

Any help is much appreciated

The views I'm trying to load reside in modules/main/template/theme1/home.html and modules/main/template/theme2/home.html

the HTML for these views are as follows:

/theme1/home.html

<h1>This is theme 1</h1>

/theme2/home.html

<h1>This is theme 2</h1>

This is where I am using ui-view:

<body>
    <!-- SIDEBAR -->
    <div id="sidebar" class="col-md-2 animated fadeIn" ui-view="sidebar" ng-cloak>
    <div ng-include="modules/main/template/sidebar.html"></div>
    </div>
    <!-- HEADER -->
    <div id="header" class='col-md-10'>
        <img src='assets/images/logo.png' alt='' width='270' />
        <ul class="breadcrumb">
            <li class="active">{{ 'MAIN.NAVIGATION.LINK1' | translate }}</li>
            <li><a href="#">{{ 'MAIN.NAVIGATION.LINK2' | translate }}</a></li>
            <li><a>{{ 'MAIN.NAVIGATION.LINK3' | translate }}</a></li>
        </ul>
    </div>
    <!-- MAIN CONTENT -->
    <div id="main-container" class="col-md-10 animated fadeIn" ui-view="mainContent" ng-cloak></div>
    <div id="footer" class="col-md-12"><p>This is a test site</p></div>
    <!-- SCRIPTS -->
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
    <script src="lib/all.js"></script>
    <script src="modules/app.js"></script>
</body>

Ok, so we've established that it looks like a routing problem on NodeJS. I am using gulpJS to start up my server like this:

gulp.task('server', function() {
  gulp.src([DIRDEST])
    .pipe(webserver({
          fallback : 'index.html',
          livereload : false,
          open : false,
          directoryListing: {
            enable: true,
            path:   'target/index.html'
          }
      }));
});

Upvotes: 1

Views: 74

Answers (1)

Shashank Agrawal
Shashank Agrawal

Reputation: 25797

Make sure you have defined ui-view where you want to render the template:

<div ui-view="mainContent"></div>

Update

I guess, you should use the template instead of templateUrl:

template: function($stateParams){
     var url =  'modules/main/template/' + $stateParams.themeName + '/home.html';
     console.log(url);
     return url;
}

Tip

Also, if you want to re-execute your MainPageController on view change (since both the states are same, just the parameter is changing) then you have to use ui-sref-opts:

<ul>
    <li><a ui-sref="MainPage({themeName:'theme1'})" ui-sref-opts="{reload: true}">Theme 1</a></li>
    <li><a ui-sref="MainPage({themeName:'theme2'})" ui-sref-opts="{reload: true}">Theme 2</a></li>
</ul>

Upvotes: 1

Related Questions