第一次使用angular-ui-router,找不到404的视图

时间:2015-10-06 19:58:11

标签: javascript angularjs

我刚刚将一个工作前端从括号迁移到Visual Studio 2015,因为260字符限制和深度嵌套的bower文件路径,我得到404后,我必须重新获取所有包。我曾经是我的代码三四次,我似乎无法找到问题。有人可以看看我有什么,并指出我正确的方向。  错误消息是它无法在其指定位置找到我的文件moduleindex.html。但我仔细检查了路径,这就是它的位置。

这是app.js和app.config.js

 (function() {
 'use strict';
 angular
  .module('app', ['ui.router']);
 })(); 


 (function() {
angular
    .module('app').config(function($urlRouterProvider, $stateProvider) {

        $urlRouterProvider.otherwise('/');

        $stateProvider.state('main', {
            url: '/',
            templateUrl: '/views/moduleIndex.html'
        });

        $stateProvider.state('register', {
            url: '/register',
            templateUrl: '/views/register.html',
            cotroller: 'register'
        });

        $stateProvider.state('userSettings', {
            url: '/userSettings',
            templateUrl: '/views/userSettings.html',
            cotroller: 'userSettings'
        });

        $stateProvider.state('doctorView', {
            url: '/doctorView',
            templateUrl: '/views/doctorView.html',
            cotroller: 'doctorView'
        });

        $stateProvider.state('injuriesDict', {
            url: '/injuriesDict',
            templateUrl: '/views/injuriesDictionary.html',
            cotroller: 'injuriesDictionary'
        });

        $stateProvider.state('excercisesDict', {
            url: '/excercisesDict',
            templateUrl: '/views/excercisesDictionary.html',
            cotroller: 'injuriesDictionary'
        });

        $stateProvider.state('patientEntry', {
            url: '/patientEntry',
            templateUrl: '/views/patientEntryForm.html',
            cotroller: 'patientEntry'
        });


        $stateProvider.state('patientView', {
            url: '/patientView',
            templateUrl: '/views/patientView.html',
            cotroller: 'patientView'
        });

        $stateProvider.state('therapistView', {
            url: '/therapistView',
            templateUrl: '/views/therapistView.html',
            cotroller: 'therapistView'
        });

        $stateProvider.state('adminView', {
            url: '/adminView',
            templateUrl: '/views/adminView.html',
            cotroller: 'adminView'
        });

    });
 })();

这是index.html

    <!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <!-- bower:css -->
    <link rel="stylesheet"    href="../bower_components/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="../bower_components/animate.css/animate.css" />
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="styles/bootstrap.min-flatly.css">
    <!-- endbuild -->
</head>

<body ng-app="app">
    <!--[if lte IE 8]>
      <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]-->
    <!-- Add your site or application content here -->
    <div class="header">
        <div class="navbar navbar-default" role="navigation">
            <div class="container" ng-cloak>
                <div class="navbar-header">

                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#js-navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    <a class="navbar-brand" ng-sref="#/">Physical Therapy Fitness Tracker</a>
                </div>

                <div class="collapse navbar-collapse" id="js-navbar-collapse">

                    <ul class="nav navbar-nav">
                        <li><a ui-sref-active="active" ui-sref="main">Module Index</a></li>
                        <li><a ui-sref-active="active" ui-sref="register">Register</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div ui-view></div>
        <div class="alert alert-{{alert.type}} animated main -alert" ng-class="{'flipInY': alert.show, 'flipOutY':!alert.show, 'alert-hidden': !alert.hasBeenShown}"><strong>{{alert.title}}</strong>{{alert.message}}</div>
    </div>

    <div class="footer">
        <div class="container">
            <p><span class="glyphicon glyphicon-heart"></span>From JBDesign</p>
        </div>
    </div>


    <!-- Google Analytics: change UA-XXXXX-X to be your site's ID -->
    <script>
        ! function(A, n, g, u, l, a, r) {
            A.GoogleAnalyticsObject = l, A[l] = A[l] || function() {
                    (A[l].q = A[l].q || []).push(arguments)
                }, A[l].l = +new Date, a = n.createElement(g),
                r = n.getElementsByTagName(g)[0], a.src = u, r.parentNode.insertBefore(a, r)
        }(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

        ga('create', 'UA-XXXXX-X');
        ga('send', 'pageview');

    </script>

    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="../bower_components/jquery/dist/jquery.js"></script>
    <script src="../bower_components/angular/angular.js"></script>
    <script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
    <script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="../bower_components/Kendo/js/kendo.all.min.js"></script>
    <script src="../bower_components/Kendo/js/kendo.angular.min.js"></script>
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:js({.tmp,app}) scripts/scripts.js -->
    <script src="scripts/app.js"></script>
    <script src="scripts/app.config.js"></script>
    <script src="scripts/directives/validateEquals.js"></script>
    <script src="scripts/controllers/register.js"></script>
    <script src="scripts/services/authtoken.js"></script>
    <script src="scripts/controllers/patientSearch.js"></script>
    <!-- endbuild -->
</body>

</html>

我知道我打破了papas把控制器,视图以及该模块所需的任何其他内容放在一个原则上。但我只是在做一些非常快速的原型。

有没有人看到我可能会得到我的404,再次这是所有工作的fin在托架编码的控制台中没有错误。我需要进入visual studio,以便我可以与Web API集成。原谅我,如果它是愚蠢的东西,我还在学习Angular。

先谢谢,约翰。

0 个答案:

没有答案