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

时间:2016-02-27 17:55:52

标签: angularjs frontend mean-stack router ngroute

我的文件位于https://files.fm/u/va89pjm7#_

代码非常简单。为什么我不能在localhost:8080 / mail中调用{{mail.msg}},即使我将“/ mail”路由为mail.html?

为精彩社区提供堆栈溢出功能。

以下是代码:

server.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);

的package.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"
  }
}

ngapp.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);
        });

mail.html

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

的index.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>

结果: localhost:8080 / mail =来自mainController控制器的Hello localhost:8080 =来自mainController控制器的Hello

1 个答案:

答案 0 :(得分:0)

尝试以下内容,我有时认为这是必要的。

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

你需要一个或另一个thrse行,但不是两个

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