部分角度页面不显示

时间:2016-11-19 10:20:10

标签: javascript angularjs

Hello evryone我有一个单页应用程序。问题是,对于一个页面,它不显示部分。

这是我的代码

app.js:

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var session = require('express-session');
var passport = require('passport');
//initialize mongoose schemas
require('./models/models');
var index = require('./routes/index');
var api = require('./routes/api');
var authenticate = require('./routes/authenticate')(passport);
var mongoose = require('mongoose');                         //add for Mongo support
mongoose.connect('mongodb://localhost/test-chirp');              //connect to Mongo
var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(session({
  secret: 'keyboard cat'
}));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(passport.initialize());
app.use(passport.session());
app.use('/', index);
app.use('/auth', authenticate);
app.use('/api', api);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

//// Initialize Passport
var initPassport = require('./passport-init');
initPassport(passport);

// 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: {}
    });
});


module.exports = app;

我的角度控制器:

var app = angular.module('chirpApp', ['ngRoute']).run(function($rootScope, $http){

$rootScope.authenticated = false;
$rootScope.current_user = "";

 $rootScope.logout = function(){
  $http.get('/auth/signout'); 
$rootScope.authenticated = false;
$rootScope.current_user = "";
  };
});

app.config(function($routeProvider){
  $routeProvider
    //the timeline display
    .when('/', {
      templateUrl: 'main.html',
      controller: 'mainController'
    })
    //the login display
    .when('/login', {
      templateUrl: 'login.html',
      controller: 'authController'
    })
    //the signup display
    .when('/register', {
      templateUrl: 'register.html',
      controller: 'authController'
    });
});

app.controller('mainController', function($scope){
  $scope.posts = [];
  $scope.newPost = {created_by: '', text: '', created_at: ''};

  $scope.post = function(){
    $scope.newPost.created_at = Date.now();
    $scope.posts.push($scope.newPost);
    $scope.newPost = {created_by: '', text: '', created_at: ''};
  };
});
app.controller('authController', function($scope, $rootScope, $http, $location){
  $scope.user = {username: '', password: ''};
  $scope.error_message = '';

  $scope.login = function(){
  $http.post('/auth/login', $scope.user).success(function(data){
  $rootScope.authenticated = true;
  $rootScope.current_user = data.user.username;

  $location.path('/');
  });
  };

  $scope.register = function(){
    $http.post('/auth/signup', $scope.user).success(function(data){
  $rootScope.authenticated = true;
  $rootScope.current_user = data.user.username;
  $location.path('/');
  });
  };
});

我的主要HTML页面

<html>
  <head>
    <title>Chirp</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-route.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular-resource.js"></script>
    <script src="javascripts/chirpApp.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="stylesheets/style.css">
  </head>
  <body ng-app="chirpApp">
    <div id='main' class="container">
      <nav class="navbar-fluid navbar-default navbar-fixed-top">
        <div class="container">
          <a class="navbar-brand" href="#"> Chirp! </a>
          <p class="navbar-text"> Learn the MEAN stack by building this tiny app</p>
          <p class="navbar-right navbar-text" ng-hide="authenticated"><a href="#/login">Login</a> or <a href="#/signup">Register</a></p>
          <p class="navbar-right navbar-text" ng-show="authenticated"><a href="#" ng-click="signout()">Logout</a></p>
          <p class="navbar-right navbar-text" ng-show="authenticated">Signed in as {{current_user}}</p>
        </div>
      </nav>
      <div class="col-md-offset-2 col-md-8">
        <div ng-view>
        </div>
      </div>
    </div>
  </body>
</html>

我的部分

   <form class="form-auth" ng-submit="register()">
        <h2>Register</h2>
        <p class="text-warning">{{error_message}}</p>
        <input type="username" ng-model="user.username" placeholder="Username" class="form-control"><br>
        <input type="password" ng-model="user.password" placeholder="Password" class="form-control"><br>
        <input type="submit" value="Register" class="btn btn-primary" />
      </form>

请帮助我按需提供更多代码

0 个答案:

没有答案