Question

设置我的第一个带路由的角度应用程序时遇到问题。这很简单，不起作用。

点击链接时网址会发生变化

index.html - file：/// C：/Users/me/repos/angularRouteTest/app/index.html#！/
关于click - file：/// C：/Users/me/repos/angularRouteTest/app/index.html#！/＃about

ng-view内的内容不会改变

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-route/angular-route.min.js"></script>
    <script src="scripts/app.js"></script>
</head>
<body data-ng-app="swsApp">
    {{1+1}}
    <p><a href="#/">Index</a></p>
    <a href="#about">About</a>
    <div ng-view></div>

</body>

(function() {
"use strict";

var app = angular.module("swsApp", ["ngRoute"]);

app.config(function($routeProvider) {
    $routeProvider
        .when("/", {
 template : "<h1>Main</h1><p>Click on the links to change this content</p>"
        })
        .when("about", {
 template : "<h1>About</h1><p>Click on the links to change this content</p>"
        })
        .otherwise({
            template: "<h1>otherwise</h1>"
        })
})
}());

知道发生了什么事吗？

Answer 1

首先，您不需要任何网络服务器来启动angularJS应用程序。

关于您的链接问题，AngularJS使用hashbang网址：https://docs.angularjs.org/guide/$location#hashbang-mode-default-mode-

Hashbang网址表示angularJS拦截只与hashbang链接＃！

您只需为html代码中的每个链接添加此hashbang：

etcdctl get /coreos.com/network/config
{"Network":"10.2.0.0/16","Backend":{"Type":"vxlan"}}

etcdctl ls /coreos.com/network/subnets
/coreos.com/network/subnets/10.2.44.0-24
/coreos.com/network/subnets/10.2.96.0-24

Angular 1路由不起作用 - 非常基本

1 个答案: