Search code examples
angularjsnode.jstemplatesreusabilityangularjs-module

using angular modules and node templates for better reuse ability

I am new to web programming and codding in general. so , please pardon me if this is a newbie question or repeat one or my knowledge is wrong.

what i know

1.Angular is not seo friendly. Don't get me wrong, I know there are several methods to make it seo friendly(supply static pre-rendered pages., etc)

2.coding in angular has many advantages

3.modular code can be written using partials in angular and also in templates like jade, swig etc

case

let us take a case were the web page has 5 parts (header, jambotron, text, some-form, footer). now if we want a reusable modular code we can write in angular partials and input them using ng-include or ui-view. but its not seo friendly

how about we do it in the following manner:

1.use template to generate the html-page (i use swig).

2.write separate module for each part of code(header, jambotron, text, some-form, footer).

3.use dependency injection to inject those modules into controller of the page.

4.use angular functions and everything in controller like always.

5.get a page witch is SEO friendly, modular, reusable.

question

1.does anyone use this approach?

2.if no , y? and if yes, any other reason other than what i mentioned?

3.any other approach which is better and why?

4.if i proceed with this how should i share data of a page between different modules injected into it? any guides? sources?

Solution

  • You are right about what you said you know:

    1.Angular is not seo friendly. Don't get me wrong, I know there are several methods to make it seo friendly(supply static pre-rendered pages., etc)

    2.coding in angular has many advantages

    3.modular code can be written using partials in angular and also in templates like jade, swig etc

    Now, what i understand from you question is, you want the angulars advantages to be used still making your application SEO friendly, right?

    So, I split you question like this, what you said,

    1. generate Templates using swig on the server(so web pages become SEO friendly),
    2. use angular in each of those pages and get advantages from angular.

    Answer:

    what is the advantage you get from Angular:

    1. Angular is meant to be used to create single page applications. i.e. download everything once, and let user play with it, without making requests to the server(for html), and make it feel very faster.

    2. modular code, in MVC pattern.

    3. data-binding

    what will happen if you use swig instead of angular routing/templating:

    1. you loose the 1st advantage of angular, i.e you are going to make request to the server for each html page, everytime.

    2. you download all libraries, angular, its directives, other dependencies, each time you want to load a new view. Thus, incresing data transfer, and slowing down page loading.

    3. you will still be able to use data-binding in angular, which is useful, but just for data-binding,using whole angular, is not a choice, there are a lot of other libraries available for data-binding

    Now your question list:

    does anyone use this approach? if no , why? and if yes, any other reason other than what i mentioned?

    Yes people use server side templating, which makes the task easier for them to make the web app SEO friendly, but this is where you need to exclude Angular from your project, coz it is of no more beneficial if the application is no longer Single page application.

    any other approach which is better and why?

    Either stick to angular to make a single page application and don't use swig, or use it and exclude angular.

    1. See even if you choose to exclude angular, there are a lot of other libraries available for data-binding, so you can get benefit from them. and the rest is really not useful in this case.
    2. and if you choose to include angular, really nice choice, but don't use swig to break angulars SPA nature, instead try SEO for angular.

    if i proceed with this how should i share data of a page between different modules injected into it? any guides?

    if you really choose, bad choice though, sharing data will be possible through server only, does not really depend on what you use(swig, or ejs, or jade). Just read out the documentation for swig.