Angular – Pauls Blog

Angular configure user browser locale

Paul Sterl — Sat, 21 Jan 2023 12:54:35 +0000

Problem

Using the angular date pipe etc. we often see that by default the format is en-US instead of the expected browser language of the user.

Solution

What we have to do is quite simple:

Import the locales we want to support
Register the locales
Configure LOCALE_ID provider using the browser language

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

// 1. Import the locales we want to support, here we import just two
import localeDe from '@angular/common/locales/de';
import localeEn from '@angular/common/locales/en';
import { LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';

// other imports ...

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
	// other imports ...
  ],
  providers: [
    // 3. Configure LOCALE_ID provider using the browser language
    {provide: LOCALE_ID, useValue: navigator.language ?? 'en' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor() {
    // 2. Register the locales
    registerLocaleData(localeDe, 'de');
    registerLocaleData(localeEn, 'en');
  }
 }

Angular & Spring Boot

Paul Sterl — Sun, 17 Feb 2019 08:47:14 +0000

Problem

We want to combine Spring and Angular use the Angular developing features but also be able to use the Spring IDE, in the end, everything should be build using maven and nicely packed into a JAR.
Let’s get started.

Overview

Create a multi-module project
Pack the frontend into an own JAR
Include the frontend JAR into the Spring application
Add a caching configuration

Less text more code get me to the source.

Multi-Module project

Create a new simple Spring project using https://start.spring.io/
Generate a new angular project ng new frontend
Create a new pom and include frontend and backend


  frontend 
  backend

It may make sense to move the spring parent into the root-pom.

Why a multi-module?

You might think why the hack we don’t just pull everything into one maven artifact? Well, separation both may be considered good practice but the real reason is:
We can in that way use, during the development, the best tools for the job. Means use the angular dev server for the front-end and the Spring STS IDE for the backend. Means also just restart/ reload the UI or the Backend if the change that. Even more, build the UI and use the backend running somewhere else.

Build angular with maven

Overall we have here to choose, either we use the frontend-maven-plugin, assuming the CI server has no nodeJS installed or we go with the exec-maven-plugin. The last one is faster assuming the CI server has not to pull nodeJS first. What we want to run is:

npm install
ng build –prod

Build angular with exec-maven-plugin


    exec-maven-plugin
    org.codehaus.mojo
    
        
            npm install
            
                exec
            
            generate-resources
            
                npm
                
                    install
                
            
        

        
            angular-cli build
            
                exec
            
            compile
            
                ng
                
                    build
                  	
                    
                    --output-path
                    ${project.build.outputDirectory}/META-INF/resources/webjars/${project.artifactId}/${project.version}

This will not delete the node_modules folder; which is intended. As this takes usually some unnecessary time.

Note: We added here already the --output-path to emulate a kind of web-jar, we will use this later to configure the Spring resource handler. We could of course remove the version here.

Add node_modules to mvn clean


	org.apache.maven.plugins
	maven-clean-plugin
	
		
			
				node_modules

Include the Angular frontend in Spring

Again we have two ways to go, we could either include the JAR file and configure the resource handler, or just copy the files over into the static folder of spring during the build. The last one is very easy the first one has the advantage that we could include easily multiple angular JARs into our project.

Include the frontend as JAR


    ${project.groupId}
    frontend
    ${project.version}

In your Spring application add implements WebMvcConfigurer. This will allow you to extend

@Autowired private BuildProperties buildProperties;
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    final String jarResourcePath = "classpath:/META-INF/resources/webjars/frontend/" + buildProperties.getVersion() + "/";
        // no caching for HTML pages
        registry.addResourceHandler("/ui/*.html")
                .setCacheControl(CacheControl.noStore().sMaxAge(0, TimeUnit.SECONDS).mustRevalidate())
                .setCachePeriod(0)
                .addResourceLocations(jarResourcePath);

        // 365 days for JS and CSS files, which have a hash code in the file name 
        // generated by angular
        registry.addResourceHandler("/ui/*.js", "/ui/*.css")
                .addResourceLocations(jarResourcePath)
                .setCacheControl(CacheControl.maxAge(365, TimeUnit.DAYS))
                .resourceChain(true);
        
        // apply custom config as needed to the remaining resources
        registry.addResourceHandler("/ui/**")
                .addResourceLocations(jarResourcePath)
                .setCacheControl(CacheControl.maxAge(7, TimeUnit.DAYS))
                .resourceChain(true);
	
}

Note: We added here already a caching configuration.

In addition we have to tell Spring that by default if anybody opens / we want to display the index.html. This is only needed if we include the angular app as JAR, as we can just delete the static folder.

public void addViewControllers(ViewControllerRegistry registry) {
    registry.addViewController("/").setViewName("forward:/index.html");
}

// in the addResourceHandlers we can also alternatively add the view ot the base e.g. 
// / or ui/
// handy in case of PathLocationStrategy
registry.addResourceHandler("/")
    .setCacheControl(CacheControl.noStore().sMaxAge(0, TimeUnit.SECONDS).mustRevalidate()).setCachePeriod(0)
    .addResourceLocations(jarResourcePath + "index.html");

Copy the Angular files

The most simple way to just include the angular into the build JAR is to copy them during the package phase into the static directory from Spring. From where it will just behave like a regular application.


    maven-resources-plugin
    
        
            copy frontend resources
            prepare-package
            
                copy-resources
            
            
                ${project.build.outputDirectory}/static
                
                    
                        ../frontend/target/classes/META-INF/resources/webjars/frontend/${project.version}

If we copy the resources, we can just set optional onto the frontend JAR or provided. The only reason we keep it in the pom.xml is just to ensure that it gets build first by maven; even if somebody re-sorts the modules in the root pom.

Note: If we copy the resources we can also remove the addResourceHandlers configuration from the app. As we don’t need to tell Spring to check the JAR file too.

Handling HTML 5 routes in Spring

Using a Regex (not recommended)

A common problem is to handle any HTML5 routes from angular, if why are directly opened in the browser. We don’t really want to add a view handler for each angular route. We have just to add a simple @Controller with the following code.

@RequestMapping(value = "/{[path:[^\\.]*}")
public String redirect() {
    return "forward:/index.html";
}

Using a fallback route

registry.addResourceHandler("/**").addResourceLocations(jarResourcePath)
        .setCacheControl(CacheControl.maxAge(1, TimeUnit.HOURS)).resourceChain(true)
        .addResolver(new PathResourceResolver() {
            // fall back to our index.html for any other stuff
            // to support angular PathLocationStrategy
            @Override
            protected Resource getResource(String resourcePath, Resource location) throws IOException {
                final Resource requestedResource = location.createRelative(resourcePath);
                Resource result = requestedResource;
                if (!requestedResource.exists()) {
                    result = new ClassPathResource("/META-INF/resources/index.html");
                }
                return result;
            }
        });

Custom UI base path

Another solution would be to publish the API and the UI with different prefixes e.g.:

/api/* or /rest/* for all REST services
/ui/* for the angular UI

This makes the controller match clearer and more predictable if also other services like the Swagger UI etc. are hosted too. But it requires some adjustments too:

base href for the HTML5 angular navigation has to be set --base-href /ui/
The resource handler above need have /ui/* prefix
We need a filter or a controller

// custom filter, which does the same as the controller
@Bean
public OncePerRequestFilter angularForwardFilter() {
    return new OncePerRequestFilter() {
        @Override
        protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
            final String requestURI = request.getRequestURI();
            if (requestURI.startsWith("/ui") && !requestURI.endsWith("/ui/index.html") && !requestURI.contains(".")) {
                request.getRequestDispatcher("/ui/index.html").forward(request, response);
            } else {
                filterChain.doFilter(request, response);
            }
        }
    };
}
// custom controller class with a regex instead of the OncePerRequestFilter
@Controller
@RequestMapping("/ui")
public class AngularUiController {
    @GetMapping("{[path:[^\\.]*}")
    String index() {
        return "forward:/ui/index.html";
    }
}

Explicit match

Last but not least we can, of course, duplicate any angular route in our request mapping.

@RequestMapping({"/", "/home", "/home/*", "/person", "/person/list"})
public String redirect() {
    return "forward:/index.html";
}

Avoid reloading the backend on frontend changes

Including the dev-tools from Spring will unfortunately also reload the backend if we change the frontend. We could of course just remove the frontend JAR dependency but we could also tell Spring to stop. For this we have to create the spring-devtools.properties in the META-INF directory telling Spring not to do so:

restart.exclude.frontend=.*/frontend/.*

Proxy /api calls to the backend

Now we have to forward any calls going to /api to our backend otherwise we cannot get any data from any REST call during the usage of the angular dev web-server. For that, we have to add the proxy.conf.json to the project

{
    "/api": {
        "target": "http://localhost:8080",
        "secure": false
    }
}

and extend package.json to add a short cut add the proxy config if we run ng serve.

{
  "scripts": {
    "start": "ng serve --proxy-config proxy.conf.json",

Now we can run the Angular dev server with the proxy config using npm start.

AngularJS Cheat Sheet

Paul Sterl — Fri, 23 Jun 2017 04:26:07 +0000

Create vs. Get AngularJS application

The module dependency array tells AngularJS to create an app, otherwise to load it:

Create myApp	`var app = angular.module('myApp', []);`
Get myApp	`var app = angular.module('myApp');`

Binding

@ Text binding, expressions are supported using {{ }}
= Two-way binding
& Method binding
< One-way binding (usually for components)
? for an optional binding e.g. @? for an optional string binding

Service, Factory, Provider, Value & Controller

AngularJS Doc

A Service is a singleton instance of a custom object. In can be used to share state or usually to wrap the remote REST API in a reuseable faction. It is injected using the name (review sample).
Basically simple AngularJs beans we want to inject later.

angular.module('myApp').service('myServiceName', ['depedency', function(depedency) {
    var privateState = {foo: 'bar'}; // this will be shared between any we inject this service
    this.publicApi = function(newConfig) {
        return privateState.foo; // shared singleton state
    };
}]);

The Factory follows as the name already tells the factory pattern and so allows us to construct either a complex value we want to inject into our controllers or even already existing JS objects which require any dependencies upfront. Basically wrap beans which need a constructor injection (review sample).

// any bean
function myService($log) {
  this.log = $log;
}
myService.prototype.getState = function() {
  return this.state; // still shared if we like
}
//-- AngularJS starts here
// construct the bean and inject what is needed
angular.module('myApp', []).factory(
    'myServiceFactory', ['$log', function($log) {
  // here is the main difference to service,
  // manually call new
  return new myService($log);
}]);

Provider

A Provider is the base for factory and service and has the biggest flexibility. Most important it can be injected into the config method and so configured before the first usage (review sample).

// my service / or just bean
function myService($log, initValue) {
  this.log = $log;
  this.state = {
    foo: initValue || 'Default state'
  };
  $log.info('Service Constructor called ...');
}
myService.prototype.getState = function() {
  this.log.info('getState called ...');
  return this.state;
}

// create angular myApp
var myApp = angular.module('myApp', []);
// register the provider providing our service
// function name is here only to how that this is the provider
myApp.provider('myService', function myServiceProvider() {
  // config area
  var providerState;
  this.config = function(newState) {
  	providerState = newState;
  };
  // constructor like in factory
  // again the name only indicates that here is where the factory function goes...
  this.$get = ['$log', function myServiceFactory($log) {
  	return new myService($log, providerState);
  }] 
});
// configure the provider / service
myApp.config(['myServiceProvider', function (myServiceProvider) {
	console.info('config:', myServiceProvider);
  myServiceProvider.config('configured state');
}]);
// just use it
myApp.component('c1', {
  controller: ['myService', function(myService) {
    this.state = myService.getState();
  }],
  template: 'C1: '
});
myApp.component('c2', {
  controller: ['myService', function(myService) {
    this.state = myService.getState();
  }],
  template: 'C2: '
});

A Value is a simple object, int or string we want to make available for injection

HTML elements in AngularJS

Access HTML element Directive

The easiest way is just to use the link method:

angular.module('myApp).directive('myDirective', function () {
    return {
        restrict: 'A',
        replace : false,
        // scope, the element and the attributes
        link: function ($scope, element, attr) {
            // controller not needed if we have no public API
        }
    }
}

Access HTML element in Component

In a component we can just inject the $element.

jsui.component('myComponent', {
        // first we can always inject the element of the component
        controller: ['$element', function ($element) {
            var subEl  = $element.find('.any-class'), // optional search by class
                rawDomEl = subEl[0]; // get the raw DOM element

            });
        }],
        templateUrl: 'app/myTemplate.html'
    });

Access raw HTML element

As you can see in the last example we can access the raw DOM element using [0] on the wrapped element.

Restrict in Angular Directive

The restrict option is typically set to:

'A' – only matches attribute name
'E' – only matches element name
'C' – only matches class name
'M' – only matches comment

These restrictions can all be combined as needed:

'AEC' – matches either attribute or element or class name

URL Routing to AngularJS components

app.config(['$urlRouterProvider', '$stateProvider',
    function($urlRouterProvider, $stateProvider) {
            
        $urlRouterProvider.otherwise('/home');
            .state('home', {
                url: '/home',
                component: 'homeComponent'
            })
    })
    // this could be in an own file
    .component('homeComponent', {
        controller: function () {
            // this.title is available
            console.info("homeComponent loaded ...");
        },
        templateUrl: 'home/home.html'
    })
;

ocLazyLoad angular components during routing

As the lifecycle of components is a bit different we have to eager load them using ocLazyLoad:

.state('home', {
    url: '/home',
    component: 'homeComponent',
    resolvePolicy: { deps: { when: "EAGER" } }, // LOAD EAGERLY
    resolve: {
        deps: ['$ocLazyLoad', function ($ocLazyLoad) {
          return $ocLazyLoad.load(
            { // best to store it static somewhere if needed more than once ...
              name: "lazyHome",
              files: ["home/homeComponent.js"]
            }
          );
        }]
    }
});

Access URL parameters

The easiest way to access the URL params is just to inject $stateParams into the component get read it. A bit cleaner is using the resolve of the state to inject the parameters into the component. As so we have to keep in mind that happens async, which means we have to implement the $onInit method to get hold of the injected values into our component. More to components.

// given this state router we want to pass the vin to our component
.state('app.vehicle', {
    url: '/vehicle/:vin',
    component: 'vehicleComponent',
    // pass the vin from the URL to the component
    resolve: { 
        // could have the same name
        vehicleId: function($stateParams) { return $stateParams.vin; }
   }
})

// component using the VIN, here string binding
app.component('vehicleComponent', {
    bindings: {
        vehicleId: '@'
    },
    // we could access state passing here function($stateParams) 
    // and later with $stateParams.vin, which would couple URL id to components
    // and so we should better inject it ...
    controller: function () { 
        // async called INIT method vinComponent is set
        this.$onInit = function() {
            console.info(this.vehicleId);
        };
        // this is most likely not defined, as the resolve happens async
        console.info(this.vehicleId);
    },
    templateUrl: 'vehicle.html'
});

Dynamic ncyBreadcrumb label for AngularJS Components

Accessing just the $scope doesn’t always work well during the reload of the page furthermore, it doesn’t work for components anyhow. The easiest way is just to inject the $breadcrumb service and be done with it:

// state definition
.state('app.customer', {
    url: '/customer/:customerId',
    component: 'customer',
    ncyBreadcrumb: {
        parent: 'app.customers',
        label: '{{ pageLabel || "New Customer" }}'
    }
});

// in the component just assign the label attribute in the ncyBreadcrumb
angular.module('myApp').component('customer', {
    bindings: {
        customerId: '@'
    },
    controller: ['$breadcrumb', function ($breadcrumb) {
        // set the page label
        $breadcrumb.$getLastViewScope().pageLabel = "my page label";

    }],
    templateUrl: 'customer.html'
});

Angular – Pauls Blog

Angular configure user browser locale

Problem

Solution

Angular & Spring Boot

Problem

Overview

Multi-Module project

Why a multi-module?

Build angular with maven

Build angular with exec-maven-plugin

Add node_modules to mvn clean

Include the Angular frontend in Spring

Include the frontend as JAR

Copy the Angular files

Handling HTML 5 routes in Spring

Using a Regex (not recommended)

Using a fallback route

Custom UI base path

Explicit match

Avoid reloading the backend on frontend changes

Proxy /api calls to the backend

Links

AngularJS Cheat Sheet

Create vs. Get AngularJS application

Binding

Service, Factory, Provider, Value & Controller

Provider

HTML elements in AngularJS

Access HTML element Directive

Access HTML element in Component

Access raw HTML element

Restrict in Angular Directive

URL Routing to AngularJS components

ocLazyLoad angular components during routing

Access URL parameters

Dynamic ncyBreadcrumb label for AngularJS Components