Question

我一直在尝试使用Mvc 4.0项目在Angularjs中实现路由，但我无法做到。我创建了一个空的MVC 4.0项目并添加了一个控制器＆＃34; HomeController＆＃34;。然后我在视图中添加了一个文件夹，名称为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>

而最后一个是

Edit.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();
        }
    }
}

我附加图片以显示项目结构。

enter image description here

我正在运行应用程序，我可以看到它写入的空白页面＆＃34;练习Angular＆＃34;有两个锚标签＆＃34; List＆＃34;和＆＃34;编辑＆＃34;。我没有对更改网址进行任何更改。我添加了＆＃34; /＆＃34;在网址中并没有改变。然后我添加了一个＆＃34; / Edit＆＃34;。然后我也没有发现任何变化。我在索引页面的顶部添加了锚标记，然后也没有变化。只有网址被更改。请指导我做错的地方。

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

然后在列表视图中，为＆＃34;添加客户＆＃34;按钮错误，因为它区分大小写。您应该 addCustomer 而不是 addcustomer （使用大写字母C，如SimpleController中所定义）：

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

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

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

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

这应该是一切，希望它有所帮助！

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

1 个答案: