The Status of SEO with languages as Angular and React?

I’m thinking of using Angular or React for a new web project but the SEO are an important part. From what I have read there are ways to solve it but it always results in keeping two page version alive or using an external service that renders the pages.

This sounds like bad options to me?

I have also read some unclear info about that search engines now can read javascript webpages with for example angular or react?

Could someone clarify this for me? Will SEO be as good with Angular as if I was using, for example, ASP.NET MVC?

AngularJS – TypeError: Cannot read property 'canonicalUrl' of undefined

I’m working on an app in AngularJS using ES6, but I’m trying to do it in a way that will fit for AngularJS 2.0, so I’m using “Angular new router”

Application.js:
application is a directive and it is placed in the <html> tag as an attribute

class Application {

    constructor($router) {
        this.$router = $router;
        this.routing();
    }

    routing(){
        this.$router.config(
            {
                path: '/',
                component: 'main'
                //component: {'main': 'main'} // view-name:component => name.html, NameController
            },
            {
                path: '/doctors',
                component: 'doctors'
            }
        );
    }

}

Application.$inject = ['$router'];

export default function() {
    return {
        scope: {},
        controller: Application,
        controllerAs: 'applicationCtrl'
    };
};

Dashboard.js:

import doctorsCtrl from "../../page/dashboard/DoctorsCtrl.js"; // controller for the component
import mainCtrl from "../../page/dashboard/MainCtrl.js";
import doctors from "./widget/doctors/Doctors.js";


angular.module('agenda.dashboard', ['ngNewRouter'])

    .directive("application", application)
    .directive("doctors", doctors)

    .config(function ($componentLoaderProvider) {
        $componentLoaderProvider.setTemplateMapping(function (name) {
            return 'page/dashboard/' + dotCase(name) + '.html';
        });

        $componentLoaderProvider.setCtrlNameMapping(function (name) {
            return name[0].toUpperCase() + name.substr(1) + 'Ctrl';
        });
    })

    .controller('MainCtrl', mainCtrl)
    .controller('DoctorsCtrl', doctorsCtrl);


    function dotCase(str) {
    return str.replace(/([A-Z])/g, function ($1) {
        return '.' + $1.toLowerCase();
    });
}

Main (‘/’) works correctly, but when I try to open (‘/doctors’) I get the error

TypeError: Cannot read property ‘canonicalUrl’ of undefined

at Grammar.recognize (router.es5.js:1453)

at RootRouter.recognize (router.es5.js:752)

at RootRouter.navigate (router.es5.js:680)

at RootRouter.$$rootRouter.navigate (router.es5.js:94)

at Object.fn (router.es5.js:89)

at Scope.$get.Scope.$digest (angular.js:15556)

at Scope.$get.Scope.$apply (angular.js:15824)

at bootstrapApply (angular.js:1628)

at Object.invoke (angular.js:4426)

at doBootstrap (angular.js:1626)

Can angularjs apps be automated with selenium? if yes, why should we use protractor?

I know that we can automate AngularJs apps with Selenium. But we have a separate E2E testing framework that is Protractor for AngularJs apps automation.

Can anyone help me understand why we should use Protractor? Why not Selenium?

Angular 2.0 migration path

I am preparing a talk about “Be ready for Angular 2.0 today” and I intend to talk about application structure changes needed in order to make the migration path easier (I know, Angular 2.0 is not ready, but the basic concepts are ready).

I started a demo project in order to demonstrate a “before” app, written the plain “old” Angular 1.x way. I then intend to change this app’s structure to be written as component tree and communicate between components (directives) via attributes (similar to property binding and event binding in Angular 2. The event binding will be via attribute event-methods). The next step will be changing the code to use Typescript and then last part will be to write the same app using actual Angular 2.0.

My question is – I have html inputs written in Angular 1.x, using ng-model, and two way databinding. I want to change it to be as much “Angular 2 way” as I can – meaning communicate with their parent component via attributes and events. This is my demo project (component breakdown is marked using dashes)

enter image description here

The only way I can think about doing it is not using ng-model, something like:

<input ng-keyup="ctrl.event()" value={{ctrl.value}} />

Any comment will be highly appreciated!!

Integrating Angular 2.0 inside Angular 1.x – upgrade module

I am trying to integrate an Angular 2.0 component inside an Angular 1.x app (for playing / learning propose…)

Now, I see that it can be done by looking at the Angular2 upgrade module:

    import {Component, View, Inject, EventEmitter} from 'angular2/angular2';
    import {createUpgradeModule, UpgradeModule} from 'upgrade/upgrade';

    export function main() {
      describe('upgrade: ng1 to ng2', () => {
        it('should have angular 1 loaded', () => expect(angular.version.major).toBe(1));

        it('should instantiate ng2 in ng1 template and project content',
           inject([AsyncTestCompleter], (async) => {
             var Ng2 = Component({selector: 'ng2'})
                           .View({template: `{{ 'NG2' }}(<ng-content></ng-content>)`})
                           .Class({constructor: function() {}});

             var element = html("<div>{{ 'ng1[' }}<ng2>~{{ 'ng-content' }}~</ng2>{{ ']' }}</div>");

             var upgradeModule: UpgradeModule = createUpgradeModule();
             upgradeModule.importNg2Component(Ng2);
             upgradeModule.bootstrap(element).ready(() => {
               expect(document.body.textContent).toEqual("ng1[NG2(~ng-content~)]");
               async.done();
             });
           }));
... continue tests here  ...

I created an Angular 1.x app with Typescript + SystemJS + JSPM and installed Angular 2.0 using jspm install angular2

Now, I can import Angular2 using import {Component} from 'angular2/angular2' (for example), but I cannot find the upgrade module anywhere in Angular2’s code (I wanted to do import {createUpgradeModule, UpgradeModule} from 'upgrade/upgrade', similar to what I found in the tests).

Is it in a separate package? Should I install it manually?

EDIT

The solution (for now), should be:

  1. Use a custom build, see here

  2. Take the actual module to you project and import it (this was my preferred solution)

    Edit 22.11.15:

As of alpha 46 the upgrade module is public. No need for any more hacks in order to use it!

angular 2.0 equivalent to $scope.$apply

I am trying to get started with angular 2.0, now I was wondering how I can initiate an update to the view after some external event changed data.

In details I have a google map and a handler for a click-event on the map. After the user clicks on the map I store latitude and longitude of the click in to variables on the controller

this.lat = event.latLng.lat();
this.lon = event.latLng.lon();

In the view I want to display these values

<div> this is my spot: {{lat}} and {{lon}} </div>

In angular 1 I would simply wrap the assignment in the controller in a call to $scope.$apply().

What is the preferred way to go about updating views in angluar 2.0 ?

Alternative for AngularJS's $route.reload() in Angular2?

I would like to be able to fully reload by Angular2 app because something has changed in the data. I could do that in AngularJS through $route.reload() (or even $state.go($state.current.name, $state.params, {reload: true})), but I can’t find an equivalent now.

I know there’s Router.renavigate(), but that doesn’t seem to do much. Is it supposed to do what I’m asking for? Is there another way?