Javascript 如何使用Angular.js路由CodeIgniter?

Javascript 如何使用Angular.js路由CodeIgniter?,javascript,php,angularjs,ajax,codeigniter,Javascript,Php,Angularjs,Ajax,Codeigniter,我正在尝试同时使用Angular.js和CodeIgniter 使用我的应用程序中的ngRoute,我正在我的main.js中设置: $locationProvider.html5Mode(true); $routeProvider.when('/test', { templateUrl: 'partials/test.html' }); $routeProvider.otherwise({ templateUrl: 'partials/home.html' }); 在我的

我正在尝试同时使用Angular.js和CodeIgniter

使用我的应用程序中的
ngRoute
,我正在我的
main.js
中设置:

$locationProvider.html5Mode(true);

$routeProvider.when('/test', {
    templateUrl: 'partials/test.html'
});

$routeProvider.otherwise({
    templateUrl: 'partials/home.html'
});
在我的
routes.php
中,我设置:

$route['default_controller'] = 'home';
$route['(:any)'] = "home";
在我的
主页/index.php
中,我有

问题是,没有
HTML5模式(true)
(URL上有/#/)一切正常。但除此之外,partials文件可以工作,但页面仍然会重新加载

在Inspector元素中,情况如下所示:

已加载partials/test.html,但页面重新编码,出现错误“ngView:undefined”

我还在学Angularjs。有人可以帮忙吗?

这是一个制作表单(我正在使用htaccess)

在js文件夹中创建app.js js/app.js

//create app module
var app = angular.module("app", []);

//login configuration
app.config(function($routeProvider){
    $routeProvider.when("/login", {
        controller : "loginController",
        templateUrl : "templates/login.html"
    })
    .when("/home", {
        controller : "homeController",
        templateUrl : "templates/home.html"
    })
});
js/controllers/controllers.js

//save & delete sessions
app.factory("sesionesControl", function(){
    return {
        //obtenemos una sesión //getter
        get : function(key) {
            return sessionStorage.getItem(key)
        },
        //creamos una sesión //setter
        set : function(key, val) {
            return sessionStorage.setItem(key, val)
        },
        //limpiamos una sesión
        unset : function(key) {
            return sessionStorage.removeItem(key)
        }
    }
})

//simple message in bad login
app.factory("mensajesFlash", function($rootScope){
    return {
        show : function(message){
            $rootScope.flash = message;
        },
        clear : function(){
            $rootScope.flash = "";
        }
    }
});

//angular login & logout
app.factory("authUsers", function($http, $location, sesionesControl, mensajesFlash){
    var cacheSession = function(email){
        sesionesControl.set("userLogin", true);
        sesionesControl.set("email", email);
    }
    var unCacheSession = function(){
        sesionesControl.unset("userLogin");
        sesionesControl.unset("email");
    }

    return {
        //return authUsers
        login : function(user){
            return $http({
                url: 'http://localhost/login_ci_angularjs/login/loginUser',
                method: "POST",
                data : "email="+user.email+"&password="+user.password,
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            }).success(function(data){
                if(data.respuesta == "success"){
                    //if true clear flash messages
                    mensajesFlash.clear();
                    //create session with email
                    cacheSession(user.email);
                    //redirect to home
                    $location.path("/home");
                }else if(data.respuesta == "incomplete_form"){
                    mensajesFlash.show("The email & user are required");
                }else if(data.respuesta == "failed"){
                    mensajesFlash.show("The email ore password are wrong");
                }
            }).error(function(){
                $location.path("/")
            })
        },
        //close session
        logout : function(){
            return $http({
                url : "http://localhost/login_ci_angularjs/login/logoutUser"
            }).success(function(){
                //delete session in sessionStorage
                unCacheSession();
                $location.path("/login");
            });
        }
    }
})

app.controller("homeController", function($scope, sesionesControl, authUsers){
    $scope.email = sesionesControl.get("email");
    $scope.logout = function(){
        authUsers.logout();
    }
})

//permisos
app.run(function($rootScope, $location, authUsers){
    //url that the user can access
    var rutasPrivadas = ["/home","/info","/login"];
    $rootScope.$on('$routeChangeStart', function(){
        if(in_array($location.path(),rutasPrivadas) && !authUsers.isLoggedIn()){
            $location.path("/login");
        }
        //if user go to login (if the session exist redirect to home)
        if(($location.path() === '/login') && authUsers.isLoggedIn()){
            $location.path("/home");
        }
    })
})

//controller loginController
app.controller("loginController", function($scope, $location, authUsers){
    $scope.user = { email : "", password : "" }
    authUsers.flash = "";
    //submit form
    $scope.login = function(){
        authUsers.login($scope.user);
    }
})

//if user has permissions in the url
function in_array(needle, haystack, argStrict){
  var key = '',
  strict = !! argStrict;

  if(strict){
    for(key in haystack){
      if(haystack[key] === needle){
        return true;
      }
    }
  }else{
    for(key in haystack){
      if(haystack[key] == needle){
        return true;
      }
    }
  }
  return false;
}
模板/login.htm

<form name="loginUserForm">
    <fieldset>
        <legend>form login</legend>

        <div class="row">
            <div ng-show="flash">
                <div data-alert class="alert-box alert round">{{ flash }}</div>
            </div>
            <div class="large-12 columns">
                <label>Email</label>
                <input type="email" required placeholder="mail@mail.com" ng-model="user.email">
            </div>
            <div class="large-12 columns">
                <label>Password</label>
                <input type="password" required placeholder="Password" ng-model="user.password">
            </div>

            <button type="submit" ng-disabled="!loginUserForm.$valid" ng-click="login(user)" class="button expand round">Login</button>
        </div>

    </fieldset>
</form>
aplications/views/login.php

<!DOCTYPE  html>
<html lang="es" ng-app="app">
<head>
    <meta charset="UTF-8" />
    <title>CI & Angular</title>
</head>
<body>
<!-- with this ng-view, we load all views -->
<div class="row" ng-view></div>
<script type="text/javascript" src="<?php echo base_url() ?>js/angular.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>js/app.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>js/controllers/controllers.js"></script>
</body>
</html>

CI&Angular

我想你需要试试这个
$route['(.*)]=“home/index”页面仍将重新加载。它是ajax,所以它应该留在home/index中,并且在URL更改时不会重新加载。您是否在html标题中设置了base标记<代码>
我设置了
你能把这个问题说清楚一点吗?这个问题不完全可以理解
<!DOCTYPE  html>
<html lang="es" ng-app="app">
<head>
    <meta charset="UTF-8" />
    <title>CI & Angular</title>
</head>
<body>
<!-- with this ng-view, we load all views -->
<div class="row" ng-view></div>
<script type="text/javascript" src="<?php echo base_url() ?>js/angular.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>js/app.js"></script>
<script type="text/javascript" src="<?php echo base_url() ?>js/controllers/controllers.js"></script>
</body>
</html>
<h3 class="subheader">Hello {{ email }}</h3>
<button ng-click="logout()" class="large-12 button expand">Logout</button>