[Angular.js] Alcuni problemi [Archivio]

cenarius_88

14-04-2016, 22: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]

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

<body ng-app="myappApp">



<div ng-view="">

</div>


<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>



<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>




<script src="scripts/app.js"></script>
<script src="scripts/controllers/userslist.js"></script>

</body>

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

app.js

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
<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

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

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

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

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