using angularjs to fetch data doesn't work correctly

Question

I am trying to develop a simple web application using angularjs i have a table city that is created using entityframework database first.

I added angularjs nuget to my project.and create 2 files in my project named service and controller as you can see here :

controller

MyApp.controller('UpdateController', function ($scope, CityService) {

    getCities();

    function getCities() {

        CityService.getCities()

            .success(function (cities) {

                $scope.cities = cities;

            })

            .error(function (error) {

                $scope.status = 'Unable to load customer data: ' + error.message;

            });

    }

});

Service :

MyApp.factory('CityService', ['$http', function ($http) 
{
    var urlBase = 'http://localhost:37404/api';

    var CityService = {};

    CityService.getCities = function () {

        return $http.get(urlBase + '/default1');

    };

    return CityService;

}]);

I pass the data using webapi as you can see :

namespace MvcApplication8.Controllers
{
    public class Default1Controller : ApiController
    {
        private testDBEntities db = new testDBEntities();

        // GET: api/ManageStudentsInfoAPI  
        public IQueryable<City> GetStudent()
        {
            return db.Cities;
        }   
    }
}

Here is my view :

<header>
    <div class="content-wrapper">
        <div class="float-left">
            <p class="site-title">
                <a href="~/">ASP.NET Web API</a></p>
        </div>
    </div>
    <script src="~/Scripts/jquery-1.7.1.js"></script>
    <script src="~/Scripts/jquery-1.7.1.min.js"></script>
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/MyAngularFile/Service.js"></script>
    <script src="~/MyAngularFile/Controller.js"></script>
</header>
<div id="body">
    <div ng-controller="UpdateController">    
        <table class="table">    
            <tr> 

                <th>Id</th>

                <th>Name</th>

                <th>Country</th>

            </tr>

            <tr ng-repeat="a in cities">

                <td>{{a.Id}}</td>

                <td>{{a.Name}}</td>

                <td>{{a.Country}}</td>

           </tr>

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

But the result is like this :

My browser errors:

Is ng-app specified in the html code? Are there any errors in the browser console (Ctrl+shift+i to bring it up)? — Petter
– Petter, Commented Apr 6, 2016 at 6:53
@Petter i don't have any tag in my html code named ng-app .i added the error list to my post — Ehsan Akbar
– Ehsan Akbar, Commented Apr 6, 2016 at 6:56
Ok, you need an ng-app="MyApp" attribute, for example in the body tag. Also, the browser console complains that MyApp hasn't been defined. You probably need to add var MyApp = angular.module('MyApp', []); in the Service.js file. — Petter
– Petter, Commented Apr 6, 2016 at 7:01
You could check a sample plunker : plnkr.co/edit/FcgUs3NMTa6lsNDLLhKR?p=preview — Madhukar
– Madhukar, Commented Apr 6, 2016 at 7:25

fikkatra · Accepted Answer · 2016-04-06 06:59:20Z

0

Try this:

var MyApp = angular.module('MyApp',[]);

Then, in html:

<div id="body" ng-app="MyApp">

answered Apr 6, 2016 at 6:59

fikkatra

5,9024 gold badges45 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Ehsan Akbar Over a year ago

i get this error :Error: [$injector:modulerr] Failed to instantiate module MyApp due to: [$injector:nomod] Module 'MyApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. errors.angularjs.org/1.5.3/$injector/nomod?p0=MyApp

Ehsan Akbar Over a year ago

Where should i add this line var MyApp = angular.module('MyApp',[]);

fikkatra Over a year ago

before your controller/service implementation

Ehsan Akbar Over a year ago

can i add the var MyApp = angular.module('MyApp',[]); in another javascript file named module ?

fikkatra Over a year ago

Try adding a script app.js with contents var MyApp = angular.module('MyApp',[]);. Then, in both Service.js and Controller.js, add this on top of the script: var MyApp = angular.module('MyApp');

Collectives™ on Stack Overflow

using angularjs to fetch data doesn't work correctly

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related