在 Mvc 应用程序中使用 angularjs 进行路由

Question

我一直在尝试使用 Mvc 4.0 项目在 Angularjs 中实现路由，但我无法做到。 我创建了一个空的 MVC 4.0 项目并添加了一个控制器“HomeController”。然后我在 Views 中添加了一个名为 Home 的文件夹，该文件夹具有三个视图。一个是当我们在路由配置中运行应用程序时打开的索引，我们有主控制器和索引操作的路由。所以，基本上假设索引页面是单页应用程序中的主页，我在索引页面中定义了一些代码，如 6oish预订enter link description here。

索引。 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>

现在，我需要在上述路由中定义的另外两个视图，它们如下：

List.cshtml

@{
    ViewBag.Title = "List";
}

<h2>Listing the users in order </h2>

<div class="container">
    Name:&nbsp;<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:&nbsp;<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();
        }
    }
}

我附上一张图片来显示项目结构。

我正在运行应用程序，我可以看到写有“Practising Angular”的空白页面，其中包含两个锚标签“List”和“Edit”。我在更改 url 时没有得到任何更改。我在 url 中添加了“/”并且它没有更改。然后我添加了一个“/编辑”。然后我也没有发现任何变化。我在索引页面的顶部添加了锚标签，然后也没有变化。只有 url 被改变。请指导我哪里做错了。

Answer 1

您需要在视图和角度代码中修复一些问题。 首先，在定义SimpleController时，你已经在控制器外部定义了addCustomer函数。

您应该具有以下控制器定义：

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 });
    };
});

然后在您的列表视图中，为“添加客户”按钮声明的函数是错误的，因为它区分大小写。您应该使用 addCustomer 而不是 addcustomer（大写 C，在您的 SimpleController 中定义）：

<button ng-click="addCustomer()">Add customer</button>

另外，我不确定您使用的是哪个版本的 Angular，但从 1.2.0 版本开始，路由需要作为单独的模块加载（请参阅 this error）。您可以按照these instructions 安装它，添加脚本angular-route.min.js 并将您的模块声明为：

var demoApp = angular.module('demoApp', ['ngRoute']);

您将知道您需要加载路由模块，因为当初始索引视图加载时，您会在浏览器控制台中看到异常。 （无论如何，检查浏览器控制台是否有 JS 错误总是一个好主意）

应该就是这样了，希望对你有帮助！