yeoman angular not rendering views - javascript

So, I've been trying to set up an app using Yeoman's official angular gen and this hapijs generator for the backend. Now, so far on the backend I've only got the home route serving the index.html as you can see here
server.route({
method: "GET",
path: "/{param*}",
handler: {
directory: {
path: ["../../client/app", "../../client/bower_components"]
}
},
config: {
auth: false
}
});
next();
};
exports.register.attributes = {
name: 'index'
};
The thing is that worked until I tried to add a new service, controller and view to the angular app, when I did so the views stopped rendering.
Heres the service:
angular.module('graphMeDota2App', [])
.service('MatchesService', ['$httpq', 'config', function ($httpq, config) {
// AngularJS will instantiate a singleton by calling "new" on this function
return {
GetAllMatches: function(){
return $httpq.get(config.steamApiBaseUrl + 'IDOTA2Match_570/GetMatchHistory/v001/?key' + config.steamApiKey + '&accountId' + config.steamAccountId + '&matches_requested=5');
}
};
}]);
Heres the controller:
angular.module('graphMeDota2App')
.controller('MatchesCtrl', ['MatchesService', function ($scope, MatchesService) {
$scope.matches = {};
$scope.getMatches = function(){
MatchesService.GetAllMatches().done(function(response){
$scope.matches = response.data;
});
};
$scope.getHeroPlayed = function(match){
console.log(match);
return 'asdfasdf';
};
}]);
Heres the view:
<div class="jumbotron">
<table>
<tr>
<th>Number</th>
<th>Match Id</th>
</tr>
<tr ng-repeat="match in matches">
<th>{{$index}}</th>
<th>{{match.match_id}}</th>
</tr>
</table>
</div>
And here's my app.js:
angular
.module('graphMeDota2App', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
})
.when('/matches', {
templateUrl: 'views/matches.html',
controller: 'MatchesCtrl'
})
.otherwise({
redirectTo: '/'
});
});
And finally, this is what I get: .
There are no javascript errors, no server sider errors and the views were rendering perfectly before I added my controller/service (both added with the yeoman command line generator).

So, following what Byron Sommardahl said found out the problem was when I was creating my service, specifically this line:
angular.module('graphMeDota2App', [])
.service('MatchesService', ['$httpq', 'config', function ($httpq, config) {
Only thing I did was remove the first "[]" in the first line, then it started working. Any thoughts on why that happened?
angular.module('graphMeDota2App')
.service('MatchesService', ['$http', 'config', function ($http, config) {

Related

Angularjs routing template is not displayed

I have the following app.js file:
'use strict';
var app = angular.module('app', [
'auth0',
'angular-storage',
'angular-jwt',
'ui.router',
'Environment',
'Api',
'Profile'
]);
app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('main', {
url: '/main',
templateUrl: 'js/modules/App/views/frontpage.html'
})
.state('login', {
url: '/login',
templateUrl: 'js/modules/User/views/login.html',
controller: 'LoginCtrl'
});
$urlRouterProvider
.otherwise('/main');
}]);
app.config(['authProvider', '$httpProvider', '$locationProvider', 'jwtInterceptorProvider',
function myAppConfig(authProvider, $httpProvider, $locationProvider, jwtInterceptorProvider) {
authProvider.init({
domain: 'marcrasmussen.eu.auth0.com',
clientID: 'hphpe4JiceMW8FSA02CN7yOYl5fUaULe',
loginUrl: '/login'
});
authProvider.on('loginSuccess', ['$location', 'profilePromise', 'idToken', 'store',
function ($location, profilePromise, idToken, store) {
console.log("Login Success");
profilePromise.then(function (profile) {
store.set('profile', profile);
store.set('token', idToken);
});
$location.path('/');
}]);
//Called when login fails
authProvider.on('loginFailure', function () {
alert("Error");
});
//Angular HTTP Interceptor function
jwtInterceptorProvider.tokenGetter = ['store', function (store) {
return store.get('token');
}];
//Push interceptor function to $httpProvider's interceptors
$httpProvider.interceptors.push('jwtInterceptor');
}]);
app.run(['auth', function (auth) {
// This hooks all auth events to check everything as soon as the app starts
auth.hookEvents();
}]);
And i have the following profile.js file:
angular.module('Profile', [])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('profile', {
abstract: true,
url: '/profile'
})
.state('profile.index', {
url: '/index',
templateUrl: 'js/modules/Profile/views/viewProfile.html'
})
}]);
in my index.html the files are listed as such:
<script src="js/modules/Profile/lib/profile.js"></script>
<script src="js/modules/App/lib/app.js"></script>
<script src="js/modules/App/directives/login/login.js"></script>
And lastly ofcourse i have my view port:
<div class="main" ui-view>
</div>
As you can tell my application starts on the route /main this works perfectly fine and frontpage.html is being rendered with all the html inside that file.
However when i go to profile.index or /profile/index no error is displayed in the console and no html within the template file js/modules/Profile/views/viewProfile.html is displayed.
Can anyone tell me why this is happening? what am i doing wrong?
I think the issue may be your abstract state. You are not defining a template or templateUrl for this state. Also note that the template for your abstract state must include a ui-view directive in order for its children to populate.
https://github.com/angular-ui/ui-router/wiki/nested-states-%26-nested-views#abstract-state-usage-examples
You may need to do something along the lines of:
.state('profile', {
abstract: true,
url: '/profile',
template: '<ui-view />
})

Angularfire ngRoute/resolve issue, jumps to otherwise

I'm using the latest Angular + Firebase and trying to set up a login authorization system. I have home.html which contains login+signup links, going to login.html and adding credentials works just fine (logging correct UID when submittet) but it's supposed to route to dash.html but goes back to home.html.
I've figured out that it seem to be issues with my resolve functions because the problem disappears when I remove .otherwise. But I still want (need?) it there I think.
If I'm logged in (but redirected to home.html) I can still access dash.html through the URL and I cannot access it again if I use the logout function at dash.html and that's how it should be.
But I can't figure out why I'm redirected to home.html in the first place.
Here's some of the code, any help appreciated:
My .run, .config and routes.
app.run(['$rootScope', '$location',
function($rootScope, $location){
$rootScope.$on('$routeChangeError',
function(event, next, previous, error){
if(error === 'AUTH_REQUIRED'){
$location.path('/home');
}
});
}]);
app.config(['$routeProvider', '$locationProvider', function($routeProvider,
$locationProvider){
$routeProvider
.when('/home', {
templateUrl: '/home.html',
controller: 'homeController'
})
.when('/login', {
templateUrl: '/login.html',
controller: 'loginController',
resolve: {
'currentAuth': ['Auth', function(Auth){
return Auth.$waitForAuth();
}]
}
})
.when('/dash', {
templateUrl: '/dash.html',
controller: 'dashController',
resolve: {
'currentAuth': ['Auth', function(Auth){
return Auth.$requireAuth();
}]
}
})
.otherwise({ redirectTo: '/home' });
}]);
My login controller:
app.controller('loginController', ['currentAuth', '$scope', '$firebaseAuth',
'Auth', '$location', '$rootScope',
function(currentAuth, $scope, $firebaseAuth, Auth, $location, $rootScope){
var ref = new Firebase('https://url.firebaseio.com');
$scope.auth = $firebaseAuth(ref);
$scope.loginUser = function(){
$scope.auth = Auth;
$scope.auth.$authWithPassword({
email:$scope.email,
password:$scope.password
}, {
remember: 'sessionOnly'
}).then(function(authData) {
console.log('Logged in as: ', authData.uid);
$scope.auth.$onAuth(function(authData) {
$rootScope.auth = true;
$scope.auth = Auth;
$location.path('/dash.html');
})
}).catch(function(error) {
console.log('There was an error: ', error);
});
};
}]);
And my factory and module:
var app = angular.module('app', ['firebase', 'ngRoute']);
app.factory('Auth', ['$firebaseAuth',
function($firebaseAuth){
var ref = new Firebase('https://url.firebaseio.com');
return $firebaseAuth(ref);
}]);
it has with your resolve issue.
If you look at the documentation firebase doc
you will see that they use the
$waitForSignIn
or
$requireSignIn
functions. I know that because I have done the same thing. Try that instead and it should work

AngularJS: templateUrl is rendering before the controller is free

Below is the code which making some trouble
angular.module("cattle_feed_frontend", ['ngResource','ngRoute'])
.config(['$routeProvider', function($routeProvider){
$routeProvider.
when('/',
{
controller: 'FeedController',
templateUrl: 'templates/FeedList.html'
}).
otherwise({
redirectTo: '/'
});
}])
.controller('FeedController', function($scope,feeds_factory) {
$scope.feeds = feeds_factory.allFeeds();
})
.factory('feeds_factory',['$http', function($http){
return {
allFeeds : function(){
$http.get("http://localhost:3000/feeds").then(function(response)
{
return response.data;
});
}
}
}])
In controller feeds_factory.allFeeds() making http call to a 3rd party . now when i see my console . It shows that my template is rendered first and then my http is made . Why? and issue due to this behavior is that my template is rendered in which i made the ng-repeat which makes nothing because $scope.feeds is set after its rendering , as follows
<tr ng-repeat="feed in feeds">
<td>
{{feed.ingredient}}
</td>
<td>
{{feed.cost_kg}}
</td>
</tr>
Because $routeProvider doesn't know your controller is going to make a http request, it doesn't know to wait. To tell it you use the resolve property of a route:
$routeProvider.
when('/',
{
controller: 'FeedController',
templateUrl: 'templates/FeedList.html',
resolve: {
feeds: function(feeds_factory) {
return feeds_factory.allFeeds();
}
}
}).
otherwise({
redirectTo: '/'
});
Then return the promise from feeds_factory:
factory('feeds_factory',['$http', function($http){
return {
allFeeds : function(){
return $http.get("http://localhost:3000/feeds").then(function(response) {
return response.data;
});
}
}
}])
Then inject into the controller:
controller('FeedController', function($scope, feeds) {
$scope.feeds = feeds;
})
Most likely you need to change your code to this:
.controller('FeedController', function($scope,feeds_factory) {
feeds_factory.allFeeds()
.then(function(feeds) {
$scope.feeds = feeds;
});
})

"Argument 'BrowseController' is not a function, got undefined" in AngularJS 1.3.8

I was working on my AngularJS application and suddenly I received the error "Argument 'BrowseController' is not a function, got undefined" I undid all my changes and tried the answers supplied on here but the problem still remains.
Here is my app.js file
'use strict';
var app = angular
.module('BikeShopApp', [
'ngAnimate',
'ngResource',
'ngRoute',
'firebase',
'toaster',
'angularMoment'
])
.constant('FURL', 'contains url to my application')
.run(function($rootScope, $location) {
$rootScope.$on("$routeChangeError", function(event, next, previous, error) {
// We can catch the error thrown when the $requireAuth promise is rejected
// and redirect the user back to the login page
if (error === "AUTH_REQUIRED") {
$location.path("/login");
}
});
})
.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/browse.html',
controller: 'BrowseController'
})
.when('/browse/:taskId', {
templateUrl: 'views/browse.html',
controller: 'BrowseController'
})
.when('/register', {
templateUrl: 'views/register.html',
controller: 'AuthController'
})
.when('/login', {
templateUrl: 'views/login.html',
controller: 'AuthController'
})
.when('/dashboard', {
templateUrl: 'views/dashboard.html',
controller: 'DashboardController',
resolve: {
currentAuth: function(Auth) {
return Auth.requireAuth();
}
}
})
.otherwise({
redirectTo: '/'
});
});
and here is the main part of my browse.js controller
'use strict';
app.controller('BrowseController', function($scope, $routeParams, toaster, Task, Auth, Comment, Offer) {
Any help would be greatly appreciated thanks
I've managed to fix this myself, as it turns out at the bottom of my code I was missing a bracket
This is what it as originally
Offer.acceptOffer($scope.selectedTask.$id, offerId, mechanicId.then(function() {
And here is the updated version where I have added the bracket which threw the entire error
Offer.acceptOffer($scope.selectedTask.$id, offerId, mechanicId).then(function() {

Setting file path and organizing the code in Angularjs

Hi I have following module, route and controller defined in one file called main.js
var mainApp = angular.module("mainApp", ["ngRoute", "ngResource", "ui"]).
config(function ($routeProvider) {
$routeProvider.
when('/addEmp', { controller: EmpCtrl, templateUrl: 'addEmp.html' }).
when('/addLoc', { controller: LocCtrl, templateUrl: 'newLocation.html' }).
otherwise({ redirectTo: '/' });
});
mainApp.factory("addEmp", ['$resource', function ($resource) {
return $resource('/api/addEmp/:id', { id: '#id' }, { update: { method: 'PUT' } });
}]);
mainApp.factory("addLoc", ['$resource', function ($resource) {
return $resource('/api/newLoc/:id', { id: '#id' }, { update: { method: 'PUT' } });
}]);
//Controllers
var EmpCtrl = function ($scope, $location, addEmp) {
//code here
};
var LocCtrl = function ($scope, $location, newLocation) {
//code here
};
What I am trying to do is organize this one file code into different files. I created script/controller folder where I want to have individual files for controller like
EmpCtrl.js and LocCtrl.js.
When I created the controller files and copied the controller code in it i get error of EmptCtrl and LocCtrl not defined.
Can you please tell me how I can set it up in different folders with appropriate path settings?
Thanks
try this
angular.module("mainApp", ["ngRoute", "ngResource", "ui"]).
config(function ($routeProvider) {
$routeProvider.
when('/addEmp', { controller: 'empCtrl', templateUrl: 'addEmp.html' }).
when('/addLoc', { controller: 'locCtrl', templateUrl: 'newLocation.html' }).
otherwise({ redirectTo: '/' });
});
//in empCtrl.js file
angular.module('mainApp').controller('empCtrl', ['$scope', '$location', 'addEmp',
function ($scope, $location, addEmp) {
//code here
}]);
// same for locCtrl
In your html make sure to include your mainApp.js file before you empCtrl and locCtrl scripts
the key is that you use string names to refer to your controller in your rout configs
{ controller: 'empCtrl' ... }
instead of
{ controller: EmpCtrl ... }
I would recommend that you use require.js to modularize your Angular project, you won't have to worry about order of script includes and it will result in a cleaner project

Categories

Resources