Javascript 角度布线不工作_Javascript_Angularjs_Stack_Mean Stack

Javascript 角度布线不工作

javascript angularjs

Javascript 角度布线不工作,javascript,angularjs,stack,mean-stack,Javascript,Angularjs,Stack,Mean Stack,我正在尝试用MEAN stack构建我的第一个web应用程序，我面临着角度路由的问题  <!DOCTYPE HTML> <html lang="en" content-type="text/css"> <head name="viewport" content="width=device-width, initial-scale=1"> <me

我正在尝试用MEAN stack构建我的第一个web应用程序，我面临着角度路由的问题

    <!-- public/index.html -->
    <!DOCTYPE HTML>
    <html lang="en" content-type="text/css">
    <head name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="UTF-8">
        <base href="/">

        <title>Trova colori in tinta</title>

        <!-- CSS -->
        <link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/style.css"> <!-- custom styles -->
         <link rel="stylesheet" href="normalize.css"> <!-- custom styles -->

        <!-- JS -->
        <script type="text/javascript" src="libs/angular/angular.min.js"></script>
        <script type="text/javascript" src="libs/angular-route/angular-route.min.js"></script>

        <!-- ANGULAR CUSTOM -->

        <script type="text/javascript" src="js/controllers/MainCtrl.js"></script>
        <script type="text/javascript" src="js/controllers/NerdCtrl.js"></script>
        <script type="text/javascript" src="js/services/NerdService.js"></script>


        <script type="text/javascript" src="js/appRoutes.js"></script>
        <script type="text/javascript" src="js/app.js"></script>

    </head>
    <body >
    <div class="container" ng-app="sampleApp" ng-controller="NerdController">

        <!-- HEADER -->
        <nav class="navbar navbar-default" >
            <div class="navbar-header">
                <a class="navbar-brand" href="/">Colori</a>
            </div>

            <!-- LINK TO OUR PAGES. ANGULAR HANDLES THE ROUTING HERE -->
            <ul class="nav navbar-nav">
                <li><a href="/nerd">Nerds</a></li>
                <li><a href="/lacci">lacci</a></li>
            </ul>
        </nav>
    <div class="container-fullwidth"></div>
        <!-- ANGULAR DYNAMIC CONTENT -->
        <div ng-view></div>

    </div>
    </body>
    </html>

这两个文件位于不同的文件夹中。

我哪里错了？

我想你忘了注射“ngRoute”

在上面的代码中，您没有提到ngRoute依赖项。你需要在角度模块的空白数组中添加它。请使用本地服务器运行您的应用程序。不需要任何Tomcat服务器。你可以很容易地为Chrome下载Google Chrome插件Web服务器。这里-

您也可以在此处参考此示例：`

var app=angular.modulemyApp[ngRoute]；应用程序控制器 app.configfunction$routeProvider{ $routeProvider .当“/abc”时{ “模板”：这是ABC页面 } .当“/家”{ “模板”：这是主页 } .当“/关于”{ “模板”：这是关于页面 } .当“/联系”时{ “模板”：这是联系人页面 } .当“/服务”时{ “模板”：这是服务页面 } }

我可能错了，但我认为锚定标签上的HREF需要放在前面，比如@SenSok，他没有在这里使用ui路由器，所以他不需要it@michele在模块中像这样导入ngRoute。模块'appRoutes'，['ngRoute']

    angular.module('appRoutes', []).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
            templateUrl: '/public/views/home.html',
            controller: 'MainController'
        }) // nerds page that will use the NerdController
      .when('/nerds', {
            templateUrl: '/public/views/nerd.html',
            controller: 'NerdController'
        }).when('/lacci', {
            templateUrl: '/public/views/lacci.html',

        }).otherwise({ redirectTo: "/home" });

    $locationProvider.html5Mode(true);}]);

angular.module('appRoutes', ['ngRoute']).config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
            templateUrl: '/public/views/home.html',
            controller: 'MainController'
        }) // nerds page that will use the NerdController
      .when('/nerds', {
            templateUrl: '/public/views/nerd.html',
            controller: 'NerdController'
        }).when('/lacci', {
            templateUrl: '/public/views/lacci.html',

        }).otherwise({ redirectTo: "/home" });

    $locationProvider.html5Mode(true);}]);