Skip to content

Instantly share code, notes, and snippets.

@jerry4

jerry4/index.html

Created December 5, 2014 04:17
Show Gist options
  • Save jerry4/207a3c65998b6fbd79a3 to your computer and use it in GitHub Desktop.
Save jerry4/207a3c65998b6fbd79a3 to your computer and use it in GitHub Desktop.
Download ZIP
AngularJS test // source http://jsbin.com/xayicawoka
Raw
index.html
<!doctype html>
<html ng-app="test" >
<head>
<meta charset="utf-8">
<title>AngularJS test</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.js"></script>
</head>
<body>
<div ng-controller="MainCtrl" ng-click="clicked()">Switch Contents</div>
<div ng-view></div>
<script id="jsbin-javascript">
var app = angular.module('test', ['ngRoute']);
app.config(["$routeProvider", function($routeProvider) {
$routeProvider
.when('/child1', {template: 'Partial 1: {{ctrl}}<div>{{history}}</div>', controller: 'Child1'})
.when('/child2',{template: 'Partial 2: {{ctrl}}<div>{{history}}</div>', controller: 'Child2'});
}]);
var toggle;
app.controller('MainCtrl', function($scope) {
$scope.clicked = function() {
window.location.hash = (toggle = !toggle) ? '/child2' : '/child1';
};
});
app.controller('Child1', function($scope) {
$scope.ctrl = "child1";
$scope.history = document.location.hash;
console.log('Child 1 has been constructed');
$scope.$on('$viewContentLoaded', function() {
console.log('Child1 has loaded');
});
$scope.$on('$destroy', function() {
console.log('Child1 is no longer necessary');
});
});
app.controller('Child2', function($scope) {
$scope.ctrl = "child2";
$scope.history = document.location.hash;
console.log('Child2 has been constructed');
$scope.$on('$viewContentLoaded', function() {
console.log('Child2 has loaded');
});
$scope.$on('$destroy', function() {
console.log('Child2 is no longer necessary');
});
});
document.location.hash = '/child1';
</script>
<script id="jsbin-source-html" type="text/html"><!doctype html>
<html ng-app="test" >
<head>
<meta charset="utf-8">
<title>AngularJS test</title>
<script>document.write('<base href="' + document.location + '" />');<\/script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.js"><\/script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.js"><\/script>
</head>
<body>
<div ng-controller="MainCtrl" ng-click="clicked()">Switch Contents</div>
<div ng-view></div>
</body>
</html>
</script>
<script id="jsbin-source-javascript" type="text/javascript">var app = angular.module('test', ['ngRoute']);
app.config(["$routeProvider", function($routeProvider) {
$routeProvider
.when('/child1', {template: 'Partial 1: {{ctrl}}<div>{{history}}</div>', controller: 'Child1'})
.when('/child2',{template: 'Partial 2: {{ctrl}}<div>{{history}}</div>', controller: 'Child2'});
}]);
var toggle;
app.controller('MainCtrl', function($scope) {
$scope.clicked = function() {
window.location.hash = (toggle = !toggle) ? '/child2' : '/child1';
};
});
app.controller('Child1', function($scope) {
$scope.ctrl = "child1";
$scope.history = document.location.hash;
console.log('Child 1 has been constructed');
$scope.$on('$viewContentLoaded', function() {
console.log('Child1 has loaded');
});
$scope.$on('$destroy', function() {
console.log('Child1 is no longer necessary');
});
});
app.controller('Child2', function($scope) {
$scope.ctrl = "child2";
$scope.history = document.location.hash;
console.log('Child2 has been constructed');
$scope.$on('$viewContentLoaded', function() {
console.log('Child2 has loaded');
});
$scope.$on('$destroy', function() {
console.log('Child2 is no longer necessary');
});
});
document.location.hash = '/child1';</script></body>
</html>
Raw
jsbin.xayicawoka.js
var app = angular.module('test', ['ngRoute']);
app.config(["$routeProvider", function($routeProvider) {
$routeProvider
.when('/child1', {template: 'Partial 1: {{ctrl}}<div>{{history}}</div>', controller: 'Child1'})
.when('/child2',{template: 'Partial 2: {{ctrl}}<div>{{history}}</div>', controller: 'Child2'});
}]);
var toggle;
app.controller('MainCtrl', function($scope) {
$scope.clicked = function() {
window.location.hash = (toggle = !toggle) ? '/child2' : '/child1';
};
});
app.controller('Child1', function($scope) {
$scope.ctrl = "child1";
$scope.history = document.location.hash;
console.log('Child 1 has been constructed');
$scope.$on('$viewContentLoaded', function() {
console.log('Child1 has loaded');
});
$scope.$on('$destroy', function() {
console.log('Child1 is no longer necessary');
});
});
app.controller('Child2', function($scope) {
$scope.ctrl = "child2";
$scope.history = document.location.hash;
console.log('Child2 has been constructed');
$scope.$on('$viewContentLoaded', function() {
console.log('Child2 has loaded');
});
$scope.$on('$destroy', function() {
console.log('Child2 is no longer necessary');
});
});
document.location.hash = '/child1';
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment