[Angular.js] Alcuni problemi

cenarius_88 · 14-04-2016, 23:52

Salve a tutti.
Premetto che sto imparando da qualche giorno questo "framework javascript" e non sono ancora espertissimo del pattern MVC...
Comunque ho seguito una guida su come installare e configurare tutti gli elementi fondamentali per le angular.js applications [su windows]

Spoiler:

Codice:

instalalto node,js e git
tramite npm install ho installato yo bower grunt-cli generator-angular karma
ho creato la mia directory per la prova e dentro ho eseguito il comando per lo scaffholding dei pacchetti
yo angular 
ed in seguito ho avviato il server
grunt server

Già dopo lo scaffholding ho notato che nonostante sia una procedura del tutto automatizzata il browser mostra le stesse robe della versione di default ma senza elementi stilizzati tramite css (suppongo ci sia un errore nel pacchetto per windows)
Tralasciamo questo poichè il css va comunque ricostruito per le proprie esigenze...
Provo a generare una mia app molto stupida che preleva dei dati da un file .json (un array di elementi con proprietà "name" e "balance") e me li restituisce in una tabella non formattata ordinandoli per "balance"

Quindi ho generato la pagina html iniziale, la index, semplicemente eliminando il contenuto di default all'interno del body e inserendo un tag view con direttiva ng-view=""...

index.html

Codice:

  <body ng-app="myappApp">
    <!--[if lte IE 8]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <!-- Add your site or application content here -->
    <div ng-view="">
      
    </div>


    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
     <script>
       !function(A,n,g,u,l,a,r){A.GoogleAnalyticsObject=l,A[l]=A[l]||function(){
       (A[l].q=A[l].q||[]).push(arguments)},A[l].l=+new Date,a=n.createElement(g),
       r=n.getElementsByTagName(g)[0],a.src=u,r.parentNode.insertBefore(a,r)
       }(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

       ga('create', 'UA-XXXXX-X');
       ga('send', 'pageview');
    </script>

    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-touch/angular-touch.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/controllers/userslist.js"></script>
        <!-- endbuild -->
</body>

quindi ho configurato la mia app col module e routing appropriati (e fin qui dovrebbe essere tutto ok

app.js

Codice:

angular
  .module('myappApp', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(['$routeProvider', function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/users.html',
        controller: 'UserslistCtrl',
      })
      .otherwise({
        redirectTo: '/'
      });
  }] );

users.html

Codice:

<table>
	<thead>Users</thead>
	<tbody>
		<tr ng-repeat="user in users | orderBy:balance">
			<td>{{ user.name }}</td>
			<td>{{ user.balance }}</td>
		</tr>
	</tbody>
</table>

Bene... a questo punto per far funzionare il tutto bisogna configurare il controller affinchè faccia una richiesta http al file .json e inserisce nella variabile di scope le info che mi interessano per poterle usare nella view...la guida che ho seguito usava il metodo classico

Codice:

angular.module('myappApp')
  .controller('UserslistCtrl',['$scope','$http',function ($scope,$http) {
  	$http.get('data/users.json')
  	.success(function (data) {
    	$scope.users = data;
  	};
       .error(function()){
	    console.log('Errore');
  });
}]);

ho visto che questo modo è deprecato e spulciando le api ho trovato il metodo corretto

Codice:

angular.module('myappApp')
  .controller('UserslistCtrl',['$scope','$http',function ($scope,$http) {
  	$http.get('data/users.json')
  	.then(function (data) {
    	$scope.users = data;
  	}, function () {
	    console.log('Errore');
  });
}]);

Tuttavia non va assolutamente... e mi restituisce un sacco di errori di cui non so che farmene

Codice:

angular.js:13424 SyntaxError: Unexpected token )
    at Object.parse (native)
    at fromJson (http://localhost:9000/bower_components/angular/angular.js:1285:14)
    at defaultHttpResponseTransform (http://localhost:9000/bower_components/angular/angular.js:10305:16)
    at http://localhost:9000/bower_components/angular/angular.js:10396:12
    at forEach (http://localhost:9000/bower_components/angular/angular.js:321:20)
    at transformData (http://localhost:9000/bower_components/angular/angular.js:10395:3)
    at transformResponse (http://localhost:9000/bower_components/angular/angular.js:11184:21)
    at processQueue (http://localhost:9000/bower_components/angular/angular.js:15757:28)
    at http://localhost:9000/bower_components/angular/angular.js:15773:27
    at Scope.$eval (http://localhost:9000/bower_components/angular/angular.js:17025:28)(anonymous function) @ angular.js:13424(anonymous function) @ angular.js:10137processQueue @ angular.js:15765(anonymous function) @ angular.js:15773Scope.$eval @ angular.js:17025Scope.$digest @ angular.js:16841Scope.$apply @ angular.js:17133done @ angular.js:11454completeRequest @ angular.js:11652requestLoaded @ angular.js:11593
userslist.js:39 Errore

solo l'ultima riga dipende dal mio codice mentre il resto viene da file che io non dovrei toccare...il problema risiede nella richiesta http perchè se inserisco nel controller i dati direttamente la view funziona

Codice:

angular.module('myappApp')
  .controller('UserslistCtrl',function ($scope) {
    $scope.users = [
		{
			'name' : 'User1',
			'balance' : '1200'
		},
		{
			'name' : 'User2',
			'balance' : '1270'
		},
		{
			'name' : 'User3',
			'balance' : '1140'
		},
		{
			'name' : 'User4',
			'balance' : '2070'
		}
	];
  });

C'è una soluzione? vorrei capire se sbaglio io (perchè non ho capito ancora ...ed allora mi tocca rimettermici sotto) oppure devo tutto questo al fatto di essere sotto windows e trovarmi come al solito bug su bug

chiedo scusa per essermi dilungato

OoZic · 21-04-2016, 23:39

console.log(typeof(data))
console.log(data)

quando ricevi i dati e vedi cosa stai ricevendo

21-04-2016, 23:39	#2
OoZic Senior Member Iscritto dal: Nov 2010 Città: Londra Messaggi: 620	console.log(typeof(data)) console.log(data) quando ricevi i dati e vedi cosa stai ricevendo __________________ > This is me < *When you gaze long into an abyss the abyss also gazes into you.*

Strumenti
Mostra una versione stampabile Invia questa pagina per email