SSW Foursquare

Rules to Better AngularJS - 8 Rules

Deprecated

Angular 2+ versions are simply called Angular. Angular is an incompatible rewrite of AngularJS.

Read Rules to Better Angular for updated rules.

AngularJS is a powerful and elegant front-end javascript framework. It is designed to make highly interactive front-end designs.

  1. Do you know why to upgrade from AngularJS to Angular?

    It is a good idea to upgrade your AngularJS application to the latest version of Angular (currently Angular 14 as of December 2022).

    Tip: You can check the version of Angular by using the "Inspect" tool on your browser:

    There are a number of reasons why you should consider migrating your Angular application to the latest version:

    Dynamism

    The most annoying feature of AngularJS 1.x is that we can’t add anything dynamically. In contrast, in Angular, we can create a component, configure a router and register a service in a pleasant way. One of the basic concepts of Angular 2 and newer is that after clicking on some menu item we can dynamically pull the part of the application responsible for the application display. To do it in AngularJS we had to hack the framework, use undocumented functions and gaps in the framework – things that we actually shouldn’t do.

    Component-based

    Angular is entirely component-based. This feature enforces thinking in components and as a result, we get an application that is neatly and naturally divided into separate parts - at least if you don’t create one component for the entire subpage. Component-based application development is usually faster due to easy creation and reasoning. Well designed components are also reusable which makes an application's code more coherent.

    Dependency injection

    There is a simpler, more intelligible dependency injection container in Angular. Few developers knew the difference between provider, service, and factory in Angular 1 and there is no such problem in Angular. Now the default setting is class instance - only if you want to use a different raw value you need to declare it explicitly using an easily understandable object literal.

    TypeScript Support

    The latest version of Angular fully embraces Typescript. For those unfamiliar with this term, TypeScript Lang builds on top of what you already know about JavaScript but incorporates many additional tools to your ability to refactor code, write in modern JS (ECMAScript 2015), and compile to the older versions depending on browser request. Another important facet is IDE integration is that it makes easier to scale large projects through refactoring your whole code base at the same time. Its inbuilt code completion tool effectively saves your precious time from having to look up various features from the libraries you use individually.

  2. Do you know the best Visual Studio Extensions and NuGet Packages for AngularJS?

    Following this rule will ensure the right NuGet packages and Visual Studio Extensions are included in your projects to help speed up your development, follow best practices and have the team using the same processes.

    The best NuGet packages are:

    • Angular.UI.Bootstrap
      Check out the whole suite of tools from the Angular UI team.
    • AngularJS.Core
      This core package only has the minimum Angular references to get started. Other Angular packages like AngularJS.Route can be added as needed in addition to this.
    • AngularJS 
      The whole AngularJS library.
    • HotTowel.Angular 
      John Papa's popular AngularJS Single Page Application (SPA) template.
    • Side Waffle
      Templates for common AngularJS components like controllers, factories, and modules.

    Alternate sources for Angular Modules:

    • NgModules Modules are a great way to organize an application and extend it with capabilities from external libraries.
  3. Do you write your Angular 1.x directives in TypeScript?

    Angular 1.x directives are awesome and they help you reuse your code base by being able to drop directives (aka reuasable HTML elements) into several pages without having to duplicate your code base.

    Writing your AngularJS 1.x directives in Typescript will help in the following ways:

    1. You will more easily migrate to Angular2 which is written in TypeScript
    2. Your code will be more robust with compile time checking avoiding errors you might miss or not see till you run the application in the browser
    3. You can more easily manage your code by reusing directives and not duplicating code
    4. If you keep your DDO (Directive Definition Object) seperate to your directive controller logic you can avoid using $scope and further be ready to migrate to Angular2. You can also reuse the directive controller with other parts of your application

    Writing Angular 1.x directives in Typescript can be a challenge with only a few examples available online. Most examples of Angular 1.x directives are in JavaScript and converting them to TypeScript versions means you need to have a good understanding of how it all works. Many examples that are available online do it a little differently from each other.

    HTML

    <current-value></current-value>

    Typescript

    module app.widgets {
        'use strict';
    
        class CurrentValueDirectiveController {
            amount: number;
    
            static $inject = ['investmentReportsService'];
            constructor(private investmentReportsService: app.dataServices.InvestmentService) {
            }
    
            setCurrentValue() {
                this.investmentReportsService.investmentSummary(this.amount)
                    .then((response) => {
                        this.currentValue = response.Data.TotalMarket;
                    });
            }
        }
    
        function CurrentValueDirective(): ng.IDirective {
            return {
                restrict = 'E';
                templateUrl = 'app/widgets/currentValue/currentValue.directive.html';
                controller = CurrentValueDirectiveController;
                controllerAs = 'currentValueDirCtrl';
                bindToController = true;
                scope = {
                    amount: '='
                }
            }
        }
    
        angular
            .module('app.widgets')
            .directive('currentValue', CurrentValueDirective);
    }
  4. Do you name your dependencies to avoid problems with minification?

    Angular uses parameter names to determine which dependencies to inject. When you minify your angular code, the parameter names are changed, so you must name your dependencies to ensure they work correctly.

    The standard way to inject your dependencies looks a little like the following. We're defining a controller in this case.

    phonecatApp.controller('PhoneListCtrl', function ($scope, $http) {...}

    Code: Bad example - This code will break when minified

    When this code is minified the parameters are renamed. This means that the dependency injector no longer knows which services to inject.

    You can fix this in 2 ways. The first one uses the $inject property to identify the name of the parameters in order:

    function PhoneListCtrl($scope, $http) {...}
    PhoneListCtrl.$inject = ['$scope', '$http'];
    phonecatApp.controller('PhoneListCtrl', PhoneListCtrl);

    Code: Good example - This code names the parameters using the $inject property

    The second and preferred option is to pass an array containing the names, followed by the function itself. Take a look:

    phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', function($scope, $http) {...}]);

    Code: Better example - This code names the parameters inline which is a little cleaner

    Using this method will ensure you don't run into problems with minification. If you'd like to know more, check out the Angular tutorial for Dependency Injection.

  5. Do you consider SEO in your AngularJS application?

    Search Engine Optimisation (SEO) with a Single Page Application (SPA) needs consideration like any other Framework to ensure it is SEO friendly. Because AngularJS manages your routing and URLs it is important to be aware of the differences in making an AngularJS SPA SEO friendly.

    If you ignore your SEO in an Angular SPA you may not have your pages indexed by Google and lose your ranking with SEO. If your pages are not being rendered to Google's bots when they crawl your site, Google cannot see your pages and it is like they do not exist.

    The only way to be sure your Angular SPA will be crawled and indexed properly by Google Bots is to intercept all their requests and serve them HTML you pre-render on the server.

    It is not enough to just use hashes in your URLs (e.g., example.com/index.html#mystate, where #mystate is the hash fragment) or hope Google can crawl an Angular application correctly. You can read more here Guide to AJAX crawling for webmasters and developers. There are several libraries to help pre-render your code available on the internet.

    If you do not pre-render HTML you may still get good enough SEO as Google Bots are getting better at crawling JavaScript but you cannot be certain it will work. You can use Google Fetch to test how your web pages look to a Google bot.

    seo for angular diagram
    Figure: How to configure your site to pre-render HTML for Google bots.

    Besides pre-rendering HTML to get your AngularJS Single Page Application (SPA) SEO friendly you can apply the following practices:

    1. Enable html5Mode for AngularJS outing This will remove the hashtagged-URLs by default for pretty URLs, using the pushState feature that newer browsers have, which still falls back to the hashbang method if pushState isn't available. To enable html5Mode in AngularJs read https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag.
    2. Creating a sitemap Web crawlers usually discover pages from links within the site and from other sites. Sitemaps supplement this data to allow crawlers that support Sitemaps to pick up all URLs in the Sitemap and learn about those URLs using the associated metadata. Using the Sitemap protocol does not guarantee that web pages are included in search engines, but provides hints for web crawlers to do a better job of crawling your site. More information at sitemap.org
    3. Enriching your app with meta information This step ensures your search results are represented in a meaningful and predictable way. Dynamically changing the meta tags content in the head section of the page can also help google find and represent you in their search results.
    4. You can inspect what HTML Google renders with Webmaster Tools , it is also an excellent source of information.
    5. Here’s what you need to know to ensure your website is crawled correctly by Google in general regardless of if your application is a SPA: Introduction to SEO and Google Tools – Craig Bailey [FireBootCamp]

    Note: Since May 2014 Google announced that they're finally crawling javascript making SEO for a SPA simpler. Previously your SPA needed to distinguish between normal users and crawlers - and re-route (somehow) to the special crawler-only-endpoints if a bot is requesting the page.

    Source: https://developers.google.com/search/blog/2014/05/understanding-web-pages-better

  6. Do you call AngularJS services from your Kendo datasource?

    To keep a good separation of concerns between your AngularJS controllers and your data service layers you should always call an AngularJS service or factory from your Kendo datasource logic.

    Many demonstrations show a hard coded string in your Angular controllers calling your API but this means you will be making data API calls from your controllers, which is bad for several reasons:

    1. You will end up with many API data calls from different controllers versus all being in your one location
    2. Your controllers will be harder to unit test
    3. If you want to call the same API endpoint somewhere else in your application you now have two place with this hard coded string, that might need to change in the future
    4. If you keep all your data calls in one place your code will be easier to read and you can share business logic for making the API calls within your Angular service or factory, like a common error handling message for failed API calls
    5. Finally you can perform actions while the promise is being resolved, like show a spinner animation or log out a message to the user

    The bad way to call your API from a Kendo datasource with AngularJS. Notice the hard coded url directly calling the API endpoint.

    read: { 
        url: "../content/dataviz/js/spain-electricity.json", 
        dataType: "json" 
    }

    Bad Example - This hard codes your url endpoint throughout your application 

    This is example is in TypeScript and you can see the Kendo data source is calling the getFundAssetPositionChartData function and passing it a promise which when resolved will return the data. This function calls an AngularJS service which then calls the API endpoint. You can also see in the getFundAssetPositionChartData function the ‘this.isLoading = true’ code which is turning the pages spinner feature on and off when the call is resolved, to let the user know it is processing.

    module app.widgets {    
        'use strict';
        class AssetAllocationByAssetClassChartController {        
             isLoading: any;        
             static $inject = ['app.dataServices.InvestmentReportsService'
              
             constructor(private investmentReportsService: dataServices.InvestmentReportsService) { }
              
             options = {            
                 series: [{                
                     field: 'AssetStrategyOverallPercent',                
                     categoryField: 'AssetClassName'            
                 }],            
                 seriesDefaults: {                
                     type: 'pie'            
                 },            
                 legend: {                
                     position: 'bottom',                
                     labels: {                    
                         visible: true,                    
                         background: 'transparent',                    
                         template: '#=text # #=value#% '               
                     }            
                 },            
                 dataSource: new kendo.data.DataSource({                
                     transport: {                    
                         read: (promise: any) => {                        
                             this.getFundAssetPositionChartData(promise);                    
                         }                
                     }            
                 })        
             }        
         
             getFundAssetPositionChartData = (promise) => {            
                 this.isLoading = true;            
                 return this.investmentReportsService.fundAssetPosition()                
                     .then((response) => {                    
                         promise.success(                        
                             response.Data.PortfolioAssetPositions[0].AssetClassDetailList                    
                         );                    
                         this.isLoading = false;                
                     });        
             }    
        }    
    
        Angular.module('app.widgets')        
            .controller('app.widgets.assetAllocationByAssetClassChartController',        
                AssetAllocationByAssetClassChartController        
            )
    }

    Good Example - This code passes a promise to a function which calls an AngularJS service to call the API endpoint.

  7. Do you know the best free resources for AngularJS

    Here are the best collection of resources for AngularJS.

  8. Tools - Do you know what Angular Tools to install for an Angular project?

    If you want to get started with Angular, go to the Angular Setup guide.

    The prerequisites are:

    1. Node.js and NPM (installed with Node.Js by default)
    2. Angular CLI

    The best practice for creating an Angular project and components is to use the Angular CLI (command-line interface).

    The Angular CLI is also used in the latest .NET Angular SPA template.Read Do you know that the ASP.NET Core SPA Template for Angular uses the Angular CLI?

    Instructions for upgrading the Angular CLI of an existing project can be found on update.angular.io.

    Getting errors?

    If you get errors, follow instructions in the links:

    Which IDE should I use for developing Angular applications?

    We recommendVSCode. Read more on Do you know the best IDE for Angular?

    Other tools to consider

    In addition to the essential tools mentioned, there are several other useful browser extensions that can improve your development experience:

    1. Angular DevTools for Angular 12+ applications.

    Angular DevTools helps to debug and profile Angular applications by visualizing the component structure, inspecting component properties, inputs, and outputs and running a performance profiler.

    1. Redux DevTools when using state management libraries like NgRx or NgXs.

    Redux DevTools allows for inspection, monitoring, and manipulation of the state of an Angular application.

We open source. Powered by GitHub