Question

我在AngularJS上有这个在线课程，根据课程提供文件夹中的代码。这个是关于路由和单页面应用程序;类似的演示和结构适用于plunker（就像这个one）但不在我的机器上...我不明白为什么，有人可以帮助我吗？

编辑：实际上，如果我下载demo，那东西就不会工作......

INDEX文件：

<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>

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

Answer 1

您对角度和自举的参考不正确

<强> 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" />

Answer 2

你需要纠正你这样的网址

＆＃13;

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;

}]);

＆＃13;

<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>

＆＃13;

此外，您还需要在项目页面/ main.html

中的以下路径中添加视图页面

Answer 3

您需要通过localhost使用您的应用程序，如下所示：

只需在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>

AngularJS：单页应用程序演示不起作用

3 个答案: