angular 라우팅 ui-router

2371 단어
UI-router
  • 설치: npm install --save angular-ui-router
  • 구성 라우팅 상태
  • angular.module("myApp").config(function($stateProvider,$urlRouterProvider){
               $stateProvider
               .state({
                    name:'main',
                    url:'./',
                    template('
    this is a main
    ') }) .state({ name:'home', url:'/home', template:'

    this is home

    ' }) .state({ name:'about', url:'/about', template:'

    Welcome hello

    ' }) // $urlRouterProvider.otherwise('/') } )

    다중 모듈, 다중 루트, 다중 컨트롤러 처리 방식
  • 도입 모듈
  •     
        
        
        
    
  • 모듈 의존도
  • 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: '
    about
    ', controller: 'ctrl3' }) $urlRouterProvider.otherwise('/') })
  • $stateParams에서 매개변수를 가져옵니다.
  • 컨트롤러에 주입한다.주소 표시줄 뒤에 있는 인자를 얻을 수 있습니다. -ui-sref는 매개 변수를 전달할 수 있다
  • 좋은 웹페이지 즐겨찾기