Angular JS ngView和ngRoute不工作

时间:2015-07-01 18:02:14

标签: javascript angularjs angularjs-ng-route

我是angularJS的新手。

我正在尝试使用ng-routeng-view创建一个小角度应用。当用户点击登录按钮时,网址将从localhost:8000更改为localhost:8000/login

现在,如果用户重新加载页面,则会加载/login的视图 页面加载。

以下是我使用ng-appng-controller的HTML文件。

<html ng-app="loginSignUpApp">
   <head>...</head>
   <body ng-controller="mainController">
       <div ng-view></div>
   </body>
</html>

现在,如果用户从localhost:8000开始并点击登录按钮,那么一切正常。但是,如果用户重新加载页面,则单击登录按钮后,loginController不会被触发。视图未呈现。

var app = angular.module('loginSignUpApp', ['ngMaterial', 'ngRoute', 'ngAnimate']);

app.controller('mainController', function($scope, $route, $routeParams, $location, $window, serviceFunctions) { 
    $scope.gotoPath = function (url) {
        $location.path( url );
        if(!$scope.$$phase) $scope.$apply()
    }
})
.controller('loginController', function($scope, $route, $routeParams, $location, $window, serviceFunctions, $http) {
    // some work...
})
.config(function($routeProvider, $locationProvider) {
    $routeProvider
    .when('/login', {
        title : 'Login',
        templateUrl: 'signIn.html',
        controller: 'loginController'
    })
    .otherwise({
        title : 'Landing Page',
        redirectTo:'/', 
        controller: 'mainController'
    })

    $locationProvider.html5Mode(true);
})
.run(['$rootScope', '$route', function($rootScope, $route) {
    $rootScope.$on('$routeChangeSuccess', function() {
        angular.element('title').html($route.current.title);
    });
}]);

我使用Django作为后端和角度来进行视图渲染。

任何形式的帮助将不胜感激。谢谢你提前。

1 个答案:

答案 0 :(得分:1)

您应该配置您的服务器,因为当您使用html5mode时,您的服务器无法分割后部和前部。以下是Apache https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/

的示例