角/角路由不起作用

Question

This is the duplicate question but I am not able to understand what exactly I am doing wrong in my code. 这是重复的问题，但是我无法理解我在代码中到底在做什么错。 It's a very basic angular app but the routing not working and also not invoking the controller. 这是一个非常基本的角度应用程序，但是路由不起作用，也没有调用控制器。 I am not finding anything wrong in the code. 我没有在代码中发现任何错误。

EDIT: Here is the Plunker 编辑：这是Plunker

app.js: 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: '/' });
}
]);

controller: 控制器：

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

Index.html: 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 home.html的

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

Answer 1

Routing is in your app not working because you are just opening index.html directly from the browser. 您的应用程序中的路由不起作用，因为您只是直接从浏览器中打开index.html。 To fix this you will need to serve your code from a webserver and access it on localhost. 要解决此问题，您将需要从Web服务器提供代码并在localhost上访问它。 If you have Node.Js setup then you can use express to run server. 如果已安装Node.Js，则可以使用express运行服务器。

You have to run your code in following way 您必须按照以下方式运行代码

Step 1:- 第1步：-

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

Than 比

Create directory as following:- 创建目录如下：

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

Step 2: - 第2步： -

Put following code in inside "server.js" 将以下代码放入“ 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;

Step 3:- 步骤3：

Run your application from server.js path as, 从server.js路径运行您的应用程序，

* npm install * npm安装

Than 比

* node server.js *节点server.js

Step 4: - 第四步： -

It will Open your application in browser by default.If not,than you can also open it manually as following way, 默认情况下，它将在浏览器中打开您的应用程序。否则，您还可以按照以下方式手动打开它，

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

Note :- 注意：-

Screenshot of appication: - 应用截图：-

Answer 2

Ok, this was very silly mistake I did. 好的，这是我犯的非常愚蠢的错误。

Just changed following: 只是更改了以下内容：

<html ng-app>

to: 至：

<html ng-app="smapp">

Answer 3

I could found two errors in above code. 我在上面的代码中发现两个错误。 1- You need to add your app name 1-您需要添加您的应用名称

<html ng-app="smapp">

2- In Your OmdbCtrl your are injecting OmdbFactory, There must be a problem in your factory. 2-在您的OmdbCtrl中，您正在注入OmdbFactory，您的工厂中肯定有问题。 As you did not added factory code above. 由于您没有在上面添加工厂代码。 I just removed service from controller and its working pretty fine and i was table to resolve {{ test }} 我刚刚从控制器中删除了服务，并且它的工作正常，并且我正要解决{{test}}

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

You must need to recheck your service, or you send send the code. 您必须重新检查服务，否则您发送发送代码。

角/角路由不起作用

问题描述

3 个解决方案

解决方案1
3 2016-06-05 07:18:03

解决方案2
0 已采纳 2016-06-05 09:27:51

解决方案3
0 2016-06-06 12:23:06

角/角路由不起作用

问题描述

3 个解决方案

解决方案1 3 2016-06-05 07:18:03

解决方案2 0 已采纳 2016-06-05 09:27:51

解决方案3 0 2016-06-06 12:23:06

解决方案1
3 2016-06-05 07:18:03

解决方案2
0 已采纳 2016-06-05 09:27:51

解决方案3
0 2016-06-06 12:23:06