时间戳

首页 > 解决方案 > 尽管ui-route和provider似乎工作正常，但我无法在angularjs中加载视图......这是一段代码

angularjs - 尽管ui-route和provider似乎工作正常，但我无法在angularjs中加载视图......这是一段代码

问题描述

Index.html it is the main html page

尽管ui-route和provider似乎工作正常，但我无法在angularjs中加载视图......这是一段代码

<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(client) app/vendor.css -->
      <!-- bower:css -->
      <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css({.tmp,client}) app/app.css -->
      <link rel="stylesheet" type="stylesheet" href="app/app.css">
      <!-- injector:css -->
       <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-XXXXX-X');
      ga('send', 'pageview');
    </script>
  </head>
    <!--[if lt IE 9]>
    <script src="bower_components/es5-shim/es5-shim.js"></script>
    <script src="bower_components/json3/lib/json3.min.js"></script>
    <![endif]-->
    <!-- build:js({client,node_modules}) app/vendor.js -->
      <!-- bower:js -->
      <script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
      <script type="text/javascript" src="bower_components/angular/angular.js"></script>
       <script type="text/javascript" src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
      <script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
      <script type="text/javascript" src="bower_components/angular-cookies/angular-cookies.js"></script>
      <script type="text/javascript" src="bower_components/angular-cookies/angular-cookies.js"></script>
      <script type="text/javascript" src="bower_components/angular-resource/angular-resource.js"></script>
      <script type="text/javascript" src="bower_components/angular-sanitize/angular-sanitize.js"></script>
      <script type="text/javascript" src="bower_components/angular-socket-io/socket.js"></script>

      <script type="text/javascript" src="bower_components/braintree-angular/dist/braintree-angular.js"></script>
      <script type="text/javascript" src="bower_components/lodash/dist/lodash.compat.js"></script>
      <script type="text/javascript" src="bower_components/ng-file-upload/ng-file-upload.js"></script>
      <script type="text/javascript" src="bower_components/ng-file-upload-shim/ng-file-upload-shim.js"></script>
      <script type="text/javascript" src="bower_components/ngCart/dist/ngCart.js"></script>
      <!-- endbower -->
      <script type="javascript" src="socket.io-socket.io.js"></script>
    <!-- endbuild -->
    <!-- build:js(.tmp) app/app.js -->

      <!-- injector:js -->
      <script type="text/javascript" src="app/app.js"></script>
      <script type="text/javascript" src="app/account/account.js"></script>
      <script type="text/javascript" src="app/account/login/login.controller.js"></script>
      <script type="text/javascript" src="app/account/settings/settings.controller.js"></script>
      <script type="text/javascript" src="app/account/signup/signup.controller.js"></script>
      <script type="text/javascript" src="app/admin/admin.controller.js"></script>
      <script type="text/javascript" src="app/admin/admin.js"></script>
      <script type="text/javascript" src="app/main/main.controller.js"></script>
      <script type="text/javascript" src="app/main/main.js"></script>
      <script type="text/javascript" src="app/products/products.controller.js"></script>
      <script type="text/javascript" src="app/products/products.js"></script>
      <script type="text/javascript" src="app/products/products.service.js"></script>
      <script type="text/javascript" src="components/auth/auth.service.js"></script>
      <script type="text/javascript" src="components/auth/user.service.js"></script>
      <script type="text/javascript" src="components/footer/footer.directive.js"></script>
      <script type="text/javascript" src="components/modal/modal.service.js"></script>
      <script type="text/javascript" src="components/mongoose-error/mongoose-error.directive.js"></script>
      <script type="text/javascript" src="components/navbar/navbar.controller.js"></script>
      <script type="text/javascript" src="components/navbar/navbar.directive.js"></script>
      <script type="text/javascript" src="components/sidebar/sidebar.controller.js"></script>
      <script type="text/javascript" src="components/sidebar/sidebar.service.js"></script>
      <script type="text/javascript" src="components/socket/socket.service.js"></script>

      <!-- endinjector -->
    <!-- endbuild -->
      <!-- endinjector -->
    <!-- endbuild -->

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

    <!-- Add your site or application content here -->
    <div ui-view></div>



  </body>
</html>

我无法在 angularjs 中加载视图，尽管 ui-route 和 provider 似乎工作正常......这是一段代码 app.js

var app=angular.module('meanshopApp', [
  'ngCookies',
  'ngResource',
  'ngSanitize',
  'btford.socket-io',
  'ui.router',
  'ui.bootstrap',
  'ngFileUpload',
  'ngCart',
  'braintree-angular'
])

app.config(["$stateProvider", "$urlRouterProvider","$locationProvid","$httpProvider",
    function ($stateProvider, $urlRouterProvider,$locationProvider, $httpProvider) {
      $urlRouterProvider.otherwise("/");
      $stateProvider
          .state('/', {
              url: "",
              templateUrl: 'app/main/main.html',
              controller :'MainCtrl'
          })

      $locationProvider.html5Mode(true);
      $httpProvider.interceptors.push('authInterceptor');

}]);


  app.factory('authInterceptor', function($rootScope, $q, $cookies, $injector) {
    var state;
    return {
      // Add authorization token to headers
      request: function(config) {
        config.headers = config.headers || {};
        if ($cookies.get('token')) {
          config.headers.Authorization = 'Bearer ' + $cookies.get('token');
        }
        return config;
      },

      // Intercept 401s and redirect you to login
      responseError: function(response) {
        if (response.status === 401) {
          (state || (state = $injector.get('$state'))).go('login');
          // remove any stale tokens
          $cookies.remove('token');
          return $q.reject(response);
        }
        else {
          return $q.reject(response);
        }
      }
    };
  })

  app.run(function($rootScope, $state, Auth) {
     // Redirect to login if route requires auth and the user is not logged in
    // also if the user role doesn't match with the one in `next.authenticate`
    $rootScope.$on('$stateChangeStart', function(event, next) {
       if (next.authenticate) {
         var loggedIn = Auth.isLoggedIn(function(role) {
           if (role && role === next.authenticate) {
             return; // logged in and roles matches
           }

          event.preventDefault();
          if(role) {
            // logged in but not have the privileges (roles mismatch)
            $state.go('onlyAdmin');
          } else {
            // not logged in
            $state.go('login');
          }
        });
      }
    });
  })

尽管 ui-route 和 provider 似乎工作正常，但我无法在 angularjs 中加载视图......这是一段代码 main.html

<navbar></navbar>

<header class="hero-unit" id="banner">
  <div class="container">
    <h1>MEANshop</h1>
    <p class="lead">The MEAN stack one stop shop</p>
    <img src="assets/images/logo.png" alt="the meanstack shop">
  </div>
</header>

<div class="container">
  <div class="row">
    <div class="col-lg-12">
      <h1 class="page-header">Featured Products:</h1>
      <ul class="nav nav-tabs nav-stacked col-md-4 col-lg-4 col-sm-6" ng-repeat="product in products">
        <li><a ui-sref="viewProduct({id: product._id})" tooltip="{{product.description}}">
          {{product.title}} -
          <span class="text-muted">{{product.price | currency}}</span>
        </a></li>
      </ul>
    </div>
  </div>
</div>

<footer></footer>

我无法在 angularjs 中加载视图，尽管 ui-route 和 provider 似乎工作正常......这是一段代码 maincontroller

'use strict';

angular.module('meanshopApp')
  .controller('MainCtrl', function($state,$scope,$http, socket, Product) {
    alert("helloeen");
    $scope.products = Product.query();
  });

标签： angularjsnode.jsmean

解决方案

在浏览了您的代码后，我遇到了一些基本上限制 main.html 加载的问题。请在您的 app.js 文件中修复以下问题

  1. $locationProvider 拼写不正确
  2. 定义状态时的 url 不应为空。
  3. 您是否需要启用 htmlMode5，因为我在启用此功能时遇到了很多问题。您可以使用 $locationProvider.hashPrefix('') 使 URL 更好；
app.config(["$stateProvider", 
"$urlRouterProvider","$locationProvider","$httpProvider",
function ($stateProvider, $urlRouterProvider,$locationProvider, $httpProvider) {
  $urlRouterProvider.otherwise("/");
  $stateProvider
      .state('/', {
          url: "/",
          templateUrl: 'app/main/main.html',
          controller :'MainCtrl'
      })

  $locationProvider.hashPrefix('');
  $httpProvider.interceptors.push('authInterceptor');
}]);

推荐阅读