How to configure angular routes with Asp. Net Mvc

Question

I created a controller who calls the Index.cshtml and within the Index.cshtml contains the directive <ng-view> that should render the index.html but it doesn’t work.

Controller

public class ClienteController : Controller
    {
        private ClienteBO clienteBO;

        public ClienteController(ClienteBO clienteBo)
        {
            this.clienteBO = clienteBo;
        }
        //
        // GET: /Cliente/

        public ActionResult Index()
        {
            return View();
        }

        public ActionResult New()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Salvar(Cliente cliente)
        {
            var id = clienteBO.Salvar(cliente);

            return Json(new { id = id }, JsonRequestBehavior.AllowGet);
        }

        [HttpGet]
        public ActionResult Listar()
        {
            var clientes = clienteBO.ListarTodos();

            return Json(new { ListaClientes = clientes }, JsonRequestBehavior.AllowGet);
        }

        public ActionResult ListarPorNome()
        {
            throw new NotImplementedException();
        }

        public ActionResult Atualizar()
        {
            return View();
        }

        [HttpDelete]
        public ActionResult Deletar(int Id)
        {
            clienteBO.Excluir(Id);

            return Json(new { id = Id }, JsonRequestBehavior.AllowGet);
        }

    }  

JS

angular.module("modaFeminina", ["ui.materialize", "ui.mask", "ngRoute"])
    .config(function ($routeProvider, $locationProvider) {

        $routeProvider.when('/Cliente/', {
            templateUrl: '/AngularTemplates/Index.html',
            controller: 'ClienteController'
        });


        $routeProvider.when('/Cliente/Atualizar', {
            templateUrl: '/AngularTemplates/Atualizar.html',
            controller: 'ClienteController'
        });

        $routeProvider.when('/Cliente/Listar', {
            controller: 'ClienteController'
        });

        $routeProvider.otherwise({ redirectTo: "/ModaFeminina/Cliente" });
    });

View Index.cshtml

@{
    ViewBag.Title = "Atualizar";
}
<h3>Index</h3>
<div ng-controller="ClienteController">
    <ng-view></ng-view>
</div>

Index.html

<div class="row" ng-controller="ClienteController">
    <table class="col s12 m12 l12 striped">
        <thead>
            <tr>
                <th data-field="id">Nome</th>
                <th data-field="cpf">CPF</th>
                <th data-field="telefone">Telefone</th>
                <th data-field="celular">E-mail</th>
                <th data-field="celular">Ações</th>
            </tr>
        </thead>

        <tbody>
            <tr ng-repeat="cliente in clientes">
                <td>{{cliente.Nome}}</td>
                <td>{{cliente.Cpf}}</td>
                <td>{{cliente.Telefone.Celular}}</td>
                <td>{{cliente.Email}}</td>
                <td>
                    <a href="" class="btn-floating waves-effect waves-light blue" ng-click="editar(cliente)"><i class="material-icons prefix">mode_edit</i></a>
                    <a class=" btn-floating waves-effect waves-light red" ng-click="deletar(cliente)"><i class="material-icons prefix">delete_forever</i></a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Answer 1

Hello, from what I could understand of your question, you created a folder "Angulartemplates" and can not access htmls. This occurs for security reasons, only some folders "serve" static documents, you will find a good documentation of this in the link https://docs.asp.net/en/latest/fundamentals/static-files.html

You have some exits:

• add the templates directory in the configuration as a directory serving static content;
• place templates in a folder that already serves static content (such as "content folder";
• create a controller and an action that returns "Contentresult" and receives as parameter the name of the html you need