Skip to content

Instantly share code, notes, and snippets.

@gmittica

gmittica/index.html

Created October 16, 2017 12:30
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save gmittica/7caeae536cf1d648b3359c3b24f3a3c9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save gmittica/7caeae536cf1d648b3359c3b24f3a3c9 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/rejixi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="http://unpkg.com/@uirouter/angularjs@1.0.7/release/angular-ui-router.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body ng-app="myApp">
<div class="container" >
<ui-view></ui-view>
</div>
<script id="jsbin-javascript">
angular.module("myApp", ['users'])
.config(['$urlRouterProvider', function($urlRouterProvider) {
$urlRouterProvider.otherwise('/users');
}]);
angular.module("users", ['ui.router'])
.config(['$stateProvider', function($stateProvider) {
var s1 = {
name: 'users',
url: '/users',
template: '<h1>Users</h1>' +
'<p ng-repeat="user in users"><a ui-sref="users-posts({id: user.id, page: 1})">{{ user.username}}</a></p>',
controller: 'UsersCtrl'
};
var s2 = {
name: 'users-posts',
url: '/users/:id/posts?page',
template: '<h1>Posts of user id {{ id }} page {{ page }}</h1>' +
'',
controller: 'UsersPostsCtrl'
};
$stateProvider.state(s1);
$stateProvider.state(s2);
}])
.controller("UsersCtrl", ['$scope', '$http', function($scope, $http) {
$scope.users = [];
$http.get("https://jsonplaceholder.typicode.com/users").then(function(response) {
$scope.users = response.data;
})
}])
.controller("UsersPostsCtrl", ['$scope', '$http', '$stateParams', function($scope, $http, $stateParams) {
$scope.id = $stateParams.id;
$scope.page = $stateParams.page;
/*$scope.users = [];
$http.get("https://jsonplaceholder.typicode.com/users").then(function(response) {
$scope.users = response.data;
})*/
}])
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="https://rawgit.com/angular/bower-angular/master/angular.min.js"><\/script>
<script src="https://code.jquery.com/jquery.min.js"><\/script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"><\/script>
<script src="//unpkg.com/@uirouter/angularjs@1.0.7/release/angular-ui-router.min.js"><\/script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body ng-app="myApp">
<div class="container" >
<ui-view></ui-view>
</div>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">angular.module("myApp", ['users'])
.config(['$urlRouterProvider', function($urlRouterProvider) {
$urlRouterProvider.otherwise('/users');
}]);
angular.module("users", ['ui.router'])
.config(['$stateProvider', function($stateProvider) {
var s1 = {
name: 'users',
url: '/users',
template: '<h1>Users</h1>' +
'<p ng-repeat="user in users"><a ui-sref="users-posts({id: user.id, page: 1})">{{ user.username}}</a></p>',
controller: 'UsersCtrl'
};
var s2 = {
name: 'users-posts',
url: '/users/:id/posts?page',
template: '<h1>Posts of user id {{ id }} page {{ page }}</h1>' +
'',
controller: 'UsersPostsCtrl'
};
$stateProvider.state(s1);
$stateProvider.state(s2);
}])
.controller("UsersCtrl", ['$scope', '$http', function($scope, $http) {
$scope.users = [];
$http.get("https://jsonplaceholder.typicode.com/users").then(function(response) {
$scope.users = response.data;
})
}])
.controller("UsersPostsCtrl", ['$scope', '$http', '$stateParams', function($scope, $http, $stateParams) {
$scope.id = $stateParams.id;
$scope.page = $stateParams.page;
/*$scope.users = [];
$http.get("https://jsonplaceholder.typicode.com/users").then(function(response) {
$scope.users = response.data;
})*/
}])
</script></body>
</html>
Raw
jsbin.rejixi.js
angular.module("myApp", ['users'])
.config(['$urlRouterProvider', function($urlRouterProvider) {
$urlRouterProvider.otherwise('/users');
}]);
angular.module("users", ['ui.router'])
.config(['$stateProvider', function($stateProvider) {
var s1 = {
name: 'users',
url: '/users',
template: '<h1>Users</h1>' +
'<p ng-repeat="user in users"><a ui-sref="users-posts({id: user.id, page: 1})">{{ user.username}}</a></p>',
controller: 'UsersCtrl'
};
var s2 = {
name: 'users-posts',
url: '/users/:id/posts?page',
template: '<h1>Posts of user id {{ id }} page {{ page }}</h1>' +
'',
controller: 'UsersPostsCtrl'
};
$stateProvider.state(s1);
$stateProvider.state(s2);
}])
.controller("UsersCtrl", ['$scope', '$http', function($scope, $http) {
$scope.users = [];
$http.get("https://jsonplaceholder.typicode.com/users").then(function(response) {
$scope.users = response.data;
})
}])
.controller("UsersPostsCtrl", ['$scope', '$http', '$stateParams', function($scope, $http, $stateParams) {
$scope.id = $stateParams.id;
$scope.page = $stateParams.page;
/*$scope.users = [];
$http.get("https://jsonplaceholder.typicode.com/users").then(function(response) {
$scope.users = response.data;
})*/
}])
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment