Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
The history
work with
'#‘ URL

'#' - The right
side is SPA URL
$locationProvider.html5Mode(true).hashPrefix('!');
<script src="angular.js"></script>
<script src="angular-route.js"></script>
var myApp = angular.module('myApp', ['ngRoute'...
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function ($routeProvider) {
$routeProvider
.when('/view2/:v...
<a href="#/viewURL">Action Name</a>
OR
$location.path('#/viewURL');

$locationChangeStart

href="#/news"

$location

Sub T...
$locationChangeStart

$routeChangeStart

$routeChangeError

$routeUpdate

$routeChangeSuccess
var myApp = angular.module('myApp', ['ngRoute']);
Routing Object
myApp.config(function ($routeProvider) {
$routeProvider
...
$rootScope.$on('$locationChangeStart',
function (event, next, current) {
var result = $window.confirm('Continue?');
if (!r...
AngularJS Routing
AngularJS Routing
AngularJS Routing
AngularJS Routing
AngularJS Routing
Prochain SlideShare
Chargement dans…5
×

AngularJS Routing

AngularJS Routing

  • Identifiez-vous pour voir les commentaires

AngularJS Routing

  1. 1. The history work with '#‘ URL '#' - The right side is SPA URL
  2. 2. $locationProvider.html5Mode(true).hashPrefix('!');
  3. 3. <script src="angular.js"></script> <script src="angular-route.js"></script> var myApp = angular.module('myApp', ['ngRoute']); Main Toolbar href="#/news" Sub Toolbar ng-view ng-view ng-view
  4. 4. var myApp = angular.module('myApp', ['ngRoute']); myApp.config(function ($routeProvider) { $routeProvider .when('/view2/:viewId', { Routing Object templateUrl: 'View2.html', controller : 'viewCtrl' }) .otherwise({ redirectTo: '/' }); });
  5. 5. <a href="#/viewURL">Action Name</a> OR $location.path('#/viewURL'); $locationChangeStart href="#/news" $location Sub Toolbar $routeProvider $routeChangeStart $route Route object Route ng-view object $viewContentLoaded
  6. 6. $locationChangeStart $routeChangeStart $routeChangeError $routeUpdate $routeChangeSuccess
  7. 7. var myApp = angular.module('myApp', ['ngRoute']); Routing Object myApp.config(function ($routeProvider) { $routeProvider  Controller or controllerAs .when('/view2/:viewId',  Template or TemplateUrl { templateUrl:  Resolve 'View2.html', controller : 'viewCtrl' })  RedirectTo }); .otherwise({ redirectTo: '/' });  [reloadOnSearch=true]  [caseInsensitiveMatch=false]
  8. 8. $rootScope.$on('$locationChangeStart', function (event, next, current) { var result = $window.confirm('Continue?'); if (!result) { event.preventDefault(); return; } }); View I View II

×