Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

AngularJS Routing

9,159 views

Published on

AngularJS Routing

Published in: Technology
  • Be the first to comment

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

×