locked
Angualr2 in Asp.Net MVc RRS feed

  • Question

  • User1838940990 posted

    Hi All,

     I was working on MVC 3 some time back and now I have a requirement to learn Angualr2 and use it along with the latest Asp.NEt MVC.

    I can see some tutorial with lot of steps by creating app folders, packages.json and mutliple .ts (typescript) file and copy the content from the Angualr github, compared to the old angular version it looks very complicated, am I referring the proper tutorials?

    is this steps really required or is there any thing I can download from nuget and add it to the project folder which can resolve all these dependencies

    I am bit confused which will be best tutorial to give idea on integrating the Angualr2 with MVC.

    If I want to deploy my asp.net mvc app to godaddy, net4  etc, is the nodejs should be installed to run the Angualrjs?

    Appreciate your help .

    Wednesday, February 27, 2019 12:26 AM

All replies

  • User1724605321 posted

    Hi techasuran ,

    There are a lot of articles/video for help learn the Angular 2 in mvc :

    https://www.youtube.com/watch?v=8LxOC89qkHM 

    https://www.codeproject.com/Articles/1181888/Angular-in-ASP-NET-MVC-Web-API-Part 

    https://hassantariqblog.wordpress.com/2016/10/08/angular2-using-angular2-with-typescript-for-asp-net-mvc-in-visual-studio-2015/ 

    techasuran

    If I want to deploy my asp.net mvc app to godaddy, net4  etc, is the nodejs should be installed to run the Angualrjs?

    NodeJS isn't needed for AngularJS to run. Although  NodeJS may help you test your javascript, or pull down files ...

    Best Regards,

    Nan Yu

    Wednesday, February 27, 2019 6:56 AM
  • User-474980206 posted

    I'm not a fan of angular and typescript, but the setup with MVC is the same as other frameworks. the toolchain for building and debugging angular is all node based. so:

    1) install a current version of node
    2) install the angular cli

        npm install -g @angular/cli

    3) if you are using MVC 5, and not asp.net core, you will want to create the angular app in root of your website, rather than its own folder. so go to the root of the MVC project and:

        ng new

    4) test the angular template (this should run the app):

        ng serve -o

     5) the startup page for your site is now:

        /index.html

    which ng builds on compile (it will reference the angular bundles). 

    6) when you deploy, you should include the /assets folder. this is where images, go. 

    7) your angular app source will be in the /src/app folder also with your SASS (css) files

    8) for development you may want to use hot loading:

        ng serve -o --hmr

    during dev, you will need to decide if you want to use node and have it proxy to your webapi code or have the MVC host index.html, and run a node watcher to compile angular changes 

    9) the root of the site will have

       index.html  -- start page (deploy)
       main.ts      -- bootstrap (no deploy)
       styles.sass -- css files (no deploy)

    and misc config files

    note: you MVC app should just be webapi, and the static file handler.

    Thursday, February 28, 2019 4:04 PM