i can successfully get data from the /api/session.json call and log it to my console.
how do i send the output of this api call to my index.html file and replace "Username"?
thanks!
here is my app.js file for my angular application:
'use strict';
var staticApp = angular.module('staticApp', [])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
}])
.run( function($http) {
$http.defaults.useXDomain = true;
// API CALL
$http({method: 'GET', url: '/api/session.json'}).
success(function(data, status, headers, config) {
// THIS WORKS!!
// MY CONSOLE SHOWS THIS:
// Object {user: "devuser"}
console.log(data);
}).
error(function(data, status, headers, config) {
console.log(status);
});
});
and here is my index.html fiile:
<!DOCTYPE html>
<head>
<!-- meta and css stuff -->
</head>
<body ng-app="staticApp">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<button type="button"
class="btn btn-navbar"
data-toggle="collapse" data-target=".nav-collapse">
</button>
<a class="brand" href="/">MyApp</a>
<div class="nav-collapse collapse">
<p class="navbar-text pull-right">
<!-- I WANT Username TO BE THE VALUE RETURNED FROM THE API CALL -->
Logged in as <a href="#" class="navbar-link">Username</a>
</p>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container" ng-view></div>
<script src="scripts/vendor/angular.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
</body>
</html>
i can successfully get data from the /api/session.json call and log it to my console.
how do i send the output of this api call to my index.html file and replace "Username"?
thanks!
here is my app.js file for my angular application:
'use strict';
var staticApp = angular.module('staticApp', [])
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
}])
.run( function($http) {
$http.defaults.useXDomain = true;
// API CALL
$http({method: 'GET', url: '/api/session.json'}).
success(function(data, status, headers, config) {
// THIS WORKS!!
// MY CONSOLE SHOWS THIS:
// Object {user: "devuser"}
console.log(data);
}).
error(function(data, status, headers, config) {
console.log(status);
});
});
and here is my index.html fiile:
<!DOCTYPE html>
<head>
<!-- meta and css stuff -->
</head>
<body ng-app="staticApp">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container-fluid">
<button type="button"
class="btn btn-navbar"
data-toggle="collapse" data-target=".nav-collapse">
</button>
<a class="brand" href="/">MyApp</a>
<div class="nav-collapse collapse">
<p class="navbar-text pull-right">
<!-- I WANT Username TO BE THE VALUE RETURNED FROM THE API CALL -->
Logged in as <a href="#" class="navbar-link">Username</a>
</p>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container" ng-view></div>
<script src="scripts/vendor/angular.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
</body>
</html>
-
You need to add it to the $scope in a controller, then bind it to the DOM with braces
{{username}}. (Sorry no example code; typing on a tablet.) – keithjgrant Commented Feb 9, 2013 at 1:40 - can i define a controller within the .run method so that it is executed on every page? – SeanPlusPlus Commented Feb 9, 2013 at 2:11
3 Answers
Reset to default 1$scope.username = data
in your js file. (Assuming data is what is returned)
and in the html just do {{username}}
Try passing in $rootScope (since that is where you technically are), then assign username on the $rootScope. Something like so:
function($http, $rootScope) {
$rootScope.username = "Foo";
}
Generally speaking, you wouldn't have all of this logic within one glob. When you think about what you're doing in this small section of JS, you're:
- defining a module,
- matching URLs with templates and controllers,
- making a GET request,
- (logging in a user?),
- attempting to display the user's name in the HTML
You would be better off breaking this into chunks, with specific purposes.
Let's think about what you're trying to acplish: you want your navbar to be aware of the user. To me, this sounds like an opportunity to use a controller.
index.html
<div class="navbar navbar-inverse navbar-fixed-top" ng-controller="Navbar">
<div class="navbar-inner">
<div class="container-fluid">
<button type="button"
class="btn btn-navbar"
data-toggle="collapse" data-target=".nav-collapse">
</button>
<a class="brand" href="/">MyApp</a>
<div class="nav-collapse collapse">
<p class="navbar-text pull-right">
Logged in as <a href="#" class="navbar-link">{{username}}</a>
</p>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
scripts/controllers/Navbar.js
staticApp.controller('Navbar', ['$scope', function ($scope) {
$scope.username = 'Username!';
}]);
Now, we can provide a username to the $scope matching the Navbar template (div.navbar here). Of course, this isn't all that useful, since Username! is probably not everybody's username.
So, now our problem is: where can we put our code that handles logging in users from the server?
The perfect place for that is a service.
scripts/services/User.js
staticApp.factory('User', ['$http', function ($http) {
var User;
var setUser = function (user) {
if (angular.isObject(user))
User = user;
};
var getUser = function () {
if (angular.isObject(User))
return User;
};
var logIn = function (username, password) {
// $http call that validates the username and password.
setUser({ user: username });
};
return {
logIn: logIn,
getUser: getUser
};
}]);
The logic in this controller can be edited to match your flow, but it's not a bad idea to keep it modularized in this way. Exposing the logIn and getUser methods should be all your controllers will need.
Let's go back to the Navbar controller.
scripts/controllers/Navbar.js
staticApp.controller('Navbar', ['$scope', 'User', function ($scope, User) {
var user = User.getUser();
$scope.username = user.username;
}]);
After you've configured the User service to work with your app's own user handling process, your app will be in a better position to grow. You don't have to mess with $rootScope, your templates can be bound to a controller (maybe the Navbar template will need some other functionality), and most importantly, your different concerns have been separated.
If you have any questions about anything I've changed above, let me know!