Angular는 Google에서 개발한 단일 페이지 애플리케이션 프레임워크로, 현재 가장 주류를 이루는 단일 페이지 애플리케이션 프레임워크 중 하나로, 후면의 MVC 패턴을 적용한 양방향 데이터 바인딩 등 많은 강력한 기능을 갖추고 있습니다. -프런트엔드부터 사용자 정의 지침 등
단일 페이지 애플리케이션이기 때문에 페이지 전환은 당연히 필수입니다. 먼저 Angle의 라우팅에 대해 이야기해 보겠습니다.
angular는 페이지 전환을 구현할 때 경로를 사용합니다.
<script src="js/plugins/angular/angular.min.js"></script> <script src="js/plugins/ui-router/angular-ui-router.min.js"></script>
angular.min.js가 angle-ui-router.min.js보다 먼저 로드되어야 합니다. 그런 다음 앱에 등록하겠습니다.
(function () { angular.module('demo', [ 'ui.router', ]) })();
등록 후 경로를 구성해야 합니다
function config($stateProvider, $urlRouterProvider,$httpProvider) { $urlRouterProvider.otherwise("/home/get"); $stateProvider .state('login', { url: "/login", templateUrl: "../views/login.html", }) .state('home', { abstract: true, url: "/home", templateUrl: "views/common/content.html", }) .state('home.get', { url: "/get", templateUrl: "views/get.html", data: { pageTitle: 'Example view' } }) .state('home.post', { url: "/post", templateUrl: "views/post.html", data: { pageTitle: 'Example view' } }); } app = angular.module('demo'); app.config(config);
구성의 각 상태는 페이지를 나타내는 보기입니다. 해당 HTML 파일은
에 해당하는 파일에 있습니다.
위 내용은 편집자가 공유한 AngularJs의 경로 사용 및 구성에 대한 지식입니다. 모든 분들께 도움이 되기를 바랍니다.