0

I am using ui-router for routing my angular app. I have set the routing configuration but didn't want to use controller as syntax. I am using following syntax:

.state('blog',{
        url: '/blog',
        templateUrl: '/templates/blog.html',
        controller: 'BlogController'
    })

However the template is being called into my ui-view but I BlogController is not being called. I have used console.log() into my BlogController but I didn't see anything in my console. Here is my BlogController.js

app.controller('BlogController', function($scope, PostService,){
    console.log(0);
    PostService.getPost().then(function(post){
        $scope.postModel = post;
    });
    console.log(1);
});

As you can see, I am using a service to call data using $http. Below is my PostService :

app.service('PostService', function ($http) {

this.getPost = function () {
   return $http({
        method : 'GET',
        url : 'http://domain.com/wp-json/wp/v2/posts'
    })
    .then(function(response){
        return response.data;
    }, function(error){
        return error;
    });
};
});

I think this the problem related to the service call. I have read some post about resolve property in state method of ui-router. I have tried that but nothing has working. Can somebody please help me to get rid out of this ?

Sharjil Khan
  • 43
  • 1
  • 9
  • Please make sure if you've included BlogController.js in your main html file, and also make sure if you've registered it as a module. – aliasav Oct 25 '16 at 07:26
  • I have included BlogController using require('./BlogController'). It was working fine prevously. but when I changed routing configuration from ngRoute to ui-router than it's not working. – Sharjil Khan Oct 25 '16 at 07:30
  • remove the `trailing comma` in controller declaration `app.controller('BlogController', function($scope, PostService){` – Sravan Oct 25 '16 at 07:31
  • what does it shows when u hit /blog in url – pritesh Oct 25 '16 at 07:32
  • can you update your question including app.js settings? (as in the ui-router settings, also make sure you have included 'ui.router' in your module definition) – aliasav Oct 25 '16 at 07:34
  • @Sravan is right, trailing comma is a syntax error, however if you havent seen this error then the blogcontroller file is probably not included – aliasav Oct 25 '16 at 07:44
  • @Sharjil Khan, are you getting any error in console, if yes, check my answer once, if no you haven't included the blog controller. – Sravan Oct 25 '16 at 07:46
  • I am not getting an error in console. It is a typo mistake while posting this question. – Sharjil Khan Oct 25 '16 at 08:12
  • @aliasav, here is my app.js var app = angular.module('mySiteApp', [require('angular-ui-router')]); – Sharjil Khan Oct 25 '16 at 08:13
  • `var app = angular.module('mySiteApp', ['ui.router'])` simply take `ui.router` – Sravan Oct 25 '16 at 08:19
  • @sravan, it is working but my service is not getting any data in $http call. It is giving me a warning as : Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://domain1.com/wp-json/wp/v2/tags. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://domain2.com’). What to do in this case – Sharjil Khan Oct 25 '16 at 08:26
  • just alert the response in the service and check, `alert(response.data)` before the return statement – Sravan Oct 25 '16 at 08:30
  • so if your getting CORS errors, you'll need to add CORS headers from your backend, what backend are you using? – aliasav Oct 25 '16 at 08:32
  • I am using wordpress as a backend. Can you pls tell me how to add CORS in it. – Sharjil Khan Oct 25 '16 at 08:35

1 Answers1

0

The declaration of the ui-router module is wrong

var app = angular.module('mySiteApp', [require('angular-ui-router')])

Should be,

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

Check this link for cors errors

Community
  • 1
  • 1
Sravan
  • 18,467
  • 3
  • 30
  • 54