如何添加ngRoute作为依赖

时间:2016-05-18 20:27:07

标签: javascript angularjs node.js

我想在我的js中使用$ routeParams,但是我收到$ routeParams有一个未知提供者的错误。我已经将angular-route安装到我的node_modules中,但我不知道如何使它成为我的js中的依赖项。这是我的js:

function ClientCtrl($scope, $http,$routeParams) {
  $scope.clients = [];
  $http.get('/client').success(function(data, status, headers, config) {
    $scope.clients = data;
    if (data == "") {
      $scope.clients = [];
    }
  }).error(function(data, status, headers, config) {
    console.log("Ops: could not get any data");
  });
  $scope.client=$scope.clients[$routeParams.id]

  $scope.addClient = function() {
    $http.post('/client', {
        name : $scope.clientName,
        age : $scope.clientAge,
        birthday : $scope.clientBirthday,
        notes : $scope.clientNotes,


    }).success(function(data, status, headers, config) {
        $scope.clients.push({
        name : $scope.clientName,
        age : $scope.clientAge,
        birthday : $scope.clientBirthday,
        notes : $scope.clientNotes,
        });
        $scope.clientName = '';
        $scope.clientAge = '';
        $scope.clientBirthday = '';
        $scope.clientNotes = '';
    }).error(function(data, status, headers, config) {
        console.log("Ops: " + data);
    });
  };
  $scope.edit = function(client) {
  $scope.current = client;
};
$scope.current = {};

}

我还将脚本包含在我的index.html中:

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.js"></script>
<script type="text/javascript" src="/js/todo.js"></script>
<script type="text/javascript" src="/js/viewcontroller.js"></script>
<style type="text/css">
.done-true {
text-decoration: line-through;
color: grey;
}</style>
</head>

更新:注入我的app.js时,收到“窗口未定义”的错误

/**
* Module dependencies.
*/

var express = require('express');
var routes = require('./routes');
var user = require('./routes/user');
var http = require('http');
var path = require('path');
var models = require("./models");
var app = express();
var database = require('./models');

// all environments
app.set('port', process.env.PORT || 3000);
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.use(express.favicon());
app.use(express.logger('dev'));
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(app.router);
app.use(express.static(path.join(__dirname, 'public')));

// development only
if ('development' == app.get('env')) {
app.use(express.errorHandler());
}
app.get('/', routes.login);
app.get('/client', routes.getclients);
app.post('/client', routes.saveclients);
database.sequelize
.authenticate()
.then(function(err) {
console.log('Connection has been established successfully.');
}, function (err) {
console.log('Unable to connect to the database:', err);
});
models.sequelize.sync().then(function() {
http.createServer(app).listen(app.get('port'), function() {
    console.log('Express server listening on port ' + app.get('port'));
});
});

2 个答案:

答案 0 :(得分:6)

您需要在index.html文件中包含ngRoute文件的路径,并将模块注入app.js

<script src="path/to/angular-route.js"></script>

并在

angular.module('app', ['ngRoute']);

有关完整说明,请参阅docs

答案 1 :(得分:0)

您需要将ngRoute作为依赖项添加到模块中,然后将控制器添加到该模块。

var myApp = angular.module('app', ['ngRoute']);
myApp.controller('ClientController', 
['$scope', '$http', '$routeParams', function($scope, $http, $routeParams) {
  // Your code
}]);