Keep the Views strongly typed when using AngularJs in MVC

Question

One of the main reasons I love MVC is that both the Views and the Controllers are strongly typed. This means I can call a variable defined in the Model directly from the View using the Razor syntax:

<p>
    @Model.MyProperty // strongly typed
</p>

While doing so, Visual Studio will provide intellisense, smart refactoring options etc. The advantages of that are obvious.

Instead, if I decide to use AngularJs (or any other client-side UI framework, actually), my view will look like this:

<p>
    {{myProperty}} // this is just a string!
</p>

No intellisense, no refactoring options... I'm left alone here, because the IDE doesn't know what {{myProperty}} is and where it's defined. In other words, there is no contract between the View, the Model and the Controllers other than the personal knowledge that the developer has of the structure of the application and the name of its variables.

Since all my Angular models are associated to a Typescript interface , is there any tool that will give me intellisense in the Views based on those Typescript interfaces?

Answer 1

After doing some research, it doesn't seem that this specific functionality (intellisense in HTML for TypeScript) is fully supported in any editor. However, you can install plugins in some to get autocomplete functionality for names (because the bracket syntax is specific to Angular and other front-end frameworks); there are extensions for VS, VS Code, WebStorm:

• Visual Studio
• VS Code
• WebStorm

--

Also, this blog post might not solve your problem, but might work if you approach the problem differently: Strongly Typed Views with AngularJS