Created
March 17, 2015 19:14
-
-
Save LoganArnett/4f42235d8e2ad9e19653 to your computer and use it in GitHub Desktop.
Basic $stateParams intro for TIY Students
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!--This will be available at the | |
url: /users/:id(or {id}) where id is the | |
hash or directory that you dynamically set--> | |
<section id="users"> | |
<div> | |
<h2>{{users.userInfo.name}}</h2> | |
<p>{{users.userInfo.email}}</p> | |
<p>{{users.userInfo.age}}</p> | |
</div> | |
</section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* This is the new state that is added | |
* with the $stateParams of :id or {id} | |
*/ | |
.state('users', { | |
// or you can use :id | |
url: '/users/{id}', | |
templateUrl: 'app/main/users.html', | |
controller: 'UserCtrl as users' | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!--This is the snippet from the main.html --> | |
<!--where you can see the ui-sref action --> | |
<!--to the dynamic route--> | |
<div class="main-content"> | |
<div class="row"> | |
<h2> Users</h2> | |
<div class="col-sm-6 col-md-4" ng-repeat="user in app.obj"> | |
<div class="thumbnail"> | |
<div class="caption"> | |
<a ui-sref="users({id: user.$id})"><h3>{{user.name}}</h3></a> | |
<p><a ng-href="mailto:{{user.email}}">{{user.email}}</a></p> | |
<p>{{user.age}}</p> | |
<p>{{user.color}}</p> | |
<p>{{user.framework}}</p> | |
<p>{{user.jQuery}}</p> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
'use strict' | |
angular.module('randomInfo') | |
//Includes $stateParams as a dependency ---------------\/ | |
.controller('UserCtrl', function($firebaseObject, $stateParams){ | |
var self = this; | |
//Just to check/confirm what $stateParams is giving you | |
console.log($stateParams) | |
// Call to firebase for that specific hashes info | |
this.info = new Firebase('<YOUR-FIREBASEIO.COM>' + $stateParams.id); | |
// Turn the info into an Object so you can grab the users info being returned | |
this.userInfo = $firebaseObject(this.info) | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment