Question

我正在使用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) {

}

Answer 1

您可以使用app.controller定义控制器（＆＃34; MyCtrl＆＃34;，函数（$ scope）{}）然后不需要拥有所有全局定义的函数（只需使用它们引用它们）引用的字符串，如controller：＆＃34; MyCtrl＆＃34;）。

除此之外，您可以将您的公共数据移动到服务或工厂，因为它们最终都是单例，并且会在应用程序的整个生命周期内保留数据，这里有一个示例：

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

这里要注意的主要是在尝试替换整个对象而不是使用=时使用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;
})

使用ANGULAR.js为8步应用程序提供工作流建议

1 个答案: