文章/答案/技术大牛

发布

社区首页 >问答首页 >AngularJS:单页应用程序演示不起作用

问AngularJS:单页应用程序演示不起作用
EN

Stack Overflow用户

提问于 2017-08-01 18:04:32

回答 3查看 204关注 0票数 0

我有一个关于AngularJS的在线课程，根据课程内容，它提供了文件夹中的代码。这是关于路由和单页应用程序的；类似的演示和结构可以在plunker上工作(就像这个one )，但不能在我的机器上工作……我不明白为什么，有人能帮我吗？

编辑:实际上，如果我下载这个demo，它就不能工作了…

索引文件：

<html lang="en-us" ng-app="myApp">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta charset="UTF-8">


        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
        <style>
            html, body, input, select, textarea
            {
                font-size: 1.05em;
            }
        </style>


        <script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
        <script src="//code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
        <script src="app.js"></script>
    </head>
    <body>

        <header>
            <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">AngularJS</a>
                </div>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                    <li><a href="#/second"><i></i> Second</a></li>
                </ul>
            </div>
            </nav>
        </header>

        <div class="container">

            <div ng-view></div>

        </div>

    </body>
</html>

模块文件: APP.JS

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function ($routeProvider) {

    $routeProvider

    .when('/', {
        templateUrl: 'pages/main.html',
        controller: 'mainController'
    })

    .when('/second', {
        templateUrl: 'pages/second.html',
        controller: 'secondController'
    })

    .when('/second/:num', {
        templateUrl: 'pages/second.html',
        controller: 'secondController'
    })

});

myApp.controller('mainController', ['$scope', '$log', function($scope, $log) {

    $scope.name = 'Main';

}]);

myApp.controller('secondController', ['$scope', '$log', '$routeParams', function($scope, $log, $routeParams) {

    $scope.num = $routeParams.num || 1;

}]);

第一页和第二页(视图)：

<h1>This is Main.</h1>
<h3>Scope value: {{ name }}</h3>

<h1>This is second.</h1>
<h3>Scope route value (on second page): {{ num }}</h3>

文件夹结构。代码如建议的那样

angularjs

single-page-application

回答 3

Stack Overflow用户

发布于 2017-08-01 18:07:55

您对angular和bootstrap的引用不正确

Angularjs

<script src="https://code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>

引导程序

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />

票数 1

Stack Overflow用户

发布于 2017-08-01 18:20:57

您需要像这样更正您的urls

var myApp = angular.module('myApp', ['ngRoute']);

myApp.config(function ($routeProvider) {

    $routeProvider

    .when('/', {
        templateUrl: 'pages/main.html',
        controller: 'mainController'
    })

    .when('/second', {
        templateUrl: 'pages/second.html',
        controller: 'secondController'
    })

    .when('/second/:num', {
        templateUrl: 'pages/second.html',
        controller: 'secondController'
    })

});

myApp.controller('mainController', ['$scope', '$log', function($scope, $log) {

    $scope.name = 'Main';

}]);

myApp.controller('secondController', ['$scope', '$log', '$routeParams', function($scope, $log, $routeParams) {

    $scope.num = $routeParams.num || 1;

}]);

<html lang="en-us" ng-app="myApp">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <meta charset="UTF-8">


        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
        <style>
            html, body, input, select, textarea
            {
                font-size: 1.05em;
            }
        </style>


        <script src="https://code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
        <script src="https://code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
        <script src="app.js"></script>
    </head>
    <body>

        <header>
            <nav class="navbar navbar-default">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand" href="/">AngularJS</a>
                </div>

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#"><i class="fa fa-home"></i> Home</a></li>
                    <li><a href="#/second"><i></i> Second</a></li>
                </ul>
            </div>
            </nav>
        </header>

        <div class="container">

            <div ng-view></div>

        </div>

    </body>
</html>

此外，还需要在project pages/main.html中的以下路径中为视图添加一个页面

票数 0

Stack Overflow用户

发布于 2017-08-01 18:44:47

您需要通过本地主机使用应用程序，如下所示：

只需在HTTP服务器上挂载您的项目即可。

$> sudo npm -g live-server
$> cd path/to/root/dir/project
$> live-server

编辑:最后，每次在正文的底部包括你的脚本：

<body>

    .....
    .....
    .....

    <script src="//code.angularjs.org/1.3.0-rc.1/angular.min.js"></script>
    <script src="//code.angularjs.org/1.3.0-rc.1/angular-route.min.js"></script>
    <script src="app.js"></script>
</body>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45434857

复制

相似问题

问AngularJS:单页应用程序演示不起作用
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS:单页应用程序演示不起作用EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS:单页应用程序演示不起作用
EN