如何路由CodeIgniter与Angular.js？

Question

我试图一起使用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"; 

在我home/index.php，我有<ng-view></ng-view> 。

事情是，没有的html5Mode(true)（与/＃/上的URL）一切工作正常。但除此之外，partials文件可以工作，但无论如何，页面都会重新加载。

在督察元素，事情是这样的：

谐音/ test.html的加载，但页面realoded和错误 “ngView：未定义” 出现了。

我还在学习Angularjs。任何人都可以帮忙

Answer 1

这是一个生产形式（i'm使用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.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> 

的login.php控制器

class Login extends CI_Controller{ 
    public function __construct(){ 
     parent::__construct(); 
    } 
    public function index(){ 
     $this->load->view("login"); 
    } 

    //called from angular controller.js 
    public function loginUser(){ 
     if($this->input->post("email") && $this->input->post("password")) 
     { 
      $this->form_validation->set_rules('password', 'password', 'trim|required|xss_clean'); 
      $this->form_validation->set_rules('email', 'Email', 'trim|required|valid_email|xss_clean'); 
      if($this->form_validation->run() == false){ 
       echo json_encode(array("respuesta" => "incomplete_form")); 
      }else{ 
       $this->load->model("login_model"); 
       $email = $this->input->post("email"); 
       $password = $this->input->post("password"); 
       $loginUser = $this->login_model->loginUser($email,$password); 
       if($loginUser === true){ 
        echo json_encode(array("respuesta" => "success")); 
       }else{ 
        echo json_encode(array("respuesta" => "failed")); 
       } 
      } 
     }else{ 
      echo json_encode(array("respuesta" => "incomplete_form")); 
     } 
    } 

    public function logoutUser(){ 
     $this->session->sess_destroy(); 
    } 
} 

apllications /视图/ 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> 

模板/ home.html的

<h3 class="subheader">Hello {{ email }}</h3> 
<button ng-click="logout()" class="large-12 button expand">Logout</button>