Angularjs NgRoute的控制器在index.html ng-view中不起作用

我的文件在这里 https://files.fm/u/va89pjm7#_

代码非常简单。为什么我不能在 localhost：8080/mail 中调用 {{mail.msg}}，即使我将"/mail"路由为 mail.html？

感谢堆栈溢出为美妙的社区。

下面是代码：

服务器.js

// get the things we need
    var express = require('express'),
        app     = express(),
        path = require('path');
    app.use(express.static('./')); // default index.html
    app.get('*', function(req, res) {
        res.sendFile(path.join(__dirname + '/index.html'));
    });
    app.listen(process.env.PORT || 8080);

包.json

{
  "name": "node-api",
  "main": "server.js",
  "dependencies": {
    "bcrypt-nodejs": "0.0.3",
    "body-parser": "~1.9.3",
    "express": "~4.10.3",
    "jsonwebtoken": "^1.2.0",
    "mongoose": "~3.8.19",
    "morgan": "~1.5.0"
  }
}

恩加普.js

angular.module("firstApp", ['ngRouter'])
.controller("mainController", function() {
    var vm = this;
    vm.msg = "Hello from mainController controller";
})

.controller('mailController', function() {
    var vm = this;
    vm.msg = "Hello from mailController controller";
});

ng_route.js

angular.module('ngRouter', ['ngRoute'])
        .config(function($routeProvider, $locationProvider) {
            $routeProvider
                .when('/mail', {
                    templateUrl: "mail.html",
                    controller: "mailController",
                    controllerAs: "mail"
                });

            $locationProvider.html5Mode(true);
        });

邮件.html

<h3>Hello {{mail.msg}}</h3>

索引.html

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular-route.js"></script>
        <script src="ngapp.js"></script>
        <script src="ng_route.js"></script>
    </head>
    <body ng-app="firstApp">
        <section ng-controller="mainController as main">
            <p>{{main.msg}}</p>
        </section>
        <main>
            <div ng-view></div>
             <ng-view></ng-view>
        </main>
    </body>
</html>

结果：本地主机：8080/邮件 = 来自主控制器控制器的问候本地主机：8080 = 来自主控制器控制器的问候

尝试以下操作，我有时觉得有必要。

angular.module("firstApp", ['ngRouter']);
.controller("mainController", function() {
    var vm = this;
    vm.msg = "Hello from mainController controller";
    return vm;
})

你需要一条或另一条线，但不是两个

        <div ng-view></div>
        <ng-view></ng-view>

相关内容

最新更新

热门标签：