[SOLVED] How to implement an AngularJS controller in a webform?

How to implement an AngularJS controller in a webform?

I have an AngularJS controller that I want to use in my MVC webform view page.

I have created a simple code but does not seem to work.

Test.js

angular.module('project').controller("TestCtrl", function($scope){
  $scope.text = 'test';
});

View.aspx

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<SampleProject.Models.ReportInfo>" %>

<%@ Register Assembly="Microsoft.ReportViewer.WebForms, Version=11.0.0.0, Culture=neutral, PublicKeyToken=89845dcd8080cc91" Namespace="Microsoft.Reporting.WebForms" TagPrefix="rsweb" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" ng-app="project">
<head id="Head1" runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server" ng-controller="TestCtrl">
        {{text}}
    </form>
</body>
</html>

I'm expecting to see the word test, but it does not bind. I only see {{text}}

Solution

You need a second parameter in module, an array of modules for the injector to load before the current module. In this case it will be empty.

angular.module('project', []).controller(....

You also have no reference to load angular.js script in the head