Question

嗨，我是Angular Js的新手。我正在做样品申请（SPA）。这是目录结构。

http://localhost:8080/
   demoApp
     ---- index.html
        ---views
          ----add.html
          ----list.html
          ----edit.html
          ----view.html
         ---js
           demoapp.js

让我在下方粘贴必要的代码......

dempapp.js

var demoApp = angular.module("demoApplication", ["ngRoute"]);
    demoApp.config(["$routeProvider","$locationProvider",function ($routeProvider,$locationProvider) {
    $routeProvider.when('/list', {
        templateUrl: 'views/list.html',
        controller: 'ListController'
    }).when("/add",{
        tempalteUrl : 'views/add.html',
        controller:'addController'
    }).when("/edit",{
        tempalteUrl : 'views/edit.html',
        controller:'addController'
    }).when("/view",{
        tempalteUrl : 'views/view.html',
        controller:'addController'
    }).otherwise({
         redirectTo: '/list'
        });
}]);

的index.html

<html data-ng-app="demoApplication">
<head>
<title>Demo Application</title>
<script src="./lib/angular.min.js"></script>
<script src="./lib/angular.route.min.js"></script>
<script src="./js/demoapp.js"></script>
</head>
<body>
<data-ng-view></data-ng-view>
</body>
</html>

list.html

<div ng-controller="ListController">
<table>
    <thead>
    <tr>
    <td>Serial Number</td>
    <td>User Id</td>
    <td>First Name</td>
    <td>Last Name</td>
    <td> Add User</td>
    <td> view User</td>
    <td> Edit User</td>
    <td> Delete User</td>
    </tr>

    </thead>
    <tbody>
    <tr ng-repeat="user in users">
    <td>{{$index+1}}</td>
    <td>{{user.id}}</td>
    <td>{{user.firstName}}</td>
    <td>{{user.lastName}}</td>
    <td><div style="float:left;"><a href="#/add">Add User</a></div></td>
    <td><div style="float:left;"><a href="#/view" id="viewUser">View User</a></button></button></div></td>
    <td><div style="float:left;"><a href="#/edit" id="editUser">Edit User</a></div></td>
    <td><div style="float:left;"><a href="#/delete" id="deleteUser">Delete User</a></div></td>
    </tr>
    </tbody>
</table>
</div>

问题是，当点击导航网址中的添加或编辑或查看时，更改但模板不显示。请帮我解决我在这里做错的事情......

Answer 1

您的代码中存在拼写错误，导致路由无法正常工作。对于add，edit和delete路由，您将templateUrl误导为tempalteUrl。

试试这样：

var demoApp = angular.module("demoApplication", ["ngRoute"]);
    demoApp.config(["$routeProvider","$locationProvider",function ($routeProvider,$locationProvider) {
    $routeProvider.when('/list', {
        templateUrl: 'views/list.html',
        controller: 'ListController'
    }).when("/add",{
        templateUrl: 'views/add.html',
        controller:'addController'
    }).when("/edit",{
        templateUrl: 'views/edit.html',
        controller:'addController'
    }).when("/view",{
        templateUrl: 'views/view.html',
        controller:'addController'
    }).otherwise({
         redirectTo: '/list'
        });
}]);

你有工作JSFiddle。

Url在Angular js中被更改但未显示模板

1 个答案: