각도의 라우팅 UI 라우터 사용에 대한 자세한 설명

이번에는 Angular Routing UI-Router 사용에 대해 자세히 설명하겠습니다. Angular Routing UI-Router 사용 시 주의사항은 무엇인가요?

UI-router

설치: npm install --save angle-ui-router

라우팅 상태 구성

angular.module("myApp").config(function($stateProvider，$urlRouterProvider){
           $stateProvider
           .state({
                name:'main',
                url:'./',
                template('<div>this is a main</div>')
                     })
             .state({
                      name:'home',
                      url:'/home',
                      template:'<p>this is  home</p>'
              })
            .state({
                     name:'about',
                     url:'/about',
                     template:'<h3>Welcome hello</h3>'
                 })            //设置默认跳转
           $urlRouterProvider.otherwise('/')
           }
      )

다중 모듈, 다중 경로, 다중컨트롤러처리 방법

모듈 소개

   <script src="./angularjs/angular.js"></script>
    <script src="./js/ctrl1.js"></script>
    <script src="./js/ctrl2.js"></script>
    <script src="node_modules/angular-ui-router/release/angular-ui-router.js"></script>

모듈 종속성

var app = angular.module('myApp', ['ui.router', 'myApp.ctrl1', 'myApp.ctrl2']);

경로 구성

app.config(function($stateProvider, $urlRouterProvider) {
        $stateProvider.state({
                name: 'main',
                url: '/my',
                templateUrl: './test.html',
                controller: 'ctrl1'
            })             /*
            1.设置一个为空匹配 url:'/my'
            2. 在增加一个 路由名字前半部份相同但是后面不同的名字
            * */
            .state({
                name:'my.page',
                url:'/:page'
            })
            .state({
                name: 'home',
                url: '/home',
                templateUrl: './angularjs/app.html',
                controller: 'ctrl2'
            })
            .state({
                name: 'about',
                url: '/about',
                template: '<div>about</div>',
                controller: 'ctrl3'
            })
        $urlRouterProvider.otherwise('/')
    })

$stateParams 매개변수를 가져옵니다.

컨트롤러에 주입합니다. 주소 표시줄 다음에 매개변수를 가져올 수 있습니다.

-<ui-view ui-sref=&#39; &#39;></ui-view>

ui-sref를 사용하여 매개변수를 전달할 수 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

JavaScript 타이머에 대한 자세한 설명

JavaScript 실행 메커니즘의 이벤트 및 콜백 기능

브라우저의 멀티스레딩 메커니즘에 대한 자세한 설명

단일 스레드 JS 및 멀티 스레드 사용 스레드 브라우저

위 내용은 각도의 라우팅 UI 라우터 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!