新手的角度路由答案

【问题标题】：Angular routing for newbie新手的角度路由
【发布时间】：2015-12-29 08:28:09
【问题描述】：

我刚刚开始学习 Angular 并创建了第一个应用程序。请帮我路由。

文件夹结构

水疗中心/ 索引.html 控制器/ 控制器.js 图片/ javascript/ 应用程序.js 资源/ 角路由.js 角.js 意见/ 汽车.html 主页.html 登录.html profile.html

“/views”中的页面不显示。这是我的代码。

index.html

<!DOCTYPE html>
<html lang="en" data-ng-app="app">
  <head>
    <meta charset="UTF-8">
    <title>5 Angular</title>
    <script src="resources/angular.js"></script>
    <script src="controllers/controller.js"></script>
    <script src="javascript/app.js"></script>
    <script src="resources/angular-route.js"></script>
  </head>
  <body ng-controller="mainCtrl">
    <nav>
      <ul class="navbar">
        <li>
          <a href = "#home">Home</a>
        </li>
        <li>
          <a href = "#Login">Login</a>
        </li>
        <li>
          <a href = "#profile">Profile</a>
        </li>
        <li>
          <a href = "#cars">Cars</a>
        </li>
      </ul>
    </nav>
    <ng-view></ng-view>
  </body>
</html>

cars.html

<h1>Cars Page</h1>

home.html

<h1>Home Page</h1>

login.html

<h1>Login Page</h1>

profile.html

<h1>Profile Page</h1>

app.js

angular.module('app', ['ngRoute'])
.config(function($routeProvider, $locationProvider){
$routeProvider
.when('/', {
templateUrl: 'views/home.html'
})
.when('login', {
templateUrl: 'views/login.html'
})
.when('cars', {
templateUrl: 'views/cars.html'
})
.when('profile', {
templateUrl: 'views/profile.html'
})
otherwise('/');
});

控制器

angular.module('app', ['ngRoute'])
.controller("mainCtrl",function($scope){

})

【问题讨论】：

标签： angularjs routing single-page-application angular-routing

【解决方案1】：

一旦您在app.js 中创建应用模块，例如angular.module('app', ['ngRoute']) 您不应再次在 controller.js 中重新创建应用程序模块，这将刷新所有初始注册组件，就像您在此处为路由器设置所做的 .config 块一样。

应该是

angular.module('app')

而不是

angular.module('app', ['ngRoute'])

另外，login 锚应该是 #/login 而不是 #Login，因为 $routerProvider 具有 login 的条件。另请注意，href 中的哈希后应该有一个斜杠。

<a href = "#/login">Login</a>

【讨论】：

Pankaj，我已根据您的回答更改了代码。我看到例如地址栏末尾的“index.html#login”。但是如何才能将我的视图内容获取到 index.html？
@АнтонШомин，注意答案更新了，试试#/login
- 首页
- 登录
- 个人资料
- 汽车
仍然没有得到视图的内容
我有一个最新的问题。我应该配置一个服务器来做到这一点吗？我的应用程序将从位于应用程序文件夹中的 JSON 读取和写入数据
@wrath1888 我知道已经有一段时间了，但我重新审视了这个问题并发现了更多问题。我重新创建了您的设置并确保一切正常。答案已更新。迟到总比没有好。