Я постоянно пытаюсь реализовать маршрутизацию в Angularjs с проектом Mvc 4.0, но не могу этого сделать. Я создал пустой проект MVC 4.0 и добавил контроллер «HomeController». Затем я добавил в Views папку с именем Home, имеющую три вида. Одним из них является индекс, который открывается, когда мы запускаем приложение, так как в конфигурации маршрута у нас есть маршрут для домашнего контроллера и действие индекса. Итак, в основном предполагая, что индексная страница является главной страницей в одностраничном приложении, я определил некоторый код на индексной странице, как указано в 6oish book введите здесь описание ссылки.
Показатель. CShtml
@{
ViewBag.Title = "Index";
}
<style>
.container {
float: left;
width: 100%;
}
</style>
<script src="~/Scripts/angular.min.js"></script>
<h2>Practising Angular</h2>
<a href="#/">List</a>
<a href="#/Edit">Edit</a>
<div ng-app="demoApp">
<div class="container">
<div ng-view=""></div>
</div>
</div>
<script>
var demoApp = angular.module('demoApp', []);
demoApp.config(function ($routeProvider) {
$routeProvider.when('/', { controller: 'SimpleController', templateUrl: 'Home/List' })
.when('/Edit', { controller: 'SimpleController', templateUrl: 'Home/Edit' })
.otherwise({ redirectTo: '/' });
});
demoApp.controller('SimpleController', function ($scope) {
$scope.customers = [{ name: 'Dave jones', city: 'Phoenix' },
{ name: 'Jhon Dena', city: 'Mexico' },
{ name: 'Bradshaw', city: 'WashingTon' },
{ name: 'Rey Mysterio', city: 'Brazil' },
{ name: 'Randy', city: 'California' }, ];
});
$scope.addCustomer = function () {
$scope.customers.push({ name: $scope.newCustomer.name, city: $scope.newCustomer.city })
};
</script>
Теперь мне нужны еще два представления, которые определены в приведенном выше маршруте, и они следующие:
Список.cshtml
@{
ViewBag.Title = "List";
}
<h2>Listing the users in order </h2>
<div class="container">
Name: <input type="text" ng-model="filter.name" />
<ul>
<li ng-repeat="objCust in customers | filter:filter.name">{{objCust.name }}-{{objCust.city}}
</li>
</ul>
Customer Name:<br />
<input type="text" ng-model="newCustomer.name" /><br />
Customer city:<br />
<input type="text" ng-model="newCustomer.city" /><br />
<button ng-click="addcustomer()">Add customer</button>
</div>
и последний
Изменить.cshtml
@{
ViewBag.Title = "Edit";
}
<h2>Edit the particular user. Things are under construction</h2>
<h2>Listing the users in order </h2>
<div class="container">
Name: <input type="text" ng-model="city" />
<ul>
<li ng-repeat="objCust in customers | filter:city">{{objCust.name }}-{{objCust.city}}
</li>
</ul>
</div>
Вот домашний контроллер
namespace Routing_Angular.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
public ActionResult List()
{
return PartialView();
}
public ActionResult Edit()
{
return PartialView();
}
}
}
Я прилагаю изображение, чтобы показать структуру проекта.
Запустив приложение, я вижу пустую страницу, на которой написано «Практика Angular» с двумя якорными тегами «Список» и «Редактировать». Я не получаю никаких изменений при изменении URL-адреса. Я добавил «/» в URL-адрес, и он не изменился. затем я добавил «/ редактировать». тогда также я не нашел никаких изменений. Я добавил теги привязки вверху страницы индекса, тогда также нет никаких изменений. меняется только URL. Пожалуйста, направьте меня, где я делаю неправильно.
