Upgrading AngularJS to Angular 6 in Asp.net MVC 5 application

Question

I have an existing asp.net MVC 5 application with AngularJS and I would like to upgrade the AngularJS to the Angular 6 without rewriting the whole application. I read the official guide, but it didn't really help me a lot. Here is a small example:

I have a view like this that contains another dynamic view that will contain angular directives:

<div id="container" ng-controller="MyController">
     @Html.Action("MyView", "Home")
</div>

Controller:

angular.module('myApp').controller('MyController', ['$scope', function($scope) {
        $scope.doSomething= function () {
             //do stuff
        }            
    }
]);

What would be the best practice to convert such controller to Angular's component? The most difficult part for me is that the component has to work with a template that generated on the server.

The closest answer that I found is How to render asp.net mvc view into angular 2?, but looks like it doesn't work in Angular 6 and I'm not sure this is the way to go.

Please advise.

Answer 1

I think that you have to rewrite the whole application. The advantage is that you already have the application designed, so you only need to code/build it. There is no safe way to convert from AngularJS to Angular6.

Answer 2

Angular was completely rewritten from AngularJS (or Angular 1) to Angular 2 and all subsequent builds. Bert Verhees' answer is correct--you will need to rewrite the Angular code again since Angular 2 introduced code breaking changes from the original AngularJS build.

Here's an article that covers some of the changes

A quick excerpt:

AngularJS

The architecture of AngularJS is based on model-view-controller (MVC) design. The model is the central component that expresses the application's behavior and manages its data, logic, and rules. The view generates an output based on the information in the model. The controller accepts input, converts it into commands and sends the commands to the model and the view.

Angular

In Angular 2, controllers and $scope were replaced by components and directives. Components are directives with a template. They deal with a view of the application and logic on the page. There are two kinds of directives in Angular 2. These are structural directives that alter the layout of the DOM by removing and replacing its elements, and attributive directives that change the behavior or appearance of a DOM element.