angularjs route resolve promise
angularjs routeprovider resolve promise
angularjs resolve promise example
angularjs $http resolve promise
angular resolve promise route
angular resolve promise before controller
angularjs route resolve promise example
angularjs routeprovider resolve controller
In this video we will discuss resolve property. Let us understand the use of this property with an example. This is continuation to Part 40. Please watch Part 40 from AngularJS Tutorial before proceeding.
When we navigate to http://localhost/students, we see the list of student names. These names are coming from a database table. Since the database, the application and the client, all are running on my local machine the data loads really fast. If they are on different machines and if there is network latency, the data may take a few seconds to load.
Let us introduce artificial network latency, by including the following line in GetAllStudents() web method in StudentService.asmx
System.Threading.Thread.Sleep(2000);
After this change. Refresh the application. Navigate to /home and then to /students. Notice the route changes to /students immediately but the students data takes at least 2 seconds to load. So let us understand what's happening here.
When we click on the Students link on the left, the route transition happens immediately, an instance of the students controller is created and the students view loads. By the time the view is loaded, the promise returned by the http service call to students service is not resolved. At the point when the promise is resolved, the data loads asynchronously and shows up in the view. Till then we will not see the students data on the students view.
If your requirement is not to transition to the new route until all promises are resolved you can take advantage of the resolve property of the route. Here are the steps to use the resolve property
Step 1 : Modify /students route. Notice we are using resolve property with /students route. This ensures that the promise returned by the http call is resolved before transitioning to the new route /students. studentsList property specified in the resolve property will have the student data and can be injected into the students controller.
.when("/students", { templateUrl: "Templates/students.html", controller: "studentsController", controllerAs: "studentsCtrl", resolve: { studentslist: function ($http) { return $http.get("StudentService.asmx/GetAllStudents") .then(function (response) { return response.data; }) } }
})
Step 2 : Modify the studentsController as shown below. Notice we are injecting studentslist property into students controller. This is the same property we used in resolve property in Step 1. studentslist property is then assigned as the value for students property on the view model (vm) object which the view expects. Since we already have the students data, there is no need to make another http call to the student service. Hence we deleted that http call from the students controller.
.controller("studentsController", function (studentslist, $route, $location) { var vm = this; vm.studentSearch = function () { if (vm.name) $location.url("/studentsSearch/" + vm.name) else $location.url("/studentsSearch") } vm.reloadData = function () { $route.reload(); } vm.students = studentslist;
})
With these 2 changes in place. Refresh the app. Navigate to /home and then to /students. Notice this time, the app does not transition to /students (new route) until the promise is resolved and the data is available. Upon the data becoming available the app transitions to the new route and the data is shown immediately.
So in summary,
The resolve property contains one or more promises that must resolve successfully before transitioning to the new route.
The property names used in the resolve property can then be injected into the controller. This means the controller does not have to fecth the data.
Link for all dot net and sql server video tutorial playlists
https://www.youtube.com/user/kudvenka...
Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspo...
asp.net core docker AngularJS route resolve | |
| 186 Likes | 186 Dislikes |
| 65,319 views views | 524K followers |
| Education | Upload TimePublished on 4 Apr 2016 |
Related keywords
wcf vs web api,ado.net core,sql server management studio,webkinz,webadvisor,craigslist nj,wcf one piece,asp.net core 3,ajax players,weber grill parts,webtoon,tutorials by hugo,csharp corner,mvc design pattern,asp.net machine account,servers for minecraft,asp.net core dependency injection,ado.net tutorial,services angular,ajax ontario,asp.net mvc tutorial,asp.net cos'è,csharp assembly,tutorialspoint python,sql join,services briefcase,asp.net core web api,ajax jquery,wccftech,craigslist ny,asp.net zero,csharp foreach,server memes,sql date format,services online,chase,serverless architecture,server resume,wcf c#,server books,tutorialspoint javascript,mvcc connect,ado.net mysql,services technologies gps,ajax deadpool,server jobs,cvs,website,mvc tutorial,costco hours,wcf service application,tutorialspoint spring,serverless,wcf soap,wcf cat,cool math games,wcf test client,services & training hse colombia sas,servicestack,citibank,asp.net core identity,sql union,ajax parking,sql database,asp.net core logging,mvconnect,cunyfirst,asp.net guida,wcf nba,csharp download,wcfi foundation,csharp online,wcf authentication,tutorials near me,http://asp.net,server 2019,chernobyl,ado.net descargar,web of dreams,serverminer,ajax cleaner,ado.net visual studio 2019,webassign,ado.net vs entity framework,ado.net visual studio 2017,csharp list,sql like,asp.net mvc,asp.net core tutorial,sqlite,wcfm,ajax roster,mvc architecture,http://ado.net,asp.net core mvc,ajax soccer,server hosting,wcfi,ajax dish soap,capital one,server rack,tutorialspoint html,csharp interface,craigslist,webroot,tutorialspoint reactjs,ajax request,wcf dragon ball,asp.net core 2.2,tutorialspoint python 3,sql developer,webster,services transmission company sas,sql group by,asp.net core signalr,services manager,mvc framework,ajax paving,mvc near me,tutorialspoint spring boot,mvc map,csharp online compiler,asp.net download,sql between,ado.net c# pdf,services tag dell,wcf 2019 nba,csharp switch,ado.net ventajas y desventajas,csharpstar,wcf tutorial,tutorialspoint,ajax meaning,csharp-video-tutorials.blogspot,tutorials dojo,central park 5,csharp string format,ado.net c#,asp.net core github,server status,ajax fc,server jobs nyc,asp.net core swagger,sql formatter,credit karma,services group,server error in '/' application,services windows,asp.net core 3.0,sql injection,tutorialspoint c#,wcf ria services,calculator,ado.net entity data model,sql insert,tutorialspoint tableau,services google play apk,sqlyog,asp.net core 3 release date,sql server,server job description,tutorials by a,servicenow,webcam,mvc hours,webmd symptom,csharp array,csharp enum,ajax call,asp.net core 2. guida completa per lo sviluppatore,asp.net core,server pro,server status ffxiv,cheap flights,webcrims,asp.net core hosting,services sas,tutorialspoint java,tutorialspoint java compiler,webmd,csharp to json,college football,ado.net dataset,csharp dictionary,cnn,website builder,tutorialspoint sql,asp.net web api,server side rendering,weber grills,sql server 2017,tutorialspoint spark,mvc nj,ado.net oracle,asp.net core download,csharp to vb.net,webster bank,webstaurant,tutorialsystems,ajax post,services fms publish announcement,services.msc no abre,ajax jersey,csharp operator,asp.net core razor pages,server duties,asp.net core environment variables,csharp random,century 21,services consultores,services consulting,mvcsd,services.msc,mvcsc,ado.net pdf,asp.net core configuration,ajax marvel,sql update,asp.net tutorial,mvc medical,ado.net entity data model visual studio 2019,wcfs international curriculum,mvc2,ado.net entity data model visual studio 2017,chase online,wcf api,costco,server jobs near me,webex,sql meaning,sql tutorial,sql commands,ado.net entity framework,ajax tavern,tutorialsteacher,ajax javascript,services desk,ajax greek,csharp tutorial,mvc pattern,ado.net sql server,ado.net connection,asp.net identity,mvcu,asp.net core middleware,wcf web service,mvc webadvisor,web store,mvcc,webmail,mvci,mvctc,
Không có nhận xét nào:
Đăng nhận xét