如何使用Angular.js路由CodeIgniter？

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文件仍可正常工作,但无论如何页面都会重新加载.

在Inspector Elements中,事情看起来像这样:

已加载partials/test.html,但页面已实现编码,并显示错误"ngView:undefined".

我还在学习Angularjs.有人可以帮忙吗？

Answer 1

这是一个生产形式（i\xc2\xb4m 使用 htaccess）

\n\n

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

\n\n

//create app module\nvar app = angular.module("app", []);\n\n//login configuration\napp.config(function($routeProvider){\n    $routeProvider.when("/login", {\n        controller : "loginController",\n        templateUrl : "templates/login.html"\n    })\n    .when("/home", {\n        controller : "homeController",\n        templateUrl : "templates/home.html"\n    })\n});\n

\n\n

js/控制器/controllers.js

\n\n

//save & delete sessions\napp.factory("sesionesControl", function(){\n    return {\n        //obtenemos una sesi\xc3\xb3n //getter\n        get : function(key) {\n            return sessionStorage.getItem(key)\n        },\n        //creamos una sesi\xc3\xb3n //setter\n        set : function(key, val) {\n            return sessionStorage.setItem(key, val)\n        },\n        //limpiamos una sesi\xc3\xb3n\n        unset : function(key) {\n            return sessionStorage.removeItem(key)\n        }\n    }\n})\n\n//simple message in bad login\napp.factory("mensajesFlash", function($rootScope){\n    return {\n        show : function(message){\n            $rootScope.flash = message;\n        },\n        clear : function(){\n            $rootScope.flash = "";\n        }\n    }\n});\n\n//angular login & logout\napp.factory("authUsers", function($http, $location, sesionesControl, mensajesFlash){\n    var cacheSession = function(email){\n        sesionesControl.set("userLogin", true);\n        sesionesControl.set("email", email);\n    }\n    var unCacheSession = function(){\n        sesionesControl.unset("userLogin");\n        sesionesControl.unset("email");\n    }\n\n    return {\n        //return authUsers\n        login : function(user){\n            return $http({\n                url: \'http://localhost/login_ci_angularjs/login/loginUser\',\n                method: "POST",\n                data : "email="+user.email+"&password="+user.password,\n                headers: {\'Content-Type\': \'application/x-www-form-urlencoded\'}\n            }).success(function(data){\n                if(data.respuesta == "success"){\n                    //if true clear flash messages\n                    mensajesFlash.clear();\n                    //create session with email\n                    cacheSession(user.email);\n                    //redirect to home\n                    $location.path("/home");\n                }else if(data.respuesta == "incomplete_form"){\n                    mensajesFlash.show("The email & user are required");\n                }else if(data.respuesta == "failed"){\n                    mensajesFlash.show("The email ore password are wrong");\n                }\n            }).error(function(){\n                $location.path("/")\n            })\n        },\n        //close session\n        logout : function(){\n            return $http({\n                url : "http://localhost/login_ci_angularjs/login/logoutUser"\n            }).success(function(){\n                //delete session in sessionStorage\n                unCacheSession();\n                $location.path("/login");\n            });\n        }\n    }\n})\n\napp.controller("homeController", function($scope, sesionesControl, authUsers){\n    $scope.email = sesionesControl.get("email");\n    $scope.logout = function(){\n        authUsers.logout();\n    }\n})\n\n//permisos\napp.run(function($rootScope, $location, authUsers){\n    //url that the user can access\n    var rutasPrivadas = ["/home","/info","/login"];\n    $rootScope.$on(\'$routeChangeStart\', function(){\n        if(in_array($location.path(),rutasPrivadas) && !authUsers.isLoggedIn()){\n            $location.path("/login");\n        }\n        //if user go to login (if the session exist redirect to home)\n        if(($location.path() === \'/login\') && authUsers.isLoggedIn()){\n            $location.path("/home");\n        }\n    })\n})\n\n//controller loginController\napp.controller("loginController", function($scope, $location, authUsers){\n    $scope.user = { email : "", password : "" }\n    authUsers.flash = "";\n    //submit form\n    $scope.login = function(){\n        authUsers.login($scope.user);\n    }\n})\n\n//if user has permissions in the url\nfunction in_array(needle, haystack, argStrict){\n  var key = \'\',\n  strict = !! argStrict;\n\n  if(strict){\n    for(key in haystack){\n      if(haystack[key] === needle){\n        return true;\n      }\n    }\n  }else{\n    for(key in haystack){\n      if(haystack[key] == needle){\n        return true;\n      }\n    }\n  }\n  return false;\n}\n

\n\n

模板/login.htm

\n\n

<form name="loginUserForm">\n    <fieldset>\n        <legend>form login</legend>\n\n        <div class="row">\n            <div ng-show="flash">\n                <div data-alert class="alert-box alert round">{{ flash }}</div>\n            </div>\n            <div class="large-12 columns">\n                <label>Email</label>\n                <input type="email" required placeholder="mail@mail.com" ng-model="user.email">\n            </div>\n            <div class="large-12 columns">\n                <label>Password</label>\n                <input type="password" required placeholder="Password" ng-model="user.password">\n            </div>\n\n            <button type="submit" ng-disabled="!loginUserForm.$valid" ng-click="login(user)" class="button expand round">Login</button>\n        </div>\n\n    </fieldset>\n</form>\n

\n\n

Login.php 控制器

\n\n

class Login extends CI_Controller{\n    public  function __construct(){\n        parent::__construct();\n    }\n    public function index(){\n        $this->load->view("login");\n    }\n\n    //called from angular controller.js\n    public function loginUser(){\n        if($this->input->post("email") && $this->input->post("password"))\n        {\n            $this->form_validation->set_rules(\'password\', \'password\', \'trim|required|xss_clean\');\n            $this->form_validation->set_rules(\'email\', \'Email\', \'trim|required|valid_email|xss_clean\');\n            if($this->form_validation->run() == false){\n                echo json_encode(array("respuesta" => "incomplete_form"));\n            }else{\n                $this->load->model("login_model");\n                $email = $this->input->post("email");\n                $password = $this->input->post("password");\n                $loginUser = $this->login_model->loginUser($email,$password);\n                if($loginUser === true){\n                    echo json_encode(array("respuesta" => "success"));\n                }else{\n                    echo json_encode(array("respuesta" => "failed"));\n                }\n            }\n        }else{\n            echo json_encode(array("respuesta" => "incomplete_form"));\n        }\n    }\n\n    public function logoutUser(){\n        $this->session->sess_destroy();\n    }\n}\n

\n\n

应用程序/视图/login.php

\n\n

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

\n\n

模板/home.html

\n\n

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

\n