Why doesn't the controller work in angularjs UI router?

Question

When I try to load the test state or any of these states, the controllers are not affected. The template has changed perfectly, but the data does not come from the specified controller in the state configuration.

And I did not use the ng-controller directive anywhere.

myApp.config(function($stateProvider,$urlRouterProvider){ $stateProvider.state('task', { url:'/task', controller:"TasksController", views:{ "sidebar":{templateUrl:'/partial/task/taskcreateform.html'}, "content":{templateUrl:'/partial/task/taskgrid.html'} } }) .state('notes', { url:'/notes', controller:"TasksController", views:{ "sidebar":{templateUrl:'/partial/task/taskcreateform.html'}, "content":{templateUrl:'/partial/task/taskgrid.html'} } }) .state('test', { url:'/test/:id', controller:"AtTestController", views:{ "sidebar":{templateUrl:'/partial/task/taskupdateform.html'}, "content":{templateUrl:'/partial/test.html'} } }) .state('edittask', { url:'/edittask/:editabletaskid', controller:"TasksController", views:{ "sidebar":{templateUrl:'/partial/task/taskupdateform.html'}, "content":{templateUrl:'/partial/task/taskgrid.html'} }, resolve:{ editabletask: function($stateParams,Task){ Task.get({id:$stateParams.editabletaskid}, function(response){ return response; }, function(err){ console.log(err); }); } } }); $urlRouterProvider.otherwise('task'); }); 

And my only controller is:

 ////////////////////TEST CONTROLLER///////////// myApp.controller("AtTestController",function($scope){ $scope.appname="Rahul Apps"; $scope.name=function(){ console.log($scope.appname); } $scope.name(); }); 

Answer 1

Dot:

Any Controller always refers to a view , not a message.

eg. instead of this:

 // because we used views, this controller is now skipped controller:"AtTestController", views:{ "sidebar":{templateUrl:'/partial/task/taskupdateform.html'}, "content":{templateUrl:'/partial/test.html'} } 

we need to:

 views:{ "sidebar":{ templateUrl:'/partial/task/taskupdateform.html', controller:"AtTestController", }, "content":{templateUrl:'/partial/test.html'} } 

Check the document for the difference:

Views override state template properties

If you define a views object, your state templateUrl, template, and templateProvider will be ignored. Thus, in case you need a parent layout for these views, you can define an abstract state containing the template and a child state in the layout state that contains the views object.