42360


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

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

■JavaScript – app.js

[code]

    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/'
            });
        }
    ]);
    
[/code]

◆app-routing.module.ts

[code]

    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 { }
    
[/code]

■JavaScript – controllers.js

[code]

    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';
    }]);
    
[/code]


CC BY-SA 3.0
2018-03-11T11:16:37.633
42325
2018-03-13T01:46:33.897
2018-03-11T13:35:01.547
12842
12842
question
angular4
AngularJSをAngular4にするには


Angularの公式ページに「[AngularJS to Angular Quick
Reference](https://angular.io/guide/ajs-quick-
reference#modulescontrollerscomponents)」があります。  
AngularJSからAngularへのマイグレーションは上記を参考にされると良いかと思います。

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

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

> AngularJS
[code]

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

>
> to Angular
[code]

>     @Component({
>       selector: 'app-movie-list',
>       templateUrl: './movie-list.component.html',
>       styleUrls: [ './movie-list.component.css' ],
>     })
>  
[/code]

  2. Controller functionはComponent classとなります。

> AngularJS
[code]

>     function MovieListCtrl(movieService) {}
>  
[/code]

>
> to Angular
[code]

>     export class MovieListComponent {}
>  
[/code]

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


CC BY-SA 3.0
2018-03-13T01:46:33.897
42360
2018-03-13T01:46:33.897
20272
42325
answer