0

我使用带卫星器的角种子。我使用以下命令启动应用程序： npm install 并在浏览器上输入：http://localhost:8080/app/#/auth运行项目，但我看到浏览器显示 [view1] [view2] Angular 种子应用程序： v0.1。我在app.js中使用了以下代码：

'use strict';
angular.module('myApp', [
'ui.router',
'myApp.view2',
'myApp.auth',
'myApp.version',
'satellizer'
]).
config(['$stateProvider', '$urlRouterProvider', '$authProvider', 
function($stateProvider, $urlRouterProvider, $authProvider) {
$authProvider.loginUrl = 'http://localhost:8000/adminlogin/showLogin';
$urlRouterProvider.otherwise('/auth');
}]);

我在“ view_auth ”中为auth.js使用了以下代码：

'use strict';
angular.module('myApp.auth', [])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, 
$urlRouterProvider) {
$stateProvider
.state('auth', {
url: '/auth',
views: {
  'jokesContent': {
    templateUrl: "view_auth/auth.html",
    controller: 'AuthCtrl as auth'
  }
}
})
}])
.controller('AuthCtrl', ['$auth', '$state', '$http', '$rootScope', function($auth, $state, $http, $rootScope) {`

  var vm = this;

    vm.loginError = false;
    vm.loginErrorText;

    vm.login = function() {

        var credentials = {
            email: vm.email,
            password: vm.password
        }

        $auth.login(credentials).then(function() {
            $http.get('http://localhost:8000/api/v1/authenticate/user').success(function(response){
                var user = JSON.stringify(response.user);
                localStorage.setItem('user', user);
                $rootScope.currentUser = response.user;                   
                $state.go('jokes');
            })
            .error(function(){
                vm.loginError = true;
                vm.loginErrorText = error.data.error;
                console.log(vm.loginErrorText);
            })
        });
    }
}]);

view_auth下的视图文件 ( auth.html )如下：

<div class="container">
<div class="row">
    <div class="col-md-4 col-md-offset-4">
        <div class="panel panel-default">
            <div class="panel-heading"> <strong class="">Login</strong>

            </div>
            <div class="panel-body">
                <form class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-3 control-label">Email</label>
                        <div class="col-sm-9">
                            <input type="email" class="form-control" id="inputEmail3" placeholder="Email" required="" ng-model="auth.email">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-3 control-label">Password</label>
                        <div class="col-sm-9">
                            <input type="password" class="form-control" id="inputPassword3" placeholder="Password" required="" ng-model="auth.password">
                        </div>
                    </div>
                    <div class="form-group last">
                        <div class="col-sm-offset-3 col-sm-9">
                            <button type="submit" class="btn btn-success btn-sm"  ng-click="auth.login()">Sign in</button>
                            <button type="reset" class="btn btn-default btn-sm">Reset</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

`

我的 index.html 看起来像：

<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>My AngularJS App</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
  <link rel="stylesheet" href="app.css">
  <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
  <ul class="menu">
    <li><a href="#!/view1">view1</a></li>
    <li><a href="#!/view2">view2</a></li>
  </ul>

  <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  <div ng-view></div>

  <div>Angular seed app: v<span app-version></span></div>

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
  -->
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="app.js"></script>
  <script src="view1/view1.js"></script>
  <script src="view2/view2.js"></script>
  <script src="components/version/version.js"></script>
  <script src="components/version/version-directive.js"></script>
  <script src="components/version/interpolate-filter.js"></script>
  <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
  <script src="view_auth/auth.js"></script>
  <!--<script src="view_jokes/jokes.js"></script>-->
  <script src="bower_components/satellizer/dist/satellizer.js"></script>
</body>
</html>

但运行项目后，视图如下所示： 在此处输入图像描述

我需要显示如下屏幕：https ://i0.wp.com/baljeetsingh.in/wp-content/uploads/2015/11/2015-11-13_22-24-06.png?ssl=1

任何帮助表示赞赏。

4

1 回答 1

0

最后，我解决了这个问题。我将<div ng-view></div>index.html 中的代码替换为

<div ui-view="jokesContent"></div>

于 2017-10-09T13:51:35.920 回答