Skip to content

Instantly share code, notes, and snippets.

@Echooff3

Echooff3/index.html

Created February 27, 2015 22:31
Show Gist options
  • Save Echooff3/2a07c147cef2e32c07c0 to your computer and use it in GitHub Desktop.
Save Echooff3/2a07c147cef2e32c07c0 to your computer and use it in GitHub Desktop.
Download ZIP
Example - example-$route-service-production // source http://jsbin.com/bumebu
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<meta charset="UTF-8">
<title>Example - example-$route-service-production</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular-route.js"></script>
<script type="text/javascript">
angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
</script>
</head>
<body ng-app="ngRouteExample">
<div ng-controller="MainController">
<div class="col-xs-4">
<ul>
<li ng-repeat="x in articles"><a href="article/{{x.id}}">{{x.title}}</a></li>
</ul>
</div>
<div class="col-xs-8" ng-controller="ArticleController">
<h1>{{current.title}}</h1>
<p>{{current.content}}</p>
</div>
</div>
<script id="jsbin-javascript">
(function(angular) {
'use strict';
angular.module('ngRouteExample', ['ngRoute'])
.controller('MainController', function($scope, $route, $routeParams, $location) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
$scope.articles = [
{id:1,title:"Title 1",content:"Content 1"},
{id:2,title:"Title 2",content:"Content 2"},
{id:3,title:"Title 3",content:"Content 3"},
{id:4,title:"Title 4",content:"Content 4"},
{id:5,title:"Title 5",content:"Content 5"},
];
//This is the current article
$scope.current = $scope.articles[0];
//Add a click function for fun a profit
$scope.loadArticle = function (id) {
for(var x = 0; x < $scope.articles.length; x++){
console.log($scope.articles[x].id);
//found the selected ID cool man update current to display that article
if($scope.articles[x].id == id){
console.log('match');
$scope.current = $scope.articles[x];
$scope.$apply();
break;
}
}
};
})
.controller('ArticleController', function($scope, $routeParams) {
$scope.name = "BookController";
$scope.params = $routeParams;
$scope.$on('$routeChangeSuccess', function() {
// this shoudl fire for all routes
console.log('params',$scope.$routeParams);
$scope.loadArticle($scope.$routeParams.article);
});
})
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/article/:article', {
controller: 'BookController',
});
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);
});
})(window.angular);
</script>
<script id="jsbin-source-html" type="text/html"><!doctype html>
<html lang="en">
<head>
<script src="//code.jquery.com/jquery.min.js"><\/script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"><\/script>
<meta charset="UTF-8">
<title>Example - example-$route-service-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular.min.js"><\/script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.5/angular-route.js"><\/script>
<script type="text/javascript">
angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
<\/script>
</head>
<body ng-app="ngRouteExample">
<div ng-controller="MainController">
<div class="col-xs-4">
<ul>
<li ng-repeat="x in articles"><a href="article/{{x.id}}">{{x.title}}</a></li>
</ul>
</div>
<div class="col-xs-8" ng-controller="ArticleController">
<h1>{{current.title}}</h1>
<p>{{current.content}}</p>
</div>
</div>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">(function(angular) {
'use strict';
angular.module('ngRouteExample', ['ngRoute'])
.controller('MainController', function($scope, $route, $routeParams, $location) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
$scope.articles = [
{id:1,title:"Title 1",content:"Content 1"},
{id:2,title:"Title 2",content:"Content 2"},
{id:3,title:"Title 3",content:"Content 3"},
{id:4,title:"Title 4",content:"Content 4"},
{id:5,title:"Title 5",content:"Content 5"},
];
//This is the current article
$scope.current = $scope.articles[0];
//Add a click function for fun a profit
$scope.loadArticle = function (id) {
for(var x = 0; x < $scope.articles.length; x++){
console.log($scope.articles[x].id);
//found the selected ID cool man update current to display that article
if($scope.articles[x].id == id){
console.log('match');
$scope.current = $scope.articles[x];
$scope.$apply();
break;
}
}
};
})
.controller('ArticleController', function($scope, $routeParams) {
$scope.name = "BookController";
$scope.params = $routeParams;
$scope.$on('$routeChangeSuccess', function() {
// this shoudl fire for all routes
console.log('params',$scope.$routeParams);
$scope.loadArticle($scope.$routeParams.article);
});
})
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/article/:article', {
controller: 'BookController',
});
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);
});
})(window.angular);</script></body>
</html>
Raw
jsbin.bumebu.js
(function(angular) {
'use strict';
angular.module('ngRouteExample', ['ngRoute'])
.controller('MainController', function($scope, $route, $routeParams, $location) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
$scope.articles = [
{id:1,title:"Title 1",content:"Content 1"},
{id:2,title:"Title 2",content:"Content 2"},
{id:3,title:"Title 3",content:"Content 3"},
{id:4,title:"Title 4",content:"Content 4"},
{id:5,title:"Title 5",content:"Content 5"},
];
//This is the current article
$scope.current = $scope.articles[0];
//Add a click function for fun a profit
$scope.loadArticle = function (id) {
for(var x = 0; x < $scope.articles.length; x++){
console.log($scope.articles[x].id);
//found the selected ID cool man update current to display that article
if($scope.articles[x].id == id){
console.log('match');
$scope.current = $scope.articles[x];
$scope.$apply();
break;
}
}
};
})
.controller('ArticleController', function($scope, $routeParams) {
$scope.name = "BookController";
$scope.params = $routeParams;
$scope.$on('$routeChangeSuccess', function() {
// this shoudl fire for all routes
console.log('params',$scope.$routeParams);
$scope.loadArticle($scope.$routeParams.article);
});
})
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/article/:article', {
controller: 'BookController',
});
// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode(true);
});
})(window.angular);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment