Salient Soft

A new Ionic 2 application should be created via ionic-cli as follows:-

ionic start my-new-app tabs –v2

Note that the v2 switch is mandatory, as without it (and running ionic 2.2.1) I got a different folder structure which did not put the application code under a top level src/ directory – whilst this tutorial does not mention the switch, it is mentioned here.

Note also that the tabs keyword is an app template which creates a tabbed app. There are other choices as noted here .

The super starter template is noteworthy as it has simple examples of master/detail lists, searching, and simple forms. I tried this and had some issues getting it working but there is a fixed version which worked. I have documented this here.

Note also that this post here mentions using an earlier version of node (4.x) to avoid a number of issues. I have not tried that, as the current node version I have installed as I type is v7.5.0, which makes 4.x a pretty old version.

I may try the older one though, to see if the issues I hit with the menu toggle on the Nav bar menu might be solved. The issue I have hit is that the menu icon on the nav bar intermittently does not open the side menu. Typically clicking the same tab icon again or visiting another tab makes it work, such that it alternately fails and works. No solution has yet been found for this and I could not find any reference to it online.

Note that the default generated folder structure for —   v2 creates an app directory under /src, which is used for core app configuration stuff. I did attempt (mistakenly I now feel) putting the component and service layers under /src/app, but have now reverted that. Whilst this worked, when I then tried to move (with a webstorm refactor) /src/pages/ to /src/app/pages/ I hit numerous issues with  template errors/ html files not found when running ionic serve. I checked all the import and related configuration, and whilst some was incorrect, I eventually went through and corrected every .ts file individually and still had issues. This appears to be an issue – moving the /src/pages/ directory (for an app with the tabs template, as per the above ionic command) appears to break some hidden configuration that I could not find.

No Comments »

I was looking into this in order to find the best type for an arbitrary stream of Json.

This comment post here has an interesting discussion on this, and concludes that any is the most flexible, and there aren’t strong reasons for using the Object or {} (which are similar, as {} extends Object).

This post describes how to use TypeScript interfaces to describe the Json.

http://json2ts.com is a site that automatically creates the interfaces from the json for you, however in my case it did nothing when I gave it a returned CouchDB Json stream.

This stackoverflow post also discusses the issue and mentions json2ts.com – the poster evidently had more luck with it than I did.

No Comments »

Providers need to be declared as they ‘provide’ the objects to be injected – in many cases this will be a singleton reused whenever injected (much like a normal Spring bean in Java).

To be visible everywhere in the entire application, they should be declared in the Providers list in the root @NgModule  (e.g. app.module.ts).

However if not used globally, they can be for example registered in a component whereupon they will be visible to that component and its children only.

This angular doc here discusses dependency injection and where to register providers.

This angular doc here is the NgModule faq and also discusses the issue. It points out that registering the providers in the root AppModule (@NgModule as above) is the normal use case, and other cases are rare. In particular it makes the following points:-

Should I add application-wide providers to the root AppModule or the root AppComponent?

Register application-wide providers in the root AppModule, not in the AppComponent.

Lazy-loaded modules and their components can inject AppModule services; they can’t inject AppComponent services.

Register a service in AppComponent providers only if the service must be hidden from components outside the AppComponent tree. This is a rare use case.

More generally, prefer registering providers in modules to registering in components.

Discussion

Angular registers all startup module providers with the application root injector. The services created from root injector providers are available to the entire application. They are application-scoped.

Certain services (such as the Router) only work when registered in the application root injector.

By contrast, Angular registers AppComponent providers with the AppComponent‘s own injector. AppComponent services are available only to that component and its component tree. They are component-scoped.

The AppComponent‘s injector is a child of the root injector, one down in the injector hierarchy. For applications that don’t use the router, that’s almost the entire application. But for routed applications, "almost" isn’t good enough.

AppComponent services don’t exist at the root level where routing operates. Lazy-loaded modules can’t reach them. In the NgModule page sample applications, if you had registered UserService in the AppComponent, the HeroComponent couldn’t inject it. The application would fail the moment a user navigated to "Heroes".

Should I add other providers to a module or a component?

In general, prefer registering feature-specific providers in modules (@NgModule.providers) to registering in components (@Component.providers).

Register a provider with a component when you must limit the scope of a service instance to that component and its component tree. Apply the same reasoning to registering a provider with a directive.

For example, a hero editing component that needs a private copy of a caching hero service should register the HeroService with the HeroEditorComponent. Then each new instance of the HeroEditorComponent gets its own cached service instance. The changes that editor makes to heroes in its service don’t touch the hero instances elsewhere in the application.

Always register application-wide services with the root AppModule, not the root AppComponent.

No Comments »

I was unable to access a couchDb from another computer on the local network.

There were 2 issues that needed resolving to address this:-

1/ By default, CouchDb binds to 127.0.0.1:5984, and therefore is only accessible if you use this address (i.e. the loopback adapter) explicitly. Other adapters, such as the lan adapter which has the local ip address, will not work, so you can’t enter the server machine’s own IP address as this won’t work. To fix this, edit local.ini in <couchdb home dir>/etc, and bind to 0.0.0.0 instead of 127.0.0.1, as  follows:-

[chttpd]
port = 5984
; Options for the MochiWeb HTTP server.
;server_options = [{backlog, 128}, {acceptor_pool_size, 16}]
; For more socket options, consult Erlang’s module ‘inet’ man page.
;socket_options = [{recbuf, 262144}, {sndbuf, 262144}, {nodelay, true}]
bind_address = 0.0.0.0

Note the use of the [chttpd] section in the ini file, not [httpd]

Editing local.ini will override settings in default.ini, and these settings will also be preserved across upgrades, whereas edits to default.ini will not.

This is described in this post here. Note that you can also edit configuration parameters in fauxton in the configuration section. Clicking on the value of a parameter will expose an edit box to allow changes.

Once changes have been made you need to bounce the service.

2/ My other issue was to do with Kaspersky firewall settings. To ensure that you can access a machine from elsewhere on the lan, make sure your network type for the lan adapter is set to trusted and not public. Public will force you to enter explicit rules for every address/application/port etc. that you use, which is a complete pain on a lan. Trusted just allows all machines on the lan to interoperate freely. This is detailed here under how to change the network status.

No Comments »

When adding a menu button to an ion-navbar, there is a styling issue whereby the menu toggle gets the wrong styling.
This depends on whether the menuToggle attribute is present.

If the attribute is present and the toggle is placed inside an ion-buttons group, it gets the wrong styling via a special case for menu toggles (flex rather than inline-block like the rest). This (incorrectly) puts it on a separate line above the others. Putting it separately above the ion-buttons group, with an explicit left on the button, fixes the problem.

If the menuToggle attribute is NOT present, then the button needs to go inside the ion-buttons group as otherwise for example for a left group the other left buttons go to its left. The rules for all this styling seem a bit quirky and not clearly defined.

This post discusses this issue.

No Comments »

This is described in the theming docs here.

The above mentions using the color function to apply a color to an element.

The $colors defines a sass map of the color variants for Ionic. You can use the sass map-get() function to get colors from the map, as posted here:-

ion-menu ion-item span {       
 color: map-get($colors, primary);
}

However the correct way uses the color function as per the above theming docs and the comment in the above post:-

ion-menu ion-item span {
  color: color($colors, primary, base);
}

No Comments »

I wanted to try showing a centered title with a back button on the left, in the NavBar.

I tried various ways of doing this with css hacks, using floated <h1> and <div> combinations, but could not get it all to line up correctly.

The correct way is just to include an <ion-title> in the NavBar, as follows. This can be centred via the text-center attribute.

<ion-header>
  <ion-navbar>
    <ion-title text-wrap>
      {{place.localisedName}}
    </ion-title>
  </ion-navbar>
</ion-header>

Whilst text-center worked correctly in the title, note that text-wrap did not and was ignored.

As I did not take this pattern any further (I decided not to use titles in the toolbars but to put titles immediately underneath) I did not investigate this further.

This highlights an important issue. Too much CSS hacking breaks the encapsulation of the CSS model used by Ionic/Angular which is a bad thing – other things are in danger of breaking even if it does work initially.

it is obviously better to go with the tools/tags provided and investigate this way thoroughly first for a solution – in this case I did not and initially went down a blind alley which took time as well as being a suboptimal approach which did not work and broke encapsulation.

No Comments »

I hit issues with Webstorm, pregnant pauses and hanging for a few seconds.

The following points/posts offer help on tweaking:-

1. Firstly it helps to see current VM usage. This is not on by default but if you tick Show Memory Indicator in Settings/Preference/Appearance it will then show at the bottom right of the status bar.
2. VM can be tuned by editing the VM options as per this post here, but note that bigger is not necessarily better. Some of the hanging can be caused by excessive Garbage Collection when too much memory has to be GCd in one go. This post here goes into this. The tuning process can be informed by checking the memory indicator to see what you actually use.
3. Excluding unwanted directories from indexing is important – see this post for details on doing this.

No Comments »

This isn’t obvious when you browse the documentation, at least when starting out.

I’m coming from having used for example ThemeRoller with PrimeFaces, where structural css is defined by the components, to give size, shape, layout etc. Theming css   is defined by the theme, using common style classes etc. used by all components, to give colours, textures and fonts etc. The two concepts are mutually orthogonal, so you can use any theme with any component, and create your own theme.

I’ve seen theming and themes mentioned on a number of Angular/Ionic related sites, but without the same concept of orthogonality – themes are mentioned along with specialised components which are deemed to be part of a theme. Therefore, theming in Angular appears to encompass more than just the look and styling of components, but also the actual components and their functionality.

This could be summarised simply as follows:- ThemeRoller encompasses the look of an application, with components such as Primefaces encompassing the feel of the application.

With Angular/Ionic, the concept of theming is broader and appears to encompass both look and feel.

Some excellent posts by Josh Morony on how to theme an ionic application help to get under the hood on all this, and are available here:-

https://www.joshmorony.com/a-guide-to-styling-an-ionic-2-application/

https://www.joshmorony.com/a-list-of-common-css-utility-attributes-in-ionic-2/

https://www.joshmorony.com/tips-tricks-for-styling-ionic-2-applications/

https://www.joshmorony.com/hacking-css-in-ionic-2/

No Comments »

Whilst Angular 2 routing is handled via routers, Ionic takes a different approach with the use of the NavController and related components based on it like Nav and Tab.

Ionic navigation allows views to be pushed and popped from a navigation stack, and allows a root page to be established for a particular navigation stack.

A useful tutorial on Ionic Navigation may be found here.

No Comments »