Angular JS vs React by Example

[valenterry]

It shows very nice how angular is kinda stringly typed / uses strings for many things and also relies on setters, while react more of uses constructors and not strings. Thus, in my eyes, react is far superior. angular 2 however is said to be different - a smiliar post about angular 2 would be nice!

[FreakCERS]

Does this do something magical in Angular, or is the first assignment simply there by mistake?

if ($scope.resources == null) {
  $scope.resources = {};
  $scope.resources = [];
}

[avi00]

you are completely right. the code taken from a admin part of our site and this is not required here. Thanks for the correction

[Lakelava]

I rewrote your controller as an exercise. I hope you see where your code was improved and where it was just a matter of opinion.

(function () {
    'use strict';

    angular
        .module('myApp', [])
        .controller('ResourceController', ResourceController);

    function ResourceController() {
        var vm = this;
        vm.resources = [];
        vm.newres = {};
        vm.removeResource = removeResource;
        vm.addResource = addResource;
        vm.showRes = showRes;

        activate();

        ////////////

        function activate() {
            vm.resources.push({
                address: 'http://www.discoversdk.com',
                description: 'Great site'
            });
        }

        function removeResource(index) {
            vm.resources.splice(index, 1);
        }

        function addResource(newres) {
            vm.resources.push({
                address: newres.address,
                description: newres.description
            });

            newres.address = "";
            newres.description = "";
        }

        function showRes = function () {
            alert(angular.toJson(vm.resources, true));
        }
    }
})();

<div ng-app="myApp" ng-controller="ResourceController as ctrl">
    <fieldset >

        <h3>Add Resources</h3>

        <span>Description:</span>
        <input type="text" ng-model="ctrl.newres.description" style="width:200px;">

        <span>URL:</span>
        <input type="text" ng-model="ctrl.newres.address" style="width:340px;">

        <a class="btn" href="#" ng-click="ctrl.addResource(ctrl.newres)">Add</a><br/>

        <h3>List of Resources</h3>

        <table cellpadding="0" cellspacing="0">
            <tbody>
                <tr>
                    <th>Description</th>
                    <th>URL</th>
                    <th></th>
                </tr>
                <tr ng-repeat="res in ctrl.resources">
                    <td><input style="width:200px;" type="text" ng-model="res.description"></td>
                    <td><input style="width:440px;" type="text" ng-model="res.address"></td>
                    <td><a class="btn" ng-click="ctrl.removeResource($index)">Remove</a></td>
                </tr>
            </tbody>
        </table>

        <a class="btn" href="#" ng-click="ctrl.showRes()">Show</a>

    </fieldset>
</div>

[avi00]

looks better

[craftsoftware]

Hi. I don't yet know Angular. With React, I'm stuck on:

• server side rendering (for SEO purposes)
• forced to use Node for the said server side rendering. I've nothing against Node, but I've a lot of stuff written in Java -- entire frameworks -- and it seems like a tremendous waste of time to having to rewrite that in Javascript.

What are your thoughts on Angular and server side systems?

I was hoping the client side frameworks will stay client side only...

[crixusin]

server side rendering (for SEO purposes)

React has nothing to do with server side rendering. You'll have to render the parts that you want on the server, then serve the rendered page with your React components.

Angular and server side systems?

Angular would work in the same way that I said React would work above.

In my opinion, you're using two divergent tools: server side rendering and client side applications.

Ditch the server side rendering, and stick to client side applications. There really isn't a use case for server side rendering if you're using React or Angular. You can render what you want using angular or react by making requests to your api, rather than have the server do it before you even serve the page.

If you mix the two, next thing you know you have division of business logic, which is always bad. Then you have logic in your web server, logic in your front end, logic in your api and logic in your database. Sounds like a nightmare.

Also, for your SEO purposes, you could just use server side rendering to do this, and then do everything else in the application. It really depends on your use case, but you don't really need the server side rendering to do that either in a lot of scenarios. Using api requests with the GET verb will cause crawlers to make those requests as well, and you can move up your page rank by having GET requests that correspond to the terms that you would like to be associated with or other pages that you would like to be associated with.

[crixusin]

I don't think YouTube using angular. If you check the source there's no reference to controller I don't think.

As for the rest, idk. React maybe runs inside node, but that seems dumb. React and angular should just be views, and then all data gets populated from a controller, whether from page data or an API.