角度js路由问题答案

【问题标题】：angular js routing trouble角度js路由问题
【发布时间】：2014-09-16 13:38:17
【问题描述】：

我无法让我的代码正常工作。我是 JS 的新手，并试图实现一些我在网上找到的关于 angularJs 路由的示例。我花了很多时间试图修复它，但无法修复。

问题：默认视图（View2）由 $routeProvider 配置打开。但是，当我将其重定向到 view2.htm 到 view1.htm 时，会打开空白页面。请帮忙！

HTML 代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <link href="JS/bootstrap/css/bootstrap-theme.css" rel="Stylesheet" />
    <link href="/JS/bootstrap/css/bootstrap-theme.min.css" rel="Stylesheet" />
    <link href="JS/bootstrap/css/bootstrap-theme.css.map" rel="Stylesheet" />
    <link href="JS/bootstrap/css/bootstrap.css" />
    <link href="JS/bootstrap/css/bootstrap.css.map" />
    <link href="JS/bootstrap/css/bootstrap.min.css" />
    <link href="JS/bootstrap/fonts/glyphicons-halflings-regular.eot" />
    <link href="JS/bootstrap/fonts/glyphicons-halflings-regular.svg" />
    <link href="JS/bootstrap/fonts/glyphicons-halflings-regular.ttf" />
    <link href="JS/bootstrap/fonts/glyphicons-halflings-regular.woff" />
</head>
<script src="JS/jquery-2.1.1.js" language="javascript" type="text/javascript"></script>

<script src="JS/angular.js" language="javascript" type="text/javascript"></script>
<script src="/JS/angular-route.js" language="javascript" type="text/javascript"></script>

<script src="/JS/bootstrap/js/bootstrap.js" language="javascript" type="text/javascript">    
</script>
<script src="/JS/bootstrap/js/bootstrap.min.js" language="javascript" type="text/javascript">     
</script>
<body>
    <title>::DEMO APP:: </title>
    <div data-ng-app="demoApp1">
        <script src="DemoJS.js" language="text/javascript" type="text/javascript"></script>
        <div class="container">
            <h3>
                All the examples AngularJS Here:</h3>
        </div>
        <div class="container-fluid" data-ng-view="">
        </div>
    </div>
</body>
</html>

View1.htm 标记

<div  id="View1" >
 <h2>
    Example 4 & 5
 </h2>
 <div class="container">
    Name &nbsp;&nbsp;<input type="text" data-ng-model="inputData.name" placeholder="Name" />
    <br />
    City&nbsp;&nbsp;<input type="text" data-ng-model="inputData.city" placeholder="City" />
    <br />
    <button class="btn btn-primary" data-ng-click="addCustomer()">
        Add Customer</button>
    <br />
    Filter&nbsp;&nbsp;<input type="text" data-ng-model="nameText" placeholder="Filters" />
    <br />
    <ul>
        <li data-ng-repeat="customer in customers |filter:nameText">{{customer.name|uppercase}}
            - {{customer.city}} </li>
    </ul>
  <a ng-href="#/View2.htm">View2</a>
</div>
</div>

View2.htm 标记

<div id="View2">
<h2>
    Example 1,2 and 3</h2>
<div class="container">
    <h3>
        Data Binding Fundamentals</h3>
    <h4>
        Using a Data Binding Template</h4>
    Name:
    <input type="text" data-ng-model="name" placeholder="Type something" />&nbsp;&nbsp;
    {{ name }}
</div>
<h1>
    Example 2</h1>
<div data-ng-init="names=['Sunil','Deepak','Rajat','Somu']">
    <ul>
        <li data-ng-repeat="name in names">{{name}}</li>
    </ul>
</div>
<h1>
    Example 3</h1>
<div>
    <h3>
        Adding a Simple Controller</h3>
    <ul>
        <li data-ng-repeat="name in names">{{name}} </li>
    </ul>
</div>
<a ng-href="#/View1.htm">View1</a>
</div>

DemoJS.js 文件代码

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

demoApp1.config(function ($routeProvider) {
$routeProvider
.when('/',
    {
        controller: 'SimpleController1',
        templateUrl: '/View2.htm'
    })
.when('View1',
{
    controller: 'SimpleController',
    templateUrl: '/View1.htm'
});
});


demoApp1.controller('SimpleController1', function ($scope) {
$scope.names = ['Dave', 'Napur', 'Heedy', 'Shriva'];
});


demoApp1.controller('SimpleController', function ($scope) {

$scope.customers = [
                    { name: 'Sunil', city: 'Delhi' },
                    { name: 'Ritu', city: 'Shbad' }
                    ];

$scope.addCustomer = function () {
    $scope.customers.push({ name: $scope.inputData.name, city: $scope.inputData.city });
}
});

【问题讨论】：

先生尝试使用

标签： asp.net angularjs

【解决方案1】：

我发现了我的错误。我使用的 href 链接不正确。由于 href 是由 Angular 自己管理的，所以我们不应该添加“.html”，我们这里提到的字符串应该与 $routeProvide 配置字符串匹配。下面是我所做的修改：

View1.html 上不正确

<a ng-href="#/View2.htm">View2</a>

在 View1.html 上更正：

<a href="#/view2">View2</a>

我在 View2.html 上做的事情。

【讨论】：