AngularJS Expressions Is Not Working

Question

I am learning Angular so I can get into web app development. I'm doing a test project but angularjs expression is not working: Here is my folder structure:

WebContent
--css
----indexc.css
----w3.css
--js
----script.js
--pages
----home.html
----yourstory.html
----story.html
--index.html

My index.html is -

<!DOCTYPE html>
<html ng-app="publicStory">
<head>
<meta charset="ISO-8859-1">

<title>Dil Ki Bhadas</title>

<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" href="css/w3.css">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="js/script.js"></script>
</head>

<body ng-controller="homeController">

<!-- Menu Start -->
    <div class="container">
        <ul class="nav nav-justified" set-class-when-at-top="fix-to-top">
            <li><a class="active" href="#" ng-click="getHomeData()">Home</a></li>
            <li><a href="#yourstory" ng-click="getYourStories()">YOUR STORY</a></li>
        </ul>

    </div>
    <!-- Menu End -->
      <div id="main" class="w3-container">

    <!-- angular templating -->
        <!-- this is where content will be injected -->
    <div ng-view></div>

  </div>


</body>
</html>

My script.js is -

// create the module and name it scotchApp
var storyApp = angular.module('publicStory', ['ngRoute']);

// configure our routes
storyApp.config(function ($routeProvider,$locationProvider) {
    $locationProvider.hashPrefix('');
    $routeProvider
        // route for the home page
        .when('/', {
            templateUrl : 'pages/Home.html',
            controller  : 'homeController'
        })
        // route for the your story page
        .when('/yourstory', {
            templateUrl : 'pages/yourstory.html',
            controller  : 'homeController'
        })
        // route for the Sign UP page
        .when('/story', {
            templateUrl : 'pages/story.html',
            controller  : 'homeController'
        }); 
});


// create the controller and inject Angular's $scope
storyApp.controller('homeController', function($scope, $http, $location) {
    console.log('home Controller');
    $scope.yourStory = {};
    /*
     * Get Home Data
     */
    $scope.getHomeData = function() {
        console.log("In getHomeData");
        $http({
            method : 'POST',
            url : 'homeData',
            data : angular.toJson($scope.userform),
            headers : {
                'Content-Type' : 'application/json'
            }
        }).then(function(response) {
            alert("Got response for getHomeData");
            console.log(response.data);
            $scope.eyb = response.data;
        });
    };

    /*
     * Get Your Story
     */

    $scope.getYourStories = function() {
        console.log('In getYourStories');
        $scope.yourStory.action = 'fetchAllStory';
        $scope.yourStory.id = -1;
        console.log($scope.yourStory);
        $http({
            method : 'POST',
            url : 'yourStory',
            data : angular.toJson($scope.yourStory),
            headers : {
                'Content-Type' : 'application/json'
            }
        }).then(function(response) {
            alert("Got response for getYourStories");
            console.log(response.data);
            $scope.yourStories = response.data;
            $scope.flag = false;
        });
    };

    $scope.getYourStoryById = function(Id) {
        console.log('In getYourStoryById');
        $scope.yourStory.id = Id;
        $scope.yourStory.action = 'getStoryById';
        console.log($scope.yourStory);
        $http({
            method : 'POST',
            url : 'yourStory',
            data : angular.toJson($scope.yourStory),
            headers : {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).then(function(response) {
            alert("Got response for getYourStoryById");
            console.log(response.data);
            $scope.yourStoryById = response.data;
            console.log($scope.yourStoryById);
            $location.path('/story');
        });
    };

});

My yourstory.html is -

<div class="w3-container">

    <div class="storyList" ng-hide="flag">

        <div id="side-nav">
            <img src="images/yourStory.jpg" alt="Trolltunga Norway" width="300">
        </div>

        <div id="content-wrapper">   
            <button class="w3-btn w3-blue"  ng-hide="flag" ng-click="flag = true">Write Your Story</button>

            <table>
                <tr ng-repeat="yourStory in yourStories">
                    <!-- <td>{{ yourStory.id }}</td>  -->
                    <td>{{ yourStory.writerName }}  
                        </p>
                        <a href="#story" ng-click="getYourStoryById(yourStory.id)">{{ yourStory.storyTitle }}</a></td>
                    <!--  <td>{{ yourStory.writerEmail }}</td> 
                    <td>{{ yourStory.storyTitle }}</td> -->
                </tr>
            </table>


        </div>
    </div>
</div>

and story.html is -

<div class="w3-container">

    <h1>Hello Story Page</h1>
    <table>
        <tr>

                <td>{{ yourStoryById.writerName }}</td> 
                </p>
                <td>{{ yourStoryById.writerEmail }}</td> 
                </p>
                <td>{{ yourStoryById.storyTitle }}</td>
                </p>
                <td>{{ yourStoryById.story }}</td>
        </tr>
    </table>
</div>

When user click on #story link in yourstory.html page, it calls getYourStoryById() function and get data from backend. I am able to get data from backend in this method and able to set this data in $scope.yourStoryById = response.data;.

My problem is when control is going to story.html ($location.path('/story')), I am able to see only "Hello Story Page" not other data from $scope.yourStoryById.

Please read Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - the summary is that this is not an ideal way to address volunteers, and is probably counterproductive to obtaining answers. Please refrain from adding this to your questions. — halfer
– halfer, Commented Jul 11, 2017 at 14:27

Nikolaj Dam Larsen · Accepted Answer · 2017-07-11 14:43:46Z

That is probably because when you switch route, angular creates a new instance of your homeController, so the scope you have access to on one page, is not the same scope you have access to on other pages.

To share the data, you have retrieved in one instance of a controller, with all your controllers, you can use a service. Since services are singletons they will always return the same instance every time it is injected.

There are a lot of resources on using services out there, so the next natural step in your AngularJS education, is looking up how services work. :-)

To get you started, here's an example of a service you might create:

angular.module('publicStory').service('myStoryService', myStoryService);

function myStoryService($http){
    // Public functions
    this.getYourStoryById = getYourStoryById;

    // Implementation
    function getYourStoryById (yourStory) {
        return $http({
            method : 'POST',
            url : 'yourStory',
            data : angular.toJson(yourStory),
            headers : {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).then(function(response) {
            alert("Got response for getYourStoryById");
            console.log(response.data);
            return response.data;
        });
    }
}

Collectives™ on Stack Overflow

AngularJS Expressions Is Not Working

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related