javascript - AngularJS - angularJS 路由问题

标签 javascript html angularjs

我在使用 angularJs 时遇到问题,基本上当我按下链接时它不会更改页面,有人可以帮助我吗?

//   app.js

var app = angular.module("geral", ["ngRoute"]);
app.config(function ($routeProvider) 
{
    $routeProvider.when('/', 
    {
        controller: "HomeController",
        templateUrl: "App/Views/home.html"
    })
    .when('/secondPage', 
    {
        controller: "SecondController",
        templateUrl: "App/Views/second.html"
    })
    .otherwise({ redirectTo: '/' })
});


// HomeController.js

app.controller("HomeController", ["$scope", function($scope) 
{
    $scope.persons = 
    [
        {
            name: "...",
            age: 18
        },
        {
            name: "...",
            age: 82
        }
    ];
}]);


// SecondController.js

app.controller("SecondController", ["$scope", function($scope) 
{
    $scope.temp = setInterval(function() 
    {
        if (parseInt($("#circle").css("top")) + parseInt($("#circle").css("height")) < window.innerHeight)
            $("#circle").css("top", (parseInt($("#circle").css("top")) + 1).toString() + "px");
        else clearInterval($scope.temp);
    }, 10);
}]);
<!--Index.html-->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link href="Content/bootstrap.min.css" type="text/css" rel="stylesheet" />
        <link href="Content/bootstrap-theme.min.css" type="text/css" rel="stylesheet" />
        <link href="Content/font-awesome.min.css" type="type/css" rel="stylesheet" />
        <link href="Content/geral.css" type="text/css" rel="stylesheet" />
        <script src="Scripts/Shared/angular.min.js"></script>
        <script src="Scripts/Shared/angular-route.min.js"></script>
    </head>
    <body ng-app="geral">
        <div ng-view></div>
        <script src="Scripts/Shared/jquery-3.1.1.min.js"></script>
        <script src="Scripts/Shared/bootstrap.min.js"></script>
        <script src="Scripts/Shared/knockout.js"></script>
        <script src="Scripts/Shared/geral.js"></script>
        <script src="Scripts/app.js"></script>
        <script src="Scripts/Controllers/HomeController.js"></script>
        <script src="Scripts/Controllers/SecondController.js"></script>
    </body>
</html>


<!--home.html-->

<div>
    <div class="container" ng-repeat="person in persons">
        <span class="info">{{ person.name }}</span><br />
        <span class="info">{{ person.age | number }}</span><hr />
    </div>
    <a href="#/secondPage">Start cicle</a>
</div>

<!--second.html-->

<div class="main">
    <div id="circle"></div>
</div>

我不认为问题出在 Controller 脚本中,因为我已经颠倒了 Controller 的 Angular 色并且与“/”相关的 Angular 色工作正常。 对了,重点是做单页应用。

最佳答案

据我所知,问题出在 anchor 标记中的 href

尝试改变这个,

<a href="#/secondPage">Start cicle</a>

<a href="#secondPage">Start cicle</a>

看看这个例子plunk

关于javascript - AngularJS - angularJS 路由问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41292012/

相关文章:

javascript - 解析有效 JSON 字符串时遇到问题

javascript - 给定一个对象数组,如何在保留原始键值的同时用另一个键名替换键名?

javascript - 如何使用 $q promise 在 angular js 中并行处理多个(循环内)异步 api 调用?

javascript - onclick创建html对象

php - 在一个 php 中显示 certian div,在另一个中显示所有 div

angularjs - AngularJs中$scope对象的继承

javascript - Bootstrap : show/hide column divs with checkbox and change column span

javascript - 我如何将数据从html发送到mongodb?

angularjs - 如何在 AngularJS 中将服务注入(inject) app.config

angularjs - 无需 jQuery 即可访问自定义指令的子元素