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

Question

I'm creating an application with Angular.js and I'm getting a bit confused of how to use Angular to make it.

Below, you can see a preview of what I have for the moment, it's ugly but it works.

I just feel like there is much better ways of doing this, and would like to get other user inputs, knowing this :

The application will: 1) collect inputs over 8 steps 2) dependeing of those inputs, display specific results. 3) Being able to go to any state at any moment

// 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) {

}

Answer 1

You can define your controllers using app.controller("MyCtrl", function($scope){}) and then don't need to have all the globally defined functions (just reference them using a quoted string like controller:"MyCtrl").

Aside from that you can move your common data into a service or factory since both end up being singletons and will persist the data throughout the lifetime of the application, here's a plunk showing an example:

http://plnkr.co/edit/4OYWi35Ke2GGDB6wY2W9

main thing to note here is use of angular.copy when attempting to replace the entire object instead of just using = since both controllers are just pointing to the same referenced object so I don't ever want to create a new object and point the service at that or things would get disconnected.

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;
})