Cómo configurar el directorio js angular de thinkphp
Thinkphp proporciona datos a angular de manera RESTful, y angular es responsable de todas las interfaces (incluidas las páginas de plantilla).
Ejemplo
Implemente un módulo de administración de usuarios para completar las cuatro operaciones de agregar, eliminar, cambiar y verificar, y demostrar cómo usar AngularJS en thinkphp a través de ejemplos. Trabajo de preparación
1. Cargue los archivos js y css necesarios
archivo de biblioteca central angular angular.min.js
angular-ui-router.min. js complemento de enrutamiento angular El complemento angular-resource.min.js es responsable del complemento emergente de la capa de complemento interactivo relajante que interactúa con el servidor. El complemento se basa en las dos bibliotecas jQuery-1.10. .1.min.js y jquery-ui.min.js, así como jQuery-1.10.1.min.js y jquery-ui.min.js. Dos archivos de biblioteca min.js y una hoja de estilo jquery-ui.min.css bootstrap.min.css La estructura del archivo de la hoja de estilo principal de bootstrap es la siguiente:
2.página bootstrap
Preparación Una página de arranque angular abre una aplicación angular a través de la página de arranque angular. Todas las operaciones posteriores se basan en la página de arranque.
Recordatorio:
La página de inicio aquí es en realidad la página predeterminada de nuestra aplicación. Específicamente, en thinkphp, se refiere al archivo de plantilla DEFAULT_MODULE/DEFAULT_CONTROLLER/DEFAULT_ACTION correspondiente. La primera vez que accede a la aplicación, el controlador thinkphp apuntará a esa página, y luego angular se hace cargo de todas las páginas de la plantilla, independientemente del motor de plantillas de thinkphp.
3. Página de inicio de la aplicación
En la página de arranque, nuestra página de inicio de la aplicación se incluye a través de lt;div i-view="main"gt;lt;/divgt;. El significado de la nota se explicará más adelante.
Nota: Este paso no es necesario, porque también puedes colocar todo el contenido de la página de inicio de la aplicación en la página de inicio, pero esto no será fácil de usar.
4. Construya un entorno RESTful
Para poder utilizar $resource, debemos hacer que el lado del servidor funcione de manera RESTful; de lo contrario, $resource no podrá hacerlo. completar su trabajo.
Thinkphp tiene soporte integrado para RESTful y su uso es muy simple: puede dejar que el controlador herede de RestController y luego escribir métodos de recursos de acuerdo con reglas específicas. Pero tiene una desventaja: el RESTful integrado de Thinkphp no es lo suficientemente amigable para acceder a los recursos. La estructura de URL para acceder a los recursos es la siguiente:
/Nombre del módulo/Nombre del controlador/Nombre del recurso
<. p>En base a esto, consideramos utilizar la función de enrutamiento de thinkphp para implementar el soporte RESTful. Con la función de enrutamiento de thinkphp, no es necesario que el controlador herede RestController, pero para respetar los frutos del trabajo de tp y tener en cuenta el método amigable de acceso a recursos, finalmente adopté una combinación de enrutamiento RestController.Además:
La convención de nomenclatura de los métodos de recursos es: nombre_recurso_tipo_REST
Los tipos REST son los siguientes: obtener, publicar, poner, eliminar5. table
Crear una tabla de usuarios e inicializar algunos datos
[sql] Copia pura de la vista Ver fragmento de código en CODE Derivado de mi fragmento de código DROP TABLE IF EXISTS `an_user`;
CREAR TABLA `an_user` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT, `user_id` int(10) unsigned NOT NULL COMENTARIO 'id de usuario', `nombre_usuario` varchar( 100) COMENTARIO NO NULO 'nombre de usuario', `correo electrónico` varchar(255) COMENTARIO NULO POR DEFECTO 'dirección de correo electrónico', tel`varchar(255)COMENTARIO NULO POR DEFECTO 'número de teléfono móvil', `weixin`varchar(255)COMENTARIO NULO POR DEFECTO 'ID de WeChat',` qq`varchar(255)COMENTARIO NULO PREDETERMINADO 'número qq',,`qq`varchar(255)CLAVE PRIMARIA DEL COMENTARIO NULO PREDETERMINADO (`id`)
)ENGINE=INNODB AUTO_INCREMENT =1 JUEGO DE CARACTERES PREDETERMINADO = utf8 COMENTARIO = 'tabla de usuarios'; INSERTAR EN VALORES `an_user` ('1', '1', 'demo1', 'demo1@qq.com', '13100000000', 'weixin_test1', '123456 '); INSERTAR EN VALORES `an_user` ('2', '2', 'demo2', 'demo2@qq.com', '13100000001', 'weixin_test2', '123456'); '3', '3 ', 'demo3', 'demo3@qq.com', '13100000002', 'weixin_test3', '123456'); INSERTAR EN VALORES `an_user` ('4', '4', 'demo4') ', 'demo4@qq .com', '13100000003', 'weixin_test4', '123456'); INSERTAR EN VALORES `an_user` ('5', '5', 'demo5', 'demo5@qq.com', '13100000004', 'weixin_test5 ', '123456'); INSERTAR EN VALORES `an_user` ('6', '6', 'demo6', 'demo6@qq.com', '13100000005', 'weixin_test6', '123456 '); INSERTAR EN VALORES `an_user` ('7', '7', 'dem).
o7', 'demo7@qq.com', '13100000006', 'weixin_test7', '123456'); INSERTAR EN VALORES `an_user` ('8', '8', 'demo8', 'demo8@qq.com' , '13100000007', 'weixin_test8', '123456'); INSERTAR EN VALORES `an_user` ('9', '9', 'demo9', 'demo9@qq.com', '13100000008', 'weixin_test9', ' 123456'); II. Primeros pasos
1. Cree una página de inicio
Como se mencionó anteriormente, la página de inicio es en realidad la página predeterminada de la aplicación.
En mi proyecto, la ruta del archivo para la página predeterminada es:
/tpl/Admin/Index/index.html
En este archivo, agregue el siguiente contenido:
[html] Ver copia pura Ver fragmento de código Fragmento de código en CODE Derivar mi fragmento de código
lt; html ng-app="antp"gt;
lt; /gt;
lt;titlegt;lt;/titlegt;
lt;meta content="ancho=ancho-dispositivo, escala-inicial=1.0" nombre="viewport" / gt;
lt; meta content="" nombre="autor" /gt;
lt; enlace href="/public/css/bootstrap.min.css" "hoja de estilo" tipo="text/css" media="all"gt;
lt enlace href="/public/css/jquery-ui.min.css" rel="hoja de estilo" tipo= "text/css" media="all"gt;
lt;script type="text/javascript" src="/public/js/angular.min.js"gt;lt;/scriptgt;
lt;script type="text/javascript" src="/public/js/angular-resource.min.js"gt;lt;/scriptgt;
lt;script type="text/javascript" src="/public/js/angular-ui-router.min.js"gt;lt;/scriptgt;
lt;script type="text/javascript" src ="/public/js/jquery-1.10.1.min.js"gt;lt;/scriptgt;
lt;script type="text/javascript" src="/public/js/jquery -ui.min.js"gt;lt;/scriptgt;
lt;script type="text/javascript" src="/public/js/layer/layer.js"gt;lt;/ scriptgt;
lt;script type="text/javascript" src="/config.js"gt;lt;/scriptgt;
lt;script type="text/ javascript " src="/app.js"gt;lt;/scriptgt;
lt;link rel="icono de acceso directo" href="favicon.ico" /gt;
lt ;/headgt;
lt.bodygt;
lt;div class="contenedor-gripe
id"gt;
lt; div class="row clearfix"gt;
lt; div class="col-md-12" style="float: none; izquierda: bloquear ninguno; mostrar: bloquear; margen-izquierda: auto; margen-derecha: auto;
lt; div ui-view="main"gt;lt;/divgt; p>
lt;/divgt;
lt;/divgt;
lt;/div lt;/divgt;
lt;/ divgt;
lt;/bodygt;
lt;/htmlgt;
Entre los js y css cargados en la página, excepto config.js y app. js, other Como se explicó anteriormente, los dos últimos también se mencionarán más adelante.
Preste atención a la directiva ng-app en la etiqueta html, que es el nombre de la aplicación que angular quiere habilitar <. /p>
2. Abra la aplicación
Antes del archivo index.html, el nombre de una aplicación se define a través de la directiva ng-app. Después de la definición, aún necesitamos abrirlo. El método para abrirlo es muy simple. Necesita crear un archivo js llamado app.js. Primero agregue el siguiente contenido:
[ [javascript] Ver texto sin formato en C#, el nombre del archivo. la aplicación es app.js]. Ver texto sin formato Ver fragmento de código Derivado de mi fragmento de código en CODE var app = angular.module("antp", ["ui.router", "ngResource"]); el módulo es angular Dependencias en múltiples paquetes
3. Configurar el enrutamiento
Usando la función de enrutamiento de ui.router, puede preconfigurar la URL de acceso y la vista correspondiente. Las plantillas y controladores de URL, también en el archivo app.js, continúan agregando lo siguiente:
[javascript] Ver la copia pura Ver el fragmento de código en CODE, derivado en mi aplicación de fragmento de código.
config(function($stateProvider, $urlRouterProvider, $locationProvider) {//Habilite el enrutamiento en modo HTML5, elimine el número # en la URL //$ locationProvider.html5Mode(true);
//Página predeterminada, todos los recursos no solicitados serán redirigidos a esta URL $urlRouterProvider.otherwise("/index");
$stateProvider.state("user", {
url: "/ user" ,
vistas: {
principal: {
templateUrl: "tpl/Admin/User/index.html", controlador: "UserCtroller"
}
}
}
}).state("índice", {
url:" /índice ",
vistas: {
principal: {
templateUrl: "tpl/Admin /Index/main.html", controlador: "MainCtroller"
}
}
}
}).state("user-add", {
url: "/usuario/add",
vistas: {
vistas.>principal: {
templateUrl: "tpl/Admin/User/add. html" ,
controlador: "UserFormCtroller"
}
}
}
}).estado (" user-edit", {
url: "/user/edit/:user_id",
vistas: {
principal: {
templateUrl: "tpl/Admin/User/add.html",
controlador: "UserFormCtroller"
}
}
}
});
});
¿Recuerdas i-view="main " en la página de inicio anterior? El nombre de i-view es el nombre de la propiedad debajo de la vista configurada en el estado. Tal vez dirás que hay tantas redes principales configuradas en la configuración, ¿cómo sabe cuál encontrar? Solo mira el código y lo sabrás.
Nota 1: No escribimos manualmente el controlador en la etiqueta de la página, sino que lo configuramos en la configuración.
Nota 2: Cada plantilla de vista debe corresponder a un controlador y el controlador debe estar creado; de lo contrario, la vista no se mostrará.
Nota 3: No confunda los controladores aquí con los controladores en thinkphp, de hecho, no tienen ninguna relación.
4. Introduzca js en cada módulo
Aquí, para facilitar la administración y el mantenimiento del código, creé un archivo js debajo de cada módulo y el js de cada módulo Para completar un Función específica, esto también debe introducirse en app.js.
[javascript] Ver texto sin formato Ver el fragmento de código en CODE, derivado de mi fragmento de código document.write('lt;script type="text/javascript" src="/tpl/Admin/Index / main.js") gt;lt;/scriptgt;');document.write('lt;script type="text/javascript" src="/tpl/Admin/User/user.js"gt;lt;/ scriptgt ;'); 5. Acceso al navegador
Ingrese http://local.antp en la barra de direcciones del navegador, verá el siguiente efecto:
Mire atentamente la barra de direcciones, Ingresamos http://local.antp, pero automáticamente cambió a http://local.antp/#/index. ¿Sabes por qué?
lt;div i-view="main"gt;lt;/divgt; en la página de inicio (es decir, la página de inicio) indica que necesito enrutar a la vista principal, pero la dirección que ingresado es http://local .antp no le dice a angular qué vista principal es la final. Cuando esto sucede, angular enrutará a la vista predeterminada, que es la vista especificada por $urlRouterProvider.otherwise("/index");
Dado que /index apunta a tpl/Admin/Index/main.html, el contenido correspondiente de main.html se mostrará aquí.
Contenido del archivo main.html:
[html] Ver texto sin formato Ver el fragmento de código en CÓDIGO derivado de mi fragmento de código lt; Admin/Public/header.html'"gt;lt;/divgt;
lt;blockquotegt;
lt;pgt;
Soy la página predeterminada , Todos los recursos que no se puedan solicitar me llegarán...
lt;/pgt;
lt;/blockquotegt;
Entre ellos, a través del Directiva ng-include, que presenta la página de navegación pública de ****, las comillas simples dentro de las comillas dobles en la directiva ng-include son indispensables, como se muestra a continuación:
[html] Ver la copia pura para ver el CÓDIGO derivado del fragmento de código Mi fragmento de código lt;div style="margin-top:20px;"gt;
lt;nav class="navbar navbar-default" role="navigation"gt
lt;div class="navbar-header"gt;
lt;a class="navbar-brand" href="#"gt;Brandlt;/agt;
lt ;/divgt;
lt;div class="collapse navbar-collapse"gt;
lt;ul class="navbar-nav"gt;
lt;li class="active"gt;
lt;a ui-sref="user" gt;Gestión de usuarioslt;/agt;
lt ;/ligt;
p>lt;/ulgt;
lt;/divgt;
lt;/navgt;
lt ;/divgt;
6. Lista de usuarios
Haga clic en Administración de usuarios en la navegación para saltar a la página de la lista de usuarios, como se muestra a continuación:
El archivo de visualización correspondiente a esta lista es tpl/Admin/User/index.html, el contenido es el siguiente:
[html] Ver el texto sin formato Ver el fragmento de código en CÓDIGO derivado de mi fragmento de código lt; -include="'tpl/Admin/Public/header .html'"gt;lt;/divgt;
lt;button type="button" class="btn btn-primary" ng-click= "addAction()"gt;addlt;/buttongt;
lt; table class="mesa con borde de tabla y rayas" style="margin-top: 15px;"gt; p>lt;theadgt;
lt;trgt;
lt;thgt;Nombre de usuario;/thgt;
lt;thgt;Emaillt;/thgt;
lt;thgt;Número de teléfono móvillt ;/thgt;
lt;thgt;WeChatlt;/thgt;
lt;thgt;QQlt;/thgt;
lt;coste;operaciónlt ;/coste;
>lt;/trgt;
lt;/theadgt;
lt;tbodygt;
lt;tr ng-repeat="usuario en data.user"gt; p>
lt;tdgt;
lt;a ui-sref="user-edit({user_id:user.user_id})" ng-bind="user.user_name"gt ;lt ;/agt;
lt;/tdgt;
lt;td ng-bind="user.email"gt;lt;/tdgt;
lt ;td ng-bind="user.tel"gt;lt;/tdgt
lt;td ng-bind="user.weixin"gt;lt;/tdgt;
lt;td ng-bind="user.qq"gt;lt;/tdgt;
lt;tdgt;
lt;botón tipo="botón" class=" btn btn -link"gt;
lt;a ui-sref="user-edit({user_id: user.user_id})"gt;modifylt;/agt;
lt ;/ botóngt;
lt; tipo de botón="botón" clase="btn btn-link" ng-click="deleteAction(user.user_id)"gt;/buttongt;
lt;/tdgt;