0
\$\begingroup\$

Please give feedback on what I could do better next time. This is an Angular 1.x landing page I made for a pretend car dealership.

Here is what it looks like.

Here is the app.js:

(function(){

'use strict';

// Declare app level module which depends on views, and components
angular.module('myApp',[]);



})();

Here is my car-slide.js directive that holds some car data, and has a controller for changing the current car picture and tagline:

angular.module('myApp').directive('carSlide', CarSlide);


function CarSlide(){
return {
   restrict: 'E',
   templateUrl: 'partials/car-slide.html',
   controller:function($interval){


    this.currentCar = 0;
    var self = this;


    function changeCar(){
      if (self.currentCar == 0){
        self.currentCar = 1;
      } else {
        self.currentCar = 0;
      }
    }

    $interval(changeCar, 4000);

    this.carData = [{
                    class:'A4',
                    name: "Audi A4",
                    tagline: "The time is now.",
                    img: "img/big/car1.jpg"
                    },
                    {
                    class:'A5',
                    name: "Audi A5",
                    tagline: "Do you like power?",
                    img: "img/big/car2.jpg"}
                  ];

  },
  controllerAs:'carCtrl'
};

};

Here is the directive for the slider on the bottom. All it does is change the header from one car type to another:

angular.module('myApp').directive('carTypeSlide', CarTypeSlide);

function CarTypeSlide() {
    return {
        restrict: 'E',
        templateUrl: 'partials/car-type-slide.html',

        controller: function($interval) {
            var self = this;
            this.carTypes = [
                "Sedans",
                "Crossovers and Minivans",
                "Hybrids",
                "Compacts"
            ];
            var initial = 0;
            var currType = 0;
            this.showType = this.carTypes[initial];


            $interval(changeType, 3000);


            function changeType() {

                currType++;

                self.showType = self.carTypes[currType];

                if (currType === self.carTypes.length) {
                    currType = 0;
                    self.showType = self.carTypes[currType];
                }

            }


        },
        controllerAs: 'carTypeCtrl'
    };
};

Here is the repo for it.

I have put AngularJS on pause and am trying to learn ES2015 right now, and then building a simple app with that. Do you think learning ES2015 will help with frameworks like Angular/React?

\$\endgroup\$
1
  • \$\begingroup\$ First of all, what are you doing should be not directives, but components. Directives (by new metodology) should be used to change element, not to create new. About ES2015 - in my opinion it's better to use it via Babel for now. And it helps to write Angular 1.6 in Angular 2 style. Better for a later transition. \$\endgroup\$
    – Kindzoku
    May 22, 2017 at 12:35

1 Answer 1

1
\$\begingroup\$

Here is an example of your carousel written in Angular 1.6 style with ES2015

(function(){
    class componentController {

        constructor($interval) {

            Object.assign(this, { $interval })

            this.currentCar = 0;

            this.carData = [
                {
                    class:'A4',
                    name: "Audi A4",
                    tagline: "The time is now.",
                    img: "img/big/car1.jpg"
                },
                {
                    class:'A5',
                    name: "Audi A5",
                    tagline: "Do you like power?",
                    img: "img/big/car2.jpg"
                }
            ];

            this.$interval(changeCar, 4000);
        }

        changeCar(){
            // this way you can have collection of any size
            this.currentCar = this.currentCar++ % this.carData.length;
        }
    }

    const componentOptions = {

        templateUrl: 'partials/car-slide.html',
        controller: componentController

    };

    angular.module('myApp').component('carSlide', componentOptions);

}());

ConrollerAs is $ctrl by default.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.