Dive into AngularJS Routing
Download as PPTX, PDF16 likes3,610 views
This document discusses AngularJS routing. It provides an overview of routing and single-page applications. It then covers the key aspects of AngularJS routing including configuring routes with $routeProvider, using the ng-view directive, passing route parameters, listening to route change events, and resolving route data with promises. Code examples and links to additional examples are provided. The document is intended to explain AngularJS routing and answer any questions about the topic.
![AngularJS/:Routing/:WrongWay
var app = angular.module("app", []);
app.controller("AppCtrl", function($scope, $route){
$route.routes["/"] = {
templateUrl: "app.html",
controller: "AppCtrl"
})](https://image.slidesharecdn.com/angularjs-routing-140822065320-phpapp01/85/Dive-into-AngularJS-Routing-10-320.jpg)
Dive into AngularJS Routing
- 2. AngularJS/:Routing/:AGENDA 1. What is routing? 2. What is SPA? 3. AngularJS Routing 4. Examples 5. Questions
- 3. AngularJS/:Routing/:WhatIsRouting What is routing?
- 8. AngularJS/:Routing/:NeedToKnow • App.config • $routeProvider •Ng-view • Params • Events • Resolve
- 9. AngularJS/:Routing/:API app.config(function($routeProvider) { $routeProvider.when('/', { templateUrl: ‘app.html', controller: ‘AppCtrl‘ }); $routeProvider.otherwise({redirectTo: '/'}); });
- 10. AngularJS/:Routing/:WrongWay var app = angular.module("app", []); app.controller("AppCtrl", function($scope, $route){ $route.routes["/"] = { templateUrl: "app.html", controller: "AppCtrl" })
- 12. AngularJS/:Routing/:Params app.config(function ($routeProvider) { $routeProvider.when('/:message',{ templateUrl: "app.html", controller: "AppCtrl" }) });
- 13. AngularJS/:Routing/:Params app.controller("AppCtrl", function ($scope, $routeParams) { $scope.message: $routeParams.message } });
- 14. AngularJS/:Routing/:Events $rootScope.$on(‘$routeChangeStart’, function(){}) $rootScope.$on(‘$routeChangeSuccess’, function(){}) $rootScope.$on(‘$routeChangeError’, function(){}) $rootScope.$on(‘$routeUpdate’, function(){})
- 15. AngularJS/:Routing/:Resolve $routeProvider.when('/', { …. resolve: { app: function ($q) { var defer = $q.defer; defer.resolve(); return defer.promise; } ….