2015-04-30 17 views
6

Đây là tập tin .htaccess của tôi:

RewriteEngine on 
RewriteCond %{REQUEST_FILENAME} -s [OR] 
RewriteCond %{REQUEST_FILENAME} -l [OR] 
RewriteCond %{REQUEST_FILENAME} -d 
RewriteRule ^.*$ - [NC,L] 

RewriteRule ^(.*) /index.html [NC,L] 

Đây là app.js

var app = angular.module('router', ['ngRoute']); 

app.controller('main', function($scope, $location, $routeParams){ 
    $scope.test = 'testing'; 
    $scope.theID = $routeParams.theID; 
}); 

// Routing Configuration 
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { 
    $routeProvider 
     .when('/about', { 
      templateUrl: 'views/about.html' 
     }) 
     .when('/paramtest/:theID', { 
      templateUrl: 'views/aboutID.html', 
      controller: 'main' 
     }) 
     .otherwise({ 
      templateUrl: 'views/home.html' 
     }); 

     $locationProvider.html5Mode(true); 
}]); 

Đây là aboutID.html

ID: {{theID}} 

Khi tôi truy cập http://domain.com/about, nó hoạt động rất tốt, ngay cả khi tôi thực hiện làm mới cmd + r nó vẫn tải trang phạt.

Nếu tôi nhấp vào liên kết từ trong ứng dụng và truy cập http://domain.com/paramtest/1234 thì nó hoạt động tốt.

Vấn đề là nếu tôi cố gắng đi thẳng đến http://domain.com/paramtest/1234 hoặc làm một refresh cứng http://domain.com/paramtest/1234 định tuyến góc không còn hoạt động và tất cả các biến được outputted như thế này {{var}}

Tôi cũng có thẻ <base href="/"> tại chỗ.

- additonal FILES -

index.html

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Contractors</title> 

<link href='http://fonts.googleapis.com/css?family=Quicksand:400,300,700' rel='stylesheet' type='text/css'> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" type="text/css"> 
<link href="styles/datepicker.css" rel="stylesheet" type="text/css"> 
<link href="style.css" rel="stylesheet" type="text/css"> 
<link href="styles/classic.date.css" rel="stylesheet" type="text/css"> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.css" rel="stylesheet" type="text/css"> 
<link href="js/ng-sortable.min.css" rel="stylesheet" type="text/css"> 
<link href="js/jquery.fancybox.css" rel="stylesheet" type="text/css"> 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
<script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script> 
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script> 

<script type="text/javascript" src="js/angular-datepicker.js"></script> 

<script type="text/javascript" src="app.js"></script> 

<base href="/"> 

</head> 

<body ng-app="bidder" ng-controller="main" flow-drag-enter="style={border: '5px solid green'}"> 
    <div class="header" ng-controller="main"> 
     <div class="logo"> 
      <a href="/"><img src="images/logo.png"></a> 
     </div> 
    </div> 

    <!-- MAIN CONTENT --> 
    <div ng-view ng-controller="main" class="view-animate" ng-if="firebaseUser"></div> 

    <div class="profileSection" ng-if="firebaseUser" ng-controller="main"> 
     <div class="profileTopLeft"> 
      <img src="thumb.php?w=30&h=30&src=uploads/{{user.profilePicture || noPicture.png}}" ng-if="user.profilePicture" class="profilePicTop"> 
      <i class="fa fa-user" ng-if="!user.profilePicture"></i> 
      <b>{{user.Name}}</b> <small>{{user.Email}}</small> 
     </div> 
     <div class="profileTopRight"> 
      <a href="profile"><i class="fa fa-th-list"></i> My Profile</a> 
      <a href ng-click="logoutUser()"><i class="fa fa-sign-out"></i> Logout</a> 
     </div> 
    </div> 

    <!-- REGISTRATION --> 
    <div ng-if="!firebaseUser" ng-controller="main"> 
     <loginregister></loginregister> 
    </div> 

    <div class="clear" style="height: 100px;"></div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 

<script type="text/javascript" src="js/jquery.fancybox.js"></script> 
<script type="text/javascript" src="js/jquery.expander.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.js"></script> 

</body> 
</html> 

Routing phân đoạn từ app.js

// PAGE SETUP 
app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) { 
    $routeProvider 
     .when('/about', { 
      templateUrl: 'views/about.html' 
     }) 
     .when('/findcontractor', { 
      templateUrl: 'views/findcontractor.html' 
     }) 
     .when('/editjob/:jobID', { 
      templateUrl: 'views/editjob.html' 
     }) 
     .when('/viewcandidates/:jobID/:validate', { 
      templateUrl: 'views/viewcandidates.html' 
     }) 
     .when('/messenger/:creatorID/:jobID/:candidateID', { 
      templateUrl: 'views/messenger.html' 
     }) 
     .when('/profile', { 
      templateUrl: 'views/profile.html' 
     }) 
     .when('/findwork', { 
      templateUrl: 'views/findwork.html' 
     }) 
     .otherwise({ 
      templateUrl: 'views/home.html' 
     }); 

     $locationProvider.html5Mode(true); 
}]); 

Bình thường url như http://domain.com/about/ công việc một cách hoàn hảo, nhưng bất kỳ trang tham số don' t làm việc trên một làm mới khó khăn, nó hoặc là trả về 404 hoặc index.html mà không có bất kỳ javascript bao gồm.

+0

lỗi nào được đưa ra? Bạn có thẻ ''? – charlietfl

+0

bạn có gặp lỗi 404 không? – Yousuf

+0

Có Tôi có một thẻ cơ sở, không có tôi không nhận được lỗi 404, không có biến nào trong màn hình Góc, tôi không nhận được bất kỳ thông báo lỗi nào nhưng có vẻ như phạm vi đã hoàn toàn biến mất. – Jordash

Trả lời

7

Nếu bất cứ ai chạy vào một vấn đề tương tự như thế này, chắc chắn rằng bạn đặt

<base href="/">

Ở phía trên cùng của file index.html của bạn, trực tiếp bên dưới tiêu đề của bạn.

Đó là những gì cuối cùng đã giải quyết nó cho tôi.

2

Ok. Trong index.html của bạn, tôi thấy rằng có nhiều phần tử html lồng nhau với cùng một bộ điều khiển. Nếu bạn đã áp dụng ng-controller="main" cho thẻ <body> của bạn thì không cần thiết phải thêm lại nó vào các phần tử lồng nhau (phần tử con của thẻ body). Do phạm vi lồng nhau của một bộ điều khiển duy nhất, nó có thể gây ra các vấn đề mà bạn phải đối mặt.

Chỉ cần thêm bộ điều khiển vào thẻ nội dung của bạn, hoặc thêm div phụ huynh chứa tất cả nội dung đó chứa, sau đó gán bộ điều khiển cho div cha này. Và loại bỏ bộ điều khiển dự phòng từ những nơi khác.

Các vấn đề liên quan