Simple angular project not working

Question

can't seem to get the test.json data to output on my local.

Not sure if it's to do with the fact I'm running it locally or not.

Thanks :)

index.html

<!doctype html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body ng-app="testApp">

    <div class="main" ng-controller="MainController">
        <div class="container">
            <div ng-repeat="info in test">
                <p>{{ info.nm }}</p>
                <p>{{ info.cty }}</p>
                <p>{{ info.hse }}</p>
                <img ng-src="{{ info.cty }}">
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>

    <!-- Include the AngularJS library -->
    <script  src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.min.js"></script>

    <!-- Modules -->
    <script src="js/app.js"></script>

    <!-- Controllers -->
    <script src="js/controllers/MainController.js"></script>

    <!-- Services -->
    <script src="js/services/servicetest.js"></script>

  </body>
</html>

app.js

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

MainController.js

app.controller('MainController', ['$scope', 'test', function($scope, test) {
  test.success(function(data) {
    $scope.test = data;
  });
}]);

servicetest.js

app.factory('test', ['$http', function($http) {
  return $http.get('test.json')
            .success(function(data) {
              return data;
            })
            .error(function(err) {
              return err;
            });
}]);

test.json is in the same folder as servicetest.js.

Answer 1

Several mistakes are there in your code.

You should not specify module dependency as blank( '' ) which would ask injector for '' and will throw an $injector error
```
  var app = angular.module('testApp', []); 
```

Factory should return a object of methods like

 app.factory('test', ['$http', function($http) { var getData = function(){ return $http.get('test.json') } return { getData: getData } }]);

Utilize newly created factory method from controller.

  test.getData().then(function(response) { $scope.test = response.data; });

Answer 2

Can you try with

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

instead of

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

That array is meant, You could simply say for injecting various dependency.

Simple angular project not working

Question

2 answers

solution1
1 2016-09-20 12:42:11

solution2
0 2016-09-20 12:42:08

Simple angular project not working

Question

2 answers

solution1 1 2016-09-20 12:42:11

solution2 0 2016-09-20 12:42:08

solution1
1 2016-09-20 12:42:11

solution2
0 2016-09-20 12:42:08