Your SlideShare is downloading. ×
AngularJS Routing
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

AngularJS Routing

3,673
views

Published on

AngularJS Routing …

AngularJS Routing

Published in: Technology

0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,673
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
104
Comments
0
Likes
16
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. The history work with '#‘ URL '#' - The right side is SPA URL
  • 2. $locationProvider.html5Mode(true).hashPrefix('!');
  • 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. var myApp = angular.module('myApp', ['ngRoute']); myApp.config(function ($routeProvider) { $routeProvider .when('/view2/:viewId', { Routing Object templateUrl: 'View2.html', controller : 'viewCtrl' }) .otherwise({ redirectTo: '/' }); });
  • 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. $locationChangeStart $routeChangeStart $routeChangeError $routeUpdate $routeChangeSuccess
  • 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. $rootScope.$on('$locationChangeStart', function (event, next, current) { var result = $window.confirm('Continue?'); if (!result) { event.preventDefault(); return; } }); View I View II

×