AngularJS Route To Target Views
HTML
<script src="http://code.angularjs.org/angular-1.0.0rc5.min.js"></script>
<div ng:app="MyApp">
<script type="text/ng-template" id="examples/1.html">
<h1>One</h1>
<p>This should be showing a strip button right below here too:</p>
<script class='stripe-button' data-amount='5000' data-key='W1xyC0XilnJTkz52noGj1Hh0ftbg5jYO' data-label='Pay with Stripe' data-notrack='' src='https://button.stripe.com/v1/button.js'></script>
</script>
<script type="text/ng-template" id="examples/2.html">
<h1>Two</h1>
<p>This should send a javascript alert.</p>
<script type="text/javascript">
alert("hello");
</script>
</script>
<div ng-controller="MainCntl">
<script class='stripe-button' data-amount='5000' data-key='W1xyC0XilnJTkz52noGj1Hh0ftbg5jYO' data-label='Pay with Stripe' data-notrack='' src='https://button.stripe.com/v1/button.js'></script>
<a href="/1">One</a> |
<a href="/2">Two</a><br/>
<hr />
<div ng-view></div>
<hr />
</div>
</div>
JavaScript
angular.module('MyApp', [], function($routeProvider, $locationProvider) {
$routeProvider.when('/1', {
template: 'examples/1.html',
controller: OneCntl,
//view: somehow target the first ng-view
});
$routeProvider.when('/2', {
template: 'examples/2.html',
controller: TwoCntl,
//view: somehow target the second ng-view
});
$locationProvider.html5Mode(true);
});
function MainCntl($scope, $route, $routeParams, $location) {
$scope.$route = $route;
$scope.$location = $location;
$scope.$routeParams = $routeParams;
$scope.$location.path('/1');
}
function OneCntl($scope, $routeParams) {
$scope.params = $routeParams;
}
function TwoCntl($scope, $routeParams) {
$scope.params = $routeParams;
}