AngularJS Reloaded

#AngularJS Reloaded - Lazy Loading Files by @fabiosilvalima cc @CsharpCorner  #Angular

  • template: ‘The page does not use GRID scripts.
  • You have a page “A” that uses jqGrid plugin and two other pages, “B” and “C,” that do not use the plugin.
  • You normally reference jqGrid plugin in your master page, so the pages “A”, “B” and “C” will load the script plugin but only page “A” will need it.
  • baseFolder + ‘Scripts/plugins/jqGrid/jquery.jqGrid.min.js’ ,
  • The “definitions” hold a configuration for any plugin and scripts/css dependencies.

In this article, I will show you how to load your scripts and styles, using AngularJS and UI Router Resolve when it’s required.

@CsharpCorner: #AngularJS Reloaded – Lazy Loading Files by @fabiosilvalima cc @CsharpCorner #Angular

AngularJS Reloaded – Lazy Loading Files

 

 

 

 

 

C# Corner

In Focus How To Write Your First Technical Article

Getting Started with Bootstrap

C# Corner Wishes You Merry Christmas and Happy Holidays!

C# Corner

Contribute An Article

A Blog

A News

A Video

A Link

An Interview Question

Ask a Question

 

TECHNOLOGIES .NET Chapters How do I Office Development SQL Server

.NET Core CIO HTML 5 OOP/OOD TypeScript

ADO.NET Cloud Internet & Web Open Source Unity

AJAX Coding Best Practices Internet of Things Operating Systems Universal Windows Platform

Algorithms in C# Cognitive Services Ionic Oracle Visual Studio

Android COM Interop iOS Philosophy VR and AR

Angular 2 Cryptography Java Power BI WCF

AngularJS Crystal Reports JavaScript Products Web Development

Architecture Current Affairs JQuery Project Management Web Services

ArcObject Custom Controls JSON Python Windows 10

ASP.NET Databases & DBA Knockout React Windows Forms

ASP.NET Core Design Patterns & Practices LINQ Security Windows Services

Azure DevOps Machine Learning Servers Workflow Foundation

Big Data Dynamics CRM Microsoft Office SharePoint WPF

Bootstrap Entity Framework Microsoft Phone SignalR Xamarin

Bot Framework Games Programming Mobile Development Software Testing XAML

C# Google Development Multithreading SQL Language XML

Career Advice Hardware Node.js

Request a new Category | View All

ANSWERS

BLOGS

VIDEOS

INTERVIEWS

BOOKS

NEWS

CHAPTERS

CAREER

Jobs

IDEAS

Reader Level:

Article

AngularJS Reloaded – Lazy Loading Files

By Fabio Silva Lima on Dec 14 2016

In this article, I will show you how to load your scripts and styles, using AngularJS and UI Router Resolve when it’s required.

2 Like

Love It

Awesome

Interesting

It’s Okay

Thumbs Down

3.5k

0

facebook

twitter

linkedIn

google Plus

Reddit

WhatsApp

expand

In this article, I will show you how to load your scripts and styles, using AngularJS and UI Router Resolve, when it’s required.

 

Let’s face the problem

 

You have a page “A” that uses jqGrid plugin and two other pages, “B” and “C,” that do not use the plugin. You normally reference jqGrid plugin in your master page, so the pages “A”, “B” and “C” will load the script plugin but only page “A” will need it. This is a network performance issue and it becomes complex with many scripts.

 

The Solution

 

Use a combination of lazy loading AngularJS plugin and AngularJS UI Router Resolve to do all the necessary steps before the page loads.

 

Let’s see the code given below.

var  definitions =  function  () {  

    var  baseFolder =  ” ;  

    return  {  

        grid: {  

            devDependencies: [  

                baseFolder + ‘Css/plugins/jQueryUI/jquery-ui-1.10.4.custom.min.css’ ,  

                baseFolder + ‘Css/plugins/jqGrid/ui.jqgrid.css’ ,  

                baseFolder + ‘Css/style.jqGrid.css’ ,  

                baseFolder + ‘Scripts/plugins/jqGrid/i18n/grid.locale-pt.js’ ,  

                baseFolder + ‘Scripts/plugins/jqGrid/jquery.jqGrid.min.js’ ,  

                baseFolder + ‘Scripts/plugins/jquery-ui/jquery-ui.min.js’   

            ]  

        }  

    };  

} ();   

The “definitions” hold a configuration for any plugin and scripts/css dependencies.

( function  () {  

  

    class  AppRoutes {  

  

        constructor(  

            private  utilProvider: App.Util,  

            private  $stateProvider: ng.ui.IStateProvider,  

            private  $urlRouterProvider: ng.ui.IUrlRouterProvider  

        ) {  

            let genericRoute = new  App.Core.State.GenericState( this .utilProvider);  

  

            this .$urlRouterProvider.otherwise( “/login” );  

            this .$stateProvider.state( ‘homemenu’ , genericRoute.getState({  

                url: ‘/’ ,  

                views: {  

                    root: {  

                        template: ‘The page does not use GRID scripts. Go to Person Page‘   

                    }  

                }  

            }));  

            this .$stateProvider.state( ‘homeperson’ , genericRoute.getState({  

                url: ‘/person’ ,  

                dependencies: [‘grid’ ],  

                views: {  

                    root: {  

                        template: ‘That page uses GRID scripts. Back to Home Page‘   

                    }  

                }  

            }));  

        }  

    }  

  

    AppRoutes.$inject = [  

        ‘utilProvider’ ,  

        ‘$stateProvider’ ,  

        ‘$urlRouterProvider’   

    ];  

  

    angular  

        .module(‘app’ )  

        .config(AppRoutes);  

  

})();   

The code given above helps to configure the routes for this article. Just the “/person” route uses “grid” plugin as a dependency. The “getState” method helps you to configure the lazy loading for the dependency and verify in the “definition” object to know which scripts and styles will load.

 

Try it yourself

Access the home page.

 

Check in Fiddler, no scripts and styles for GRID have been loaded.

 

 

Click Person Page link and it will navigate to person page.

 

 

Check in Fiddler. For this route, our GRID scripts styles have been loaded successfully.

 

 

Dowload full source code.

AngularJS TypeScript Lazy Loading Files

Trending up

01 Difference Between .NET Framework and .NET Core

02 Four Ways To Get The Most Out Of Microsoft Edge And Benefit From It (And Influence People)

03 ASP.NET Or ASP.NET Core, What To Choose?

04 Local Functions In C# 7.0

05 Google Maps In MVC

06 Literal Improvements In C# 7.0

07 Introduction To Data Science In Visual Studio

08 How To Setup Picture Password In Windows 10

09 An Easy Way To Understand Joins In SQL Server

10 What Is The Future Of .NET Core?

View All

Follow @twitterapi

MVPs

MOST VIEWED

LEGENDS

NOW

PRIZES

REVIEWS

SURVEY

CERTIFICATIONS

DOWNLOADS

Hosted By CBeyond Cloud Services

ABOUT US

FAQ

MEDIA KIT

MEMBERS

STUDENTS

LINKS

CONTACT US

PRIVACY POLICY

TERMS & CONDITIONS

SITEMAP

REPORT A BUG

facebook

twitter

google

media

©2016 C# Corner. All contents are copyright of their authors.

Contact Us

Privacy Policy

Terms & Conditions

About Us

©2016 C# Corner. All contents are copyright of their authors.

AngularJS Reloaded

You might also like More from author

Comments are closed, but trackbacks and pingbacks are open.