为什么 Angular 种子应用程序显示 Angular 种子应用程序：v0.1答案

【问题标题】：Why Angular seed app showing Angular seed app: v0.1为什么 Angular 种子应用程序显示 Angular 种子应用程序：v0.1
【发布时间】：2017-10-09 12:42:53
【问题描述】：

我使用带卫星的角种子。我使用以下命令启动应用程序：npm install 并通过键入：http://localhost:8080/app/#/auth 在浏览器上运行项目，但我看到浏览器显示 [view1] [view2] 角种子应用程序：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

任何帮助表示赞赏。

【问题讨论】：

标签： angularjs node.js bower angular-seed

【解决方案1】：

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

&lt;div ui-view="jokesContent"&gt;&lt;/div&gt;

【讨论】：