Angular Route 不起作用 - 模板 url 出了点问题

Posted 2023-03-07

【中文标题】Angular Route 不起作用 - 模板 url 出了点问题

【英文标题】：Angular Route not working - some thing wrong with template url

【发布时间】：2018-01-20 03:59:28

【问题描述】：

我开始使用 AngularJS，但路由器无法在我的网站上运行。

这是一些与我的路线相关的配置：

首先，app.js：

// Declare app level module which depends on views, and components
angular.module('myApp', [
  'ngRoute',
  'myApp.view1'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider, 
$routeProvider) 
  $locationProvider.hashPrefix('!');

  $routeProvider.otherwise(redirectTo: '/');
]);

其次，view1.js

angular.module('myApp.view1', ['ngRoute'])

.config(['$routeProvider', function($routeProvider) 
  $routeProvider.when('/view1', 
    templateUrl: '/views/view1/view1.html',
    controller: 'View1Ctrl'
  );
])

.controller('View1Ctrl', [function() 

]);

angular.js、app.js 和 view1.js 添加到 index.html

ng-view 用于显示view1.html中的内容

这是我的文件夹树：

项目

** 管理员

****** app.js

****** index.html

****** 观看次数

**********视图1

*************** view1.html

*************** view1.js

你能给我一些建议让它工作吗？

感谢您观看我的问题！

【问题讨论】：

这里只是一个旁注，但是当 Angular 2（现在甚至称为 Angular 4）于去年 9 月发布时，开始学习 Angular 1 的人数总是让我感到惊讶。

@JeremyThille 我认为这是因为许多开发人员不熟悉将 JS 作为主要 Web 语言，而 AngularJS 有很多文档。 Angular 2 目前还没有完全充实 JS，而且打字稿很重。

【参考方案1】：

我建议将您的配置全部移至一个config。此外，无需在模块实例化中引用 myApp。另一件事是确保您的 index.html 中有 angularjs 路由文件。以下将起作用。

试试这个：

var app = angular.module('myApp', ['ngRoute']).
app.config(function($locationProvider, $routeProvider) 
  $locationProvider.hashPrefix('!');

    $routeProvider.when('/view1', 
        templateUrl: '/views/view1/view1.html',
        controller: 'View1Ctrl'
    )
    .otherwise(redirectTo: '/');
);

【讨论】：

感谢您的建议，我会尝试:)