Angular js routing options

12,535 views

Published on

A presentation made for the NG-CONF Israel that took place in jun 2014 at Google TLV Campus (http://ng-conf.gdg.co.il/)
its an overview of how to use ngRoute and UI-Router in your app this slideshow contain a link for a working demo

Published in: Technology, Business

Angular js routing options

  1. 1. Exploring routing options
  2. 2. Routing is mandatory. For an angular app, we can choose between the official ngRoute, or the popular ui-router. In this talk i will introduce you with both of them so you can choose what's fits your needs. nirkaufman@gmail.com
  3. 3. Spoiler! In the end of this talk you will probably choose to use ui-router for your project. nirkaufman@gmail.com
  4. 4. What's the plan? - Exploring the modules core features and API. - Asking questions & getting answers but most important.. nirkaufman@gmail.com
  5. 5. Seeing it in Action! Walking through a working demo project. find the github link in the last slide nirkaufman@gmail.com
  6. 6. ngRoute Used to be baked into Angular core, separated into it`s own module in version 1.2. Provides a lot of functionality we expected from a routing system. nirkaufman@gmail.com
  7. 7. Installation nirkaufman@gmail.com use bower (or download manually) the angular-route.js file. Make sure to load the module after angular. specify ngRoute as a dependency for your module $ bower install angular-route <script src="angular.js"> </script> <script src="angular-route.js"> </script> angular.module('app', ['ngRoute']);
  8. 8. Simple route nirkaufman@gmail.com angular.module('app', ['ngRoute']) .config(function ($routeProvider) { $routeProvider .when('/home',{ templateUrl: ‘views/home.html’ }) .when('/user',{ templateUrl: ‘views/user.html’ }) .otherwise({ template: “<div>NOT FOUND!</div>” }) In the config section of our module, we use the $routeProvider to map url`s to the desired views. the most basic route should include an HTML template to render.
  9. 9. Navigate & Display Templates nirkaufman@gmail.com <ng-view onload=”fn()”></ng-view> Our template will be rendered between the ng-view tags. this directive will create a new child scope for the template. we can pass a function to the onload attribute. ngRouter Support only one ngView per Application! We can display the requested from html using <a> tags, or from javaScript using the $location service: function UserController ($location) { $location.path(‘/admin’)}
  10. 10. Controllers & Parameters nirkaufman@gmail.com we can assign a controller to the view, and access the route parameters by injecting the $routeParams service to our controller .when('/user/:id,{ templateUrl: ‘views/user.html’, controller: ‘UserController’ }) function UserController ($routeParams) { $routeParams.id // 5234 } http://www.yourApp.com/user/5234
  11. 11. Attaching custom data nirkaufman@gmail.com We can extend the route object to include extra data that we might need. .when('/admin,{ templateUrl: ‘views/user.html’, controller: ‘UserController’, permissions: {level : ‘admin’, key: ‘23f’} }) ... function UserController ($route) { permissions = $route.current.permissions }
  12. 12. Using resolve nirkaufman@gmail.com We can define a map of factory functions that will be resolved, and injected to our controller.. if any of them is a promise, the route will hold until the resolved. it can be used to load additional resources on demand or fetching data from a remote server. .when('/admin,{ templateUrl: ‘views/user.html’, controller: ‘UserController’, resolve: {data: function() {return “info”} } }) function UserController (data) {...}
  13. 13. Route LIfe cycle & events nirkaufman@gmail.com Url Requested $routeChangeStart $routeChangeError $routeChangeSuccess ng-view kicks in$viewContentLoaded onload function
  14. 14. ngView in Action nirkaufman@gmail.com $routeChangeSucsses broadcasted create New Scope destroy last scope, remove the last template Link the new Template with the new Scope Link the controller Emit $viewContentLoaded run the onload function
  15. 15. Things we didn't cover nirkaufman@gmail.com ● $locationProvider - configure how the application deep linking paths are stored (enable HTML5 mode, and define an hash prefix) ● $location - Represents the URL object as a set of methods (protocol, host, port, path, search, hash) ● $route.reload() - a method that reloads the current view be causing the ng-view directive to create new child scope and re-instantiate the controller ● ngView autoscroll - calling to the $anchorScroll service https://docs.angularjs.org/api/ngRoute/service/$route
  16. 16. UI Router UI Router is a routing system for AngularJS that based around the concept of states which may optionally have routes, as well as other behaviours. nirkaufman@gmail.com
  17. 17. Define: state. ❏ a ‘place’ in the application in terms of UI and navigation. ❏ a state describes what the UI looks like and does at that place. nirkaufman@gmail.com
  18. 18. Installation use bower (or download manually) the angular-ui-router.js file. Make sure to load the module after angular. specify ui.router as a dependency for your module nirkaufman@gmail.com $ bower install angular-ui-router <script src="angular.js"> </script> <script src="angular-ui-router.js"> </script> angular.module('app', ['ui.router']);
  19. 19. Simple State nirkaufman@gmail.com angular.module('app', ['ngRoute']) .config(function ($stateProvider) { $stateProvider .state('home',{ url: ‘/home.html’, templateUrl: ‘views/home.html’ }) In the config section of our module, we use the $stateProvider to define a state object and give it a name
  20. 20. Navigate & Display Templates nirkaufman@gmail.com <ui-view> </ui-view> Our template will be rendered between the ui-view tags. ngRouter Support multiply ui-views per application! We can display the requested from html using <a ui-sref=’stateName’> tags with the or using the $state service method: function UserController ($state) { $state.go(‘home’)}
  21. 21. Controllers & Parameters nirkaufman@gmail.com just like $routeProvider, we can assign a controller to the state, and access the state parameters by injecting the $stateParams service to our controller .state('user,{ url: ‘/user/:id’ templateUrl: ‘views/user.html’, controller: ‘UserController’ }) function UserController ($stateParams) { $stateParams.id // 5234 } http://www.yourApp.com/user/5234
  22. 22. Attaching custom data nirkaufman@gmail.com Another powerful feature is the ability to display different views in parallel: .state('home',{ controller: ‘HomeController’ data : { level: ‘admin’ }} ... function HomeController ($state) { data = $state.current.data }
  23. 23. Nested Views nirkaufman@gmail.com One of the powerful features of ui router is the ability to define nested views: $stateProvider .state('home',{ url: ‘/home’, templateUrl: ‘views/home.html’ }) .state('home.subsection,{ url: ‘/subsection’, templateUrl: ‘views/section.html’ })
  24. 24. Named Views nirkaufman@gmail.com Another powerful feature is the ability to display different views in parallel: $stateProvider .state('home',{ views: { "": { template: "<h1>HELLO!</h1>" }, "sidebar": { template: "<sidebar/>" }, "footer": { template: "<data_thing/>" }}... index.html: <div ui-view></div> <div ui-view="sidebar"></div> <div ui-view="footer"></div>
  25. 25. State Callbacks nirkaufman@gmail.com We can optionally define two callbacks to the state object, that will be fired when a state beacom active or inactive, the callbacks can access to the resolved attributes .state('home',{ resolve : { user: function () {...} } onEnter : function (user) {}, onExit : function (user) {} }
  26. 26. State LIfe cycle & events nirkaufman@gmail.com state Requested $stateChangeStart $stateChangeError $stateChangeSucsses ui-view kicks in $viewContentLoaded onload function Done! $stateNotFound
  27. 27. Things we didn't cover nirkaufman@gmail.com ● $state API - The $state service contain more methods beside go that we take advantage of ● $templateFactory- a utility for defining templates in different ways ● state inheritance - child states inherited the resolves from their parent state ● abstract - we can define an abstract template that cannot be directly activated, but can use as a wrapper for our views ● ui-sref-active - directive that adds class when state is active ● much more... http://angular-ui.github.io/ui-router/site/#/api
  28. 28. Summary you will probably choose to use ui-router for your project. basically because it supports everything the normal ngRoute can do, as well of as many extra features and functions that is crucial for large scale applications. nirkaufman@gmail.com
  29. 29. Migrating to ui-router nirkaufman@gmail.com if you are allready use ngRoute, you can start by replacing your routes with simple states for a good start: $stateProvider .state('home',{ url: ‘/home’, templateUrl: ‘home.html’ }) $routeProvider .when('/home',{ templateUrl: ‘home.html’ }) <a href=”#/home”>Home</a> <a ui-sref=”home”>Home</a> $location.url(‘/home’) $state.go(‘home’)
  30. 30. Grab the code: https://github.com/nirkaufman/angularjs-routing-demo nirkaufman@gmail.com il.linkedin.com/in/nirkaufman/
  31. 31. Thank You! nirkaufman@gmail.com

×