Integrating Angularjs and Bootstrap in Legacy Web Application

Integrating an Angular app with Vanilla JS webapp

If I were you I would do the opposite : integrate the vanillaJS application into Angular.

As Lazar said, Angular is a platform. You code an application using Typescript.

The good news is, every valid JS code will be valid TS code. The opposite, on the other hand, isn't true.

So what I would do, is take my old application chunk by chunk, and put it in a new Angular application.

And I know you are using webpack and it might work great for you, but I highly recommend you to start from scratch with the CLI. Not only because it also uses Webpack, but because it represents 90% (arbitrary number, but not so far from it) of the Angular projects, meaning if you have any issue, there's a whole community that will be able to help you.

Without, of course, mentioning all the features such as i18n, server-side rendering, AOT ...

ASP.NET MVC and Angularjs together + ASP.NET Web API

Yes, it would be wise to combine the two. Obviously depending on the exact project, you need to tweak some of the variables in the final solution.

What you are suggesting has actually been our stack for the last 2 or 3 projects, with a few variants here and there based on specific requirements. We've used WebAPI + DurandalJS, WebAPI + Knockout... All work really well :) AngularJS seems to have stuck around the longest, gaining popularity internally to our company, as well as in the rest of the community (which is a deciding factor for me)

Current Tech Stack.

                            +------------------------------------+
                            |               Usage                |
  +-------------------------+------------------------------------+
  | AngularJS               | The client app web, or mobile      |
  +-------------------------+------------------------------------+    
  | WebAPI                  | For all your data access needs     |
  +-------------------------+------------------------------------+
  | OAuth & Bearer Tokens   | For Authentication & Authorization |
  +-------------------------+------------------------------------+
  | SQL Server & EF / any   |  Persistence                       |
  | any other noSQL variant |  & Storage                         |
  +-------------------------+------------------------------------+
  | Angular-UI /            |                                    |
  | Angular-Material        | Base UI components                 |
  +-------------------------+------------------------------------+
  | Katana                  | Collection of projects for         |
  |                         | supporting OWIN on MS-Stack        |
  +-------------------------+------------------------------------+
  | CORS                    | Standard for implementing          |
  |                         | cross domain requests              |
  +-------------------------+------------------------------------+

Benefits:

Web App can be ported to mobile quite easily (if written in such a way that you're aware that you might be going mobile)
- Using Cordova
You have an API that you can easily access using other services / apps should you choose to... plus API's are cool (compared to legacy access mechanisms)
AngularJS allows for powerful yet structured client side code (not that you cant do it without Angular, but in my experience the framework enforces better practices, should you adhere to them correctly)
Starting to sound like a broken record, but as we all know, AngularJS is super testable
You can make use of the .Net bundling if you're scared of NodeJS and things like grunt/gulp
- Not that you have to be scared of it (but familiarity > unfamiliarity)
- Just make sure the client side code gets written in a Minsafe way
Visual Studio is actually quite cool to develop in, specifically with their new focus on open source support of late. Lots of integration points for AngularJS, Node (which you'll probably use at some point), and obviously ASP.Net MVC

Cons:

If your not familiar with Angular there's a nice ol' learning curve
Possible duplication of validation
- In order to reduce round trips/callbacks, it's obviously preferable to send through correct data on the first go. So in a few (or most) instances, we needed to duplicate some of the data level validations in JavaScript
Although it might not be applicable, and is a bit of a long shot... I've been at a client where they strictly want to use everything MS because opensource is "less secure", because people have access to the framework code... go figure. So make sure that they're open to using a SPA framework that's open source (this could apply to any other framework or tool) (and all that goes with it)
Duplication in security. You'll need to make sure to secure the API & the application. (As there is a disconnect between the two layers)
You'll need to learn how CORS works, and how to impliment it correctly as its likely that your API and web app will not be on the same domain/origin

Also. Worth taking a read:

Pros And Cons Of Restful Architecture
Restful WebAPI vs Regular Controllers (A previous question I asked when it came to designing / understanding WebAPI & REST designs)

Use Ajax to put external angularjs element in html page

If you are building angular app from scratch then, you should
consider, putting ng-app in the main index and using ng-include as
@Ronnie pointed out.
But, If you are forced to integrate angular, in one place on legacy
code, you can manually bootstrap angular app, after, filling the
div#test in the ajax callback using angular.boostrap :

Here is a working demo using your exemple.

var xRequest1;
    xRequest1=new XMLHttpRequest();
    xRequest1.onreadystatechange=function ()
    {
        if((xRequest1.readyState==4) && (xRequest1.status==200))
        {
            document.getElementById("test").innerHTML=xRequest1.responseText;
            // bootstrap your app here ...
            angular.bootstrap(document.getElementById('test'), ['myApp']);
        }
    }
    xRequest1.open("get","test.html",true);
    xRequest1.send();

Angular - CakePHP integration

Actually it is possible to use angular on apps that are not following the single page approach. You can use directives and controllers directly inside the HTML of every page.

Authentication is not an issue in this case as the server knows who you are based on the session, it should be present. This is actually what we do in a legacy app that might become a SPA in the far future.

If you need authentication between requests I would recommend to use JWT tokens. There is even a plugin for CakePHP that implements a proper auth adapter for JWT: https://github.com/ADmad/cakephp-jwt-auth I've even written an article about that topic: http://florian-kraemer.net/2014/07/cakephp-and-token-based-auth-with-angular-js/

Integration RequireJS in existing Angular ASP.NET application

You need to bootstrap your project only when someContoller is loaded, so do this:

require(['someController'], function(){
    angular.bootstrap(document, ['xxx']);
});

in your main file and remove ng-app='xxx' in master page. What this does, it requires someController to be loaded before bootstraping you project.