How to route CodeIgniter with Angular.js? [duplicate]
this is a production form (i´m using htaccess)
in the js folder create a app.jsjs/app.js
//create app modulevar app = angular.module("app", []);//login configurationapp.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 sessionsapp.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 loginapp.factory("mensajesFlash", function($rootScope){ return { show : function(message){ $rootScope.flash = message; }, clear : function(){ $rootScope.flash = ""; } }});//angular login & logoutapp.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(); }})//permisosapp.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 loginControllerapp.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 urlfunction 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;}
templates/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 controller
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/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>
templates/home.html
<h3 class="subheader">Hello {{ email }}</h3><button ng-click="logout()" class="large-12 button expand">Logout</button>