0

◆(1)
 https://plnkr.co/edit/QvG8I73sgQ5ox4LZhGwZ?p=preview
のtoggleFlyInOutのスライドするアニメーションと
◆(2)
 http://tsudoi.org/weblog/?p=2031
のようなng-viewを組み合わせて、ページのスライド遷移を考えているのですが、
Angular4で◆(2)のようなng-viewの切り替えはできないでしょうか?

◆(2)のapp.jsは app-routing.module.tsのようになると思うのですが
 controllers.jsをどのようにAngular4で表現すればよいのでしょうか

■JavaScript – app.js

var myApp = angular.module('app', ['ngRoute','ngAnimate']);

myApp.config(['$routeProvider',
    function($routeProvider){
        $routeProvider.when('/photo0/', {
            templateUrl: 'templateA.html',
            controllerAs: 'CtrlA'
        });
        $routeProvider.when('/photo1/', {
            templateUrl: 'templateB.html',
            controllerAs: 'CtrlB'
        });
        $routeProvider.otherwise({
            redirectTo: '/photo0/'
        });
    }
]);

◆app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { Route1Component }  from './route-1/route-1.component';
import { Route2Component }  from './route-2/route-2.component';

const routes: Routes = [
  {
    path: 'photo0',
    component: Route1Component,
  },
  {
    path: 'photo1',
    component: Route2Component,
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

■JavaScript – controllers.js

myApp.controller('MainCtrl', ['$scope', function($scope){
    $scope.msg = 'html = index.html, ng-controller = MainCtrl';
}]);

myApp.controller('CtrlA', ['$scope', function($scope){
    $scope.msg = 'html = templateA.html, ng-controller = CtrlA';
}]);

myApp.controller('CtrlB', ['$scope', function($scope){
    $scope.msg = 'html = templateB.html, ng-controller = CtrlB';
}]);

1 件の回答 1

0

Angularの公式ページに「AngularJS to Angular Quick Reference」があります。
AngularJSからAngularへのマイグレーションは上記を参考にされると良いかと思います。

AngularJSのControllerはModules/controllers/componentsの項で示されるようにAngularではComponentsとなります。

  1. Controller registrationはComponent decoratorとなります。

AngularJS

angular
  .module("movieHunter")
  .controller("MovieListCtrl",
              ["movieService",
               MovieListCtrl]);

to Angular

@Component({
  selector: 'app-movie-list',
  templateUrl: './movie-list.component.html',
  styleUrls: [ './movie-list.component.css' ],
})
  1. Controller functionはComponent classとなります。

AngularJS

function MovieListCtrl(movieService) {}

to Angular

export class MovieListComponent {}

つまり質問文にあるphoto0に対するRoute1Component、photo1に対するRoute2Componentがそれぞれコントローラーの役割を担います。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。