Javascript 关于ANGULAR.js 8步应用程序工作流的建议

我正在用Angular.js创建一个应用程序，我对如何使用Angular来创建它感到有点困惑

在下面，你可以看到我目前的预览，虽然很难看，但效果不错

我只是觉得有更好的方法可以做到这一点，并且希望获得其他用户的输入，知道这一点：

申请将： 1） 通过8个步骤收集输入 2） 根据这些输入，显示特定的结果。 3） 能够在任何时刻进入任何状态

// Create an application module
var app = angular.module('website', ['ngSanitize','ngAnimate','ui.router']);

app.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise("/home");

    $stateProvider

        .state('home', {
            url: "/home",
            templateUrl: "js/partials/home.html",
            controller: HomeCtrl
        })

        .state('step1', {
            url: "/step1",
            templateUrl: "js/partials/step1.html",
            controller: Step1Ctrl
        })

        .state('step2', {
            url: "/step2",
            templateUrl: "js/partials/step2.html",
            controller: Step2Ctrl
        })

        .state('step3', {
            url: "/step3",
            templateUrl: "js/partials/step3.html",
            controller: Step3Ctrl
        })

        .state('step4', {
            url: "/step4",
            templateUrl: "js/partials/step4.html",
            controller: Step4Ctrl
        })

        .state('step5', {
            url: "/step5",
            templateUrl: "js/partials/step5.html",
            controller: Step5Ctrl
        })

        .state('step6', {
            url: "/step6",
            templateUrl: "js/partials/step6.html",
            controller: Step6Ctrl
        });

});

function getNewPercentageValue(step,percent){
    var NewPercentage = 0;
    if(percent){
        NewPercentage = percent * step;
    }else{
        $rootScope.values.ActualPercentage = (100/8);
        NewPercentage = $rootScope.values.ActualPercentage * step;
    }
    return NewPercentage;
}

function HomeCtrl($scope, $http, $rootScope, $state) { 
    /* DEFAULT VARIABLES */
    $rootScope.values = {
        ActualPercentageSteps: (100/8),
        ActualPercentage: 0
    };
}



function Step1Ctrl($scope, $http, $rootScope, $state) {

    $rootScope.values.ActualPercentage = getNewPercentageValue(1,$rootScope.values.ActualPercentageSteps);

    $scope.services = [
        {name: 'Service 1', id: 1},
        {name: 'Service 2', id: 2},
        {name: 'Service 3', id: 3},
        {name: 'Service 4', id: 4},
    ];

    $scope.FormCtrlAddService = function(service){

    };

    $scope.FormCtrlRemoveService = function(service){

    };


}

function Step2Ctrl($scope, $http, $rootScope, $state) {
    /* 
    STEP 2  
    */

    $rootScope.values.ActualPercentage = getNewPercentageValue(2,$rootScope.values.ActualPercentageSteps);

    $scope.FormCtrlAddKeyword = function(keyword){

    };

    $scope.FormCtrlRemoveKeyword = function(keyword){

    };  

    $scope.updateValue = function(value){

    };
}

function Step3Ctrl($scope, $http, $rootScope, $state) {
    /* 
    STEP 3
    */

    $rootScope.values.ActualPercentage = getNewPercentageValue(3,$rootScope.values.ActualPercentageSteps);   
}

function Step4Ctrl($scope, $http, $rootScope, $state) {
    /* 
    STEP 4
    */

    $rootScope.values.ActualPercentage = getNewPercentageValue(4,$rootScope.values.ActualPercentageSteps);
}

function Step5Ctrl($scope, $http, $rootScope, $state) {

}

function Step6Ctrl($scope, $http, $rootScope, $state) {

}

function Step7Ctrl($scope, $http, $rootScope, $state) {

}

---

您可以使用app.controller（“MyCtrl”、function（$scope）{}）定义控制器，然后不需要所有全局定义的函数（只需使用带引号的字符串引用它们，如controller：“MyCtrl”）

除此之外，您还可以将公共数据移动到服务或工厂中，因为它们最终都是单例数据，并将在应用程序的整个生命周期中保持数据，下面是一个plunk示例：

这里要注意的主要问题是在尝试替换整个对象时使用angular.copy，而不是仅使用=，因为两个控制器都指向同一个引用对象，所以我永远不想创建新对象并将服务指向该对象，否则会断开连接

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, Service) {
  $scope.items = Service.items;

  $scope.someModel = {};

  $scope.addItem = function(item){
    Service.addItem(item);
  }
  $scope.resetItems = function(){
    Service.resetItems();
  }
});

app.controller('AnotherCtrl', function($scope, Service) {
  $scope.items = Service.items;
});

app.service('Service', function($timeout){
  var someService = {
    items:[],
    id:0,
    addItem:function(item){
      someService.items.push({label:item, id:someService.id++});
    },
    resetItems:function(){
      someService.id=0;

      //simulated HTTP call
      $timeout(function(){
        angular.copy([], someService.items);
      })
    }
  };
  return someService;
})