Home / Questions / 5582
Accepted
Pedro Miguel Pimienta Morales
Asked: 2020-03-11 15:44:32 +0800 CST 2020-03-11 15:44:32 +0800 CST

使用 ui-router 配置路由和子路由

  • 772

我正在将一个应用程序迁移到 Angular，但我对路由有点困惑，尤其是子路由，我有以下问题和疑问：

我的应用程序的结构

应用结构

我做了从索引到加载的步骤，还有菜单和视图的步骤，但是总是首先加载教师菜单的错误，我想这可能是由于模板文件夹的顺序。

我的疑问是：

  1. 何时使用模板或嵌套模板
  2. 如果文件夹或文件夹的结构影响您加载的模板

结构

模板结构

模块

angular.module('unicesarApp', ['ionic'])
           .controller('formulario', formulario)
           .service('obtenerDatos', obtenerDatos)
           .config(config);

设置

config.$inject = ['$stateProvider', '$urlRouterProvider'];

    function config($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise("/login");

                 $stateProvider
                        .state('login', {
                            url: '/login',
                            templateUrl: "Templates/login.html",
                            controller: "formulario"
                        })

                        .state('Loading',{
                             url: '/loading',
                             templateUrl: "Templates/loading.html"
                        })

                        .state('menuestu',{
                             url: '/menuestu',
                             templateUrl: "Templates/Estudiante/menuestu.html"
                        })
                        .state('perfilestu',{
                             url: '/perfilestu',
                             templateUrl: "Templates/Estudiante/perfilestu.html"
                        })
                        .state('horarioestu',{
                             url: '/horarioestu',
                             templateUrl: "Templates/Estudiante/horarioestu.html"
                        })
                        .state('calificaciones',{
                             url: '/calificaciones',
                             templateUrl: "Templates/Estudiante/calificaciones.html"
                        })

                        .state('menuprof',{
                             url: '/menuprof',
                             templateUrl: "Templates/Docente/menuprof.html"
                        });                    


    };

控制器

formulario.$inject = ['$scope', 'obtenerDatos', '$state'];

    function formulario($scope, obtenerDatos, $state){

        $scope.login = function(){

            var datos, datosRespuesta;

            datos = {
                Usuario: $scope.usuariotxt,
                Password: $scope.passwordtxt
            };

            if(datos.Usuario == undefined && datos.Password == undefined){

                $scope.respuesta = "Los campos estan vacios";

            }else{

                    obtenerDatos.Autenticacion(datos).then(function (response){


                    if(response.data){  

                       datosRespuesta = response.data; 


                    if(datosRespuesta === "Usuario no registrado"){

                            $scope.respuesta = datosRespuesta;

                    }else if(datosRespuesta === "Contraseña incorrecta"){

                            $scope.respuesta = datosRespuesta;

                    }else if(datosRespuesta.estudiante){

                            obtenerDatos.getDatos(datosRespuesta);

                            $state.go('Loading');

                            setTimeout(alerta, 3000);

                            function alerta(){
                              $state.go('menuestu');
                            };

                    }else{

                            obtenerDatos.getDatos(datosRespuesta);

                            $state.go('Loading');

                            setTimeout(alerta, 3000);

                            function alerta(){
                              $state.go('menuprof');
                            };

                    }; 


                    }else{

                        console.log(response.status);
                        $scope.respuesta = response.status;

                    };

                });

            };



         };

    };

服务

obtenerDatos.$inject = ['$http', '$httpParamSerializer'];

    function obtenerDatos($http, $httpParamSerializer){

        var datosIngreso;

        function Autenticacion(datos){

            var url = 'http://190.109.185.138/Apipedro/api/login';

            return $http.post(url, $httpParamSerializer(datos), {
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
            });

        };

        function getDatos(info){
            datosIngreso = info;
        };

        function setDatos(){
           return datosIngreso;
        };

        return {
            Autenticacion: Autenticacion,
            getDatos: getDatos,
            setDatos: setDatos
        };

    };
javascript

1 Answers

  1. Best Answer

    但是总是先加载教师菜单的错误，我想这可能是由于模板文件夹的顺序。

    我要告诉你的第一件事是setTimeout它不适用于 Angular，除非你调用$scope.apply它的回调；好吧，它本身不会触发摘要循环，Angular“不知道”事件已经发生。

    所以函数alerta应该是这样的：

    function alerta() {
  $scope.$apply(function(){ 
     $state.go('menuestu'); // para el otro estado (menuprof) hacer lo mismo
  });
};

    $apply强制 Angular 的内部循环运行。

    现在，Angular 有自己的计时器服务，它会是最合乎逻辑的: $timeout，它已经在内部调用了$apply.

    $timeout(function() {
    $state.go('menuestu'); // para el otro estado (menuprof) hacer lo mismo
}, 3000);

    你一定不要忘记注入$timeout你的控制器。

    问：什么时候应该使用模板或嵌套模板？

    当嵌套状态彼此具有共同的模板时。也就是说，在父状态的模板中，有一个ng-view会根据子状态而改变。由于 A、B、C 和 D 是子视图，看起来很混乱，但它们不是子状态。那就是如果你有一个内盒，一次只能有一个：A 或 B 或 C 或 D，但不能全部放在一起。

    除非所有这些状态都有“共同部分”（在视图或视图模型中），否则您可以重构它以公开父状态中的共同点以及具有特定细节的视图。

    Q：文件夹结构会影响我上传的模板吗？

    一点也不。它仅指示浏览器应该去哪里找到每个部分。

    关于obtenerDatos我要说的是您使用了名称getDatos并且setDatos以一种令人困惑的方式使用，因为名称应该是相反的。设置设置并获得。另外，我不确定您为什么将它们保留在那里，因为它没有在其他任何地方使用，我会删除它。

    其他建议

    另一方面，没有必要这样做，我的意思是：设置一个计时器。更好的是在执行 ajax 请求之前切换到“加载” ......它更有机。

    getDatos如果您对此更改感兴趣，可以完全删除y方法setDatos（您告诉我没有用）并直接设置相应的状态。如果出现文本错误，您将返回登录状态，以便错误显示在登录视图中，它应该出现在哪里。

    最后，您将 the 添加catch到您的承诺中。然后你关闭了一个使用 angular 和 ui-router 优点的状态机。也就是说，在任何退出之前，它都会以一种或另一种状态或错误结束，但永远不会加载。

    那样的东西...

    // cambiamos a loading
$state.go('Loading');

// solicitamos los datos
obtenerDatos.Autenticacion(datos).then(function(response) {

  if(response.data) {
    datosRespuesta = response.data;

    if (datosRespuesta === "Usuario no registrado" || 
          datosRespuesta === "Contraseña incorrecta") {    
      $scope.respuesta = datosRespuesta;
      $state.go('login');
    } else {
      // aquí estableces el estado.
      $state.go(datosRespuesta.estudiante ? 'menuestu' : 'menuprof');
    }   

  } else {
    // probablemente esto nunca pase.. salvo que el server no mande datos.
    console.log(response.status);
    $scope.respuesta = response.status;
    $state.go('login');

    // quizá lo mejor seria cambiarlo por 
    // throw "No Data"; // esto llama automáticamente a catch.
  };      

}).catch(function(reason) {
  // ademas te facilita manejar el estado 'Error de conexion'.
  $state.go('offline'); // este lo invente yo
});

    注意：我假设它datosRespuesta.estudiante到达并且至少在一种情况下是正确的。

    • 3