On Clicking Search Button, i need to display result page in angular js

Question

I have a text box with a search Button as below

On clicking the search button, I am calling SearchController.search method and my expectation is it will display a new page with the result.

$scope.search = function () {
     $http.get('data/results.json').success(function (data) {
        $scope.activities = data;
        $state.go('results',data);
});

and my app.js looks as below

var myApp = angular.module('MyApp', ['ui.router']);
myApp.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider
     .state('results', {
         url: '/results',
         templateUrl: 'result.html',
         controller: 'SearchController'
      });
  $urlRouterProvider.otherwise('/');
});

But when I click on search button, nothing happens and url only changes to l/#/results .

I am not having any ui-view in search page and I want to go results page to display the result. How to get this fixed? what is the mistake I am doing?

Answer 1

With ui-router, state changes happens and different view is displayed based on state. So , when ui-router is used , moving from one page to another page is a wrong perception . We move from one state to another state and hence parameter passing can be done using "services".

Answer 2

If you want to display it on a different page, use the "ui-sref" on the html to navigate to the new page and call ng-init on the page e.g

<button type="button" ui-sref="results">

and on result.html, you can call the init on the parent node such as

<section ng-init="search()"> ..... .... </section> and your controller will look like this now

$scope.search = function () {
  $http.get('data/results.json').success(function (data) {
    $scope.activities = data;
});

Answer 3

You can't send a not mapped object into $state.go.

Looking the API: http://angular-ui.github.io/ui-router/site/#/api/ui.router.state.$state

Another similar problem: AngularJS: Pass an object into a state using ui-router