Question

这是重复的问题，但我无法理解我的代码到底出错了什么。它是一个非常基本的角应用程序，但路由不工作，也没有调用控制器。我在代码中没有发现任何错误。

修改这是Plunker

app.js：

var appRoot = angular.module('smapp', ['ngRoute']);
appRoot.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
        .when('/Home', { templateUrl: '/views/home.html', controller: 'OmdbCtrl' })
        .when('/', { templateUrl: '/views/home.html', controller: 'OmdbCtrl' })
        .otherwise({ redirectTo: '/' });
}
]);

控制器：

appRoot.controller('OmdbCtrl', ['$scope', 'OmdbFactory', function ($scope, OmdbFactory) {
    $scope.test = 'working';
}]);

的index.html：

<!doctype html>
<html ng-app>
<head>
    <title>My Angular App</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>
<body>
    <div class="container-fluid">hi
        <ng-view class="view-slide-in"  ng-cloak=""></ng-view>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.11/angular.min.js"></script>
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.js"></script>-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.11/angular-route.min.js"></script>
    <script src="./js/app.js"></script>
    <script src="./js/factory.js"></script>
    <script src="./js/OmdbCtrl.js"></script>
</body>
</html>

home.html的

<div class="row">
    <div class="col-lg-12"><h4>{{test}}</h4></div>
</div>

Answer 1

您的应用中的路由无法正常工作，因为您只是直接从浏览器打开index.html。要解决此问题，您需要从Web服务器提供代码并在localhost上访问它。如果你有Node.Js设置，那么你可以使用express来运行服务器。

您必须按照以下方式运行代码

第1步： -

首先将 ng-app =“smapp”添加到index.html

比

创建目录如下： -

 *Public
   *views
      *home.html
   *js
      *app.js
      *factory.js
      *OmdbCtrl.js
   *index.html
 *server.js

第2步： -

将以下代码放在“server.js”

中

var express = require('express');
var path = require('path');
var app = express();

app.use(express.static(path.join(__dirname, 'public')));

// catch 404 and forward to error handler
app.use(function(req, res, next) {

  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err
    });
  });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: {}
  });
});

app.listen(3000);
console.log("server is listening at port 3000");
module.exports = app;

第3步： -

从server.js路径运行您的应用程序，

* npm install

比

* node server.js

第4步： -

默认情况下，它会在浏览器中打开您的应用程序。如果没有，您也可以按照以下方式手动打开它，

****** http://localhost:3000 **

注意： -

申请截图： -

Answer 2

好吧，这是我做的非常愚蠢的错误。

刚改变了以下内容：

<html ng-app>

为：

<html ng-app="smapp">

Answer 3

我在上面的代码中发现了两个错误。 1-您需要添加您的应用名称

<html ng-app="smapp">

2-在您的OmdbCtrl中，您正在注入OmdbFactory，您的工厂一定存在问题。因为你没有在上面添加工厂代码。我刚刚从控制器中移除了服务，它的工作非常好，我就是要解决{{test}}

的表

appRoot.controller('OmdbCtrl', ['$scope', function ($scope) {
    $scope.test = 'working';
}]);

您必须重新检查服务，或者发送代码。

角度/角度路由无法正常工作

3 个答案: