Питання AngularJS RouteParams


Я не розумію, чому, але коли я консоль.log () і поле, і box.color, що розповідають мені його невизначеною ... Я спробував багато різних методів вирішити цю проблему, але все це не вдалося.

Хмара9

Планкер 

І ось сценарій.js:

var app = angular.module('LoginApp', ["firebase", "ngRoute", "ngCookies"])


app.provider("box", function ()
{
    var hex = "SomeColor";
    var UID = 3;
    return {
        setColor: function (value)
        {
            UID = value
        },
        $get: function ()
        {
            return {
                color: hex
            }
        }
    }
})

app.config(function ($routeProvider, $cookiesProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'HtmlFiles/registration.html',
        controller: 'regController'
      })
     .when('/logIn', {
        templateUrl: 'HtmlFiles/login.html',
        controller: 'loginController'
      })

      .when('/Chat', {
        templateUrl: 'HtmlFiles/Chat.html',
        controller: 'chatController'

      })
      .when('/Test' , {
        template: '<h3>This is just a testing phase</h3>',
        controller: 'Testing'
      })

      .when('/userSettings', {
        templateUrl: 'HtmlFiles/userSettings.html',
        controller: 'userSettingsController'

      })

      .when('/room', {
        templateUrl: 'HtmlFiles/room.html',
        controller: 'roomController'
      })

      .otherwise({
        redirectTo: '/'
      }); 
});

app.controller('Testing', ["$scope","roomService", "roomProvider",  function($scope, roomService, roomProvider){
  console.log("This is from the Controller Service: " + roomService.room.roomUID)
  console.log("This is from the Controller Provider: " + roomProvider.$get)
  }
])
app.factory("Auth", ["$firebaseAuth",
  function($firebaseAuth) {
    var ref = new Firebase("https://chattappp.firebaseio.com/");
    return $firebaseAuth(ref);
  }
]);

app.factory("Ref", function(){
   var ref = new Firebase("https://chattappp.firebaseio.com/")
   return ref;
})

app.factory("UniPosts" , function(){
  var ref = new Firebase("https://postss.firebaseio.com/")
   return ref;
});

app.service('getCookieService', ["$cookieStore", "$scope", 
          function($cookieStore, $scope){
            this.getCookie = function(name){
              $cookieStore.get(name)
            }
          }
    ])

roomController.js:

app.controller('roomController', ["$scope", "Auth", "Ref", "AuthService", "roomService","$http",
    function($scope, Auth, Ref, AuthService, roomService, $http,box) {
    // Sweet Alert :)
     function generateRandomStringToken(length) {
            var string = "";
            var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
            for (var i = 0; i < length; i++){
                string += characters.charAt(Math.floor(Math.random() * characters.length));
            }
            return string;
        }

        swal({
            title: "Room",
            text: "What do you want your room name to be?",
            type: "input",
            showCancelButton: true,
            closeOnConfirm: false,
            animation: "slide-from-top",
            inputPlaceholder: "Write something"
        }, function(inputValue) {
            if (inputValue === false) return false;
            if (inputValue === "") {
                swal.showInputError("You need to write something!");
                return false
            }
            swal("Nice!", "You wrote: " + inputValue, "success");
             $scope.$apply(function () {
            $scope.roomNameModel = inputValue
            });

           console.log($scope.roomNameModel)
    var redirectPage = generateRandomStringToken(10)
     console.log("User gets redirected to : " + redirectPage + " ...")
     roomService.setRoomUID(redirectPage);
     console.log(roomService.room.roomUID)
     console.log(box) //Undefined...
     console.log("From Provider : " + box.color)//box.color is undefined..


        });




    }
])
    //window.location.hash = "/Test"

EDIT 2

: Ok зараз працює, але я заплутався про те, як використовувати його в app.config .. я мій провайдер є хаш:

app.provider("Hash", function ()
    {
        var UID = 0;
        return {
            $get: function ()
            {
                return {
                    setHash: function (value)
                    {
                        UID = value;
                    },
                    getHash: function()
                    {
                        return UID;
                    }
                }
            }
        }
    })

І коли він йде до контролера, я встановлюю хеш і отримаю має ... roomControler.js:

app.controller('roomController', ["$scope", "Auth", "Ref", "AuthService", "roomService","$http", "Hash",
        function($scope, Auth, Ref, AuthService, roomService, $http,Hash) {
    // Sweet Alert :)
     function generateRandomStringToken(length) {
            var string = "";
            var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
            for (var i = 0; i < length; i++){
                string += characters.charAt(Math.floor(Math.random() * characters.length));
            }
            return string;
        }

        swal({
            title: "Room",
            text: "What do you want your room name to be?",
            type: "input",
            showCancelButton: true,
            closeOnConfirm: false,
            animation: "slide-from-top",
            inputPlaceholder: "Write something"
        }, function(inputValue) {
            if (inputValue === false) return false;
            if (inputValue === "") {
                swal.showInputError("You need to write something!");
                return false
            }
            swal("Nice!", "You wrote: " + inputValue, "success");
             $scope.$apply(function () {
            $scope.roomNameModel = inputValue
            });

           console.log($scope.roomNameModel)
    var redirectPage = generateRandomStringToken(10)
     console.log("User gets redirected to : " + redirectPage + " ...")
     roomService.setRoomUID(redirectPage);
     console.log(roomService.room.roomUID);
     Hash.setHash(redirectPage);
     console.log("From Provider : " + Hash.getHash())
    window.location.hash = "/Test"
        });




    }
])

Тепер я хочу зробити в моєму app.config (), я хочу сказати, коли він знаходиться в Hash.getHash () Перейти до шаблону:, та контролера:

Так щось подібне ....

    app.config(function ($routeProvider, $cookiesProvider, Hash) {
        $routeProvider.
         when('/' + Hash.getHash(), {
               template: '<h4> Your in Room',
               controller: 'Test
                })
});

app.controller('Testing', ["$scope","roomService","Hash",function($scope, roomService, Hash){
  console.log("This is from the Controller Service: " + roomService.room.roomUID)
  console.log(Hash.getHash())//This Logs right. :D
  }
])

EDIT 3

Те, що я намагався сказати раніше, полягав у тому, що я хотів якось налаштувати випадково сформований Hash в моєму app.config () при виписці. так в моєму app.config. WHEN USER / RANDOMLYGENERATEDHASH мають шаблон: '<h1>Test</h1>' . Це те, що я спробував, але дозування ...

Це четвертий випадок. () Заяви ..

app.config(function ($routeProvider, $cookiesProvider, HashProvider){
    $routeProvider
      .when('/', {
        templateUrl: 'HtmlFiles/registration.html',
        controller: 'regController'
      })
     .when('/logIn', {
        templateUrl: 'HtmlFiles/login.html',
        controller: 'loginController'
      })

      .when('/Chat', {
        templateUrl: 'HtmlFiles/Chat.html',
        controller: 'chatController'

      })
      .when('/' + HashProvider , {
        templete: '<h1>Test</h1>'
      })
      .when('/userSettings', {
        templateUrl: 'HtmlFiles/userSettings.html',
        controller: 'userSettingsController'
      })
      .when('/room', {
        templateUrl: 'HtmlFiles/room.html',
        controller: 'roomController'
      })

      .otherwise({
        redirectTo: '/'
      }); 
});

І ось провайдер зараз ..

app.provider("Hash", function ()
{
    var UID = 0;
    var _getHash = function()
    {
        return UID;
    };
    return {
        getHash: _getHash,
        $get: function ()
        {
            return {
                setHash: function (value)
                {
                    UID = value;
                },
                getHash: _getHash
            }
        }
    }
})

EDIT 4

Добре Це мій roomcontroller.js Тепер ..: (Важлива деталь внизу контролера)

app.controller('roomController', ["$scope", "Auth", "Ref", "AuthService", "roomService","$http", "Hash","$routeParams",
        function($scope, Auth, Ref, AuthService, roomService, $http,Hash, $routeParams) {
    // Sweet Alert :)
     function generateRandomStringToken(length) {
            var string = "";
            var characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
            for (var i = 0; i < length; i++){
                string += characters.charAt(Math.floor(Math.random() * characters.length));
            }
            return string;
        }

        swal({
            title: "Room",
            text: "What do you want your room name to be?",
            type: "input",
            showCancelButton: true,
            closeOnConfirm: false,
            animation: "slide-from-top",
            inputPlaceholder: "Write something"
        }, function(inputValue) {
            if (inputValue === false) return false;
            if (inputValue === "") {
                swal.showInputError("You need to write something!");
                return false
            }
            swal("Nice!", "You wrote: " + inputValue, "success");
             $scope.$apply(function () {
            $scope.roomNameModel = inputValue
            });

           console.log($scope.roomNameModel)
    var redirectPage = generateRandomStringToken(10)
     console.log("User gets redirected to : " + redirectPage + " ...")
     roomService.setRoomUID(redirectPage);
     console.log(roomService.room.roomUID);
     Hash.setHash(redirectPage);
     console.log("From Provider : " + Hash.getHash())
     $routeParams.hash = Hash.getHash()

        });




    }
])

and script.js (Зауважте, що це не єдині, які у мене є. Ви можете побачити всі інші посилання на Cloud9 (Plock not updated)):

var app = angular.module('LoginApp', ["firebase", "ngRoute", "ngCookies", 'ngMessages'])


app.provider("Hash", function ()
{
    var UID = 0;
    var _getHash = function()
    {
        return UID;
    };
    return {
        getHash: _getHash,
        $get: function ()
        {
            return {
                setHash: function (value)
                {
                    UID = value;
                },
                getHash: _getHash
            }
        }
    }
})

app.config(function ($routeProvider, $cookiesProvider, HashProvider){
    $routeProvider
      .when('/', {
        templateUrl: 'HtmlFiles/registration.html',
        controller: 'regController'
      })
     .when('/logIn', {
        templateUrl: 'HtmlFiles/login.html',
        controller: 'loginController'
      })

      .when('/Chat', {
        templateUrl: 'HtmlFiles/Chat.html',
        controller: 'chatController'

      })
    .when('/:Hash', {
            template: '<h1>TEST TEST</h1>',
            controller: 'any controller'
        })
      .when('/userSettings', {
        templateUrl: 'HtmlFiles/userSettings.html',
        controller: 'userSettingsController'
      })
      .when('/room', {
        templateUrl: 'HtmlFiles/room.html',
        controller: 'roomController'
      })

      .otherwise({
        redirectTo: '/'
      }); 
});

app.controller('Testing', ["$scope","roomService","Hash",function($scope, roomService, Hash){
  console.log("This is from the Controller Service: " + roomService.room.roomUID)
  console.log(Hash.getHash())
  }
])
app.factory("Auth", ["$firebaseAuth",
  function($firebaseAuth) {
    var ref = new Firebase("https://chattappp.firebaseio.com/");
    return $firebaseAuth(ref);
  }
]);

app.factory("Ref", function(){
   var ref = new Firebase("https://chattappp.firebaseio.com/")
   return ref;
})

app.factory("UniPosts" , function(){
  var ref = new Firebase("https://postss.firebaseio.com/")
   return ref;
});

app.service('getCookieService', ["$cookieStore", "$scope", 
          function($cookieStore, $scope){
            this.getCookie = function(name){
              $cookieStore.get(name)
            }
          }
    ])




  [1]: https://ide.c9.io/amanuel2/chattapp
  [2]: https://plnkr.co/edit/ToWpQCw6GaKYkUegFjMi?p=preview

11
2018-01-24 02:34


походження


app.controller ("roomController", ["$ scope", "Auth", "Ref", "AuthService", "roomService", "$ http", функція ($ scope, Auth, Ref, AuthService, roomService, $ http , коробка) { - Bindrid
Чи правильно цей розділ? - Bindrid
Так, @Біндід ... - amanuel2
Не app.controller (roomController, ["$ scope", "Auth", "Ref", "AuthService", "roomService", "$ http", "box", function ($ scope, Auth, Ref, AuthService) , roomService, $ http, box) (? - Bindrid
Ви не поставите провайдерів в "" контролери ваших залежностей ... @Bindrid - amanuel2


Відповіді:


У вашому коді є дві проблеми:

  1. Визначення "roomController"

    app.controller('roomController', ["$scope", "Auth", "Ref", 
                   "AuthService", "roomService","$http", 
                   function($scope, Auth, Ref, AuthService, roomService, 
                   $http,box) {})
    

Просто узгодьте параметри та їх декларації, і ви побачите, що ви пропустили декларацію для параметра "box". Правильне визначення "roomController" має бути таким:

app.controller('roomController', ["$scope", "Auth", "Ref", "AuthService", "roomService","$http", "box",
        function($scope, Auth, Ref, AuthService, roomService, $http,box)
  1. "коробка" провайдера. Ви визначили метод "setColor" як метод налаштування провайдера, але ви намагаєтеся використовувати його як метод результату постачальника. Виправлена ​​версія повинна виглядати так:

    app.provider("box", function ()
    {
        var hex = "SomeColor";
        var UID = 3;
        return {
            $get: function ()
            {
                return {
                    color: hex,
                    setColor: function (value)
                    {
                        UID = value
                    }
                }
            }
        }
    })
    

Кутові провайдери

Відповідь на EDIT2:

Ви визначили HashProvider. Щоб налаштувати це в app.config ви повинні передати аргумент як HashProvider (не тільки Hash, АЛЕ, коли ви спробуєте використовувати його скрізь, окрім app.config, ви повинні ввести його як Hash). Отже, ваше оголошення app.config має бути таким:

app.config(function ($routeProvider, $cookiesProvider, HashProvider)

... і дозволити вам отримати доступ до getHash Метод потрібно перемістити його до конфігурації провайдера, наприклад:

app.provider("Hash", function ()
{
    var UID = 0;
    var _getHash = function()
    {
        return UID;
    };
    return {
        getHash: _getHash,
        $get: function ()
        {
            return {
                setHash: function (value)
                {
                    UID = value;
                },
                getHash: _getHash
            }
        }
    }
})

Відповідь на EDIT3:

Тепер я отримав те, що ви намагаєтесь зробити. І справа в тому, що ви намагаєтеся це зробити неправильно :). Правильний шлях є більш простим. Ти мусиш конфігурувати маршрут з параметром, наприклад, як:

.when('/:hash', {
    template: '<h1>TEST TEST</h1>',
    controller: 'any controller'
})

І помістіть його тільки після останнього маршруту. Після цього в контролері ви можете отримати доступ до хешу за допомогою $routeParams об'єкт Наприклад, як це:

$routeParams.hash

Після цього в контролері ви можете проаналізувати, чи правильно хеш і робити необхідні речі, або перенаправити користувача десь, якщо хеш недійсний.


4
2018-01-28 12:31



Хм Алекс дуже дякує, але ще одне питання. Але у мене ще одне питання. Подивіться на EDIT 2: на фактичне запитання на дні. ДЯКУЮ! : D - amanuel2
Алекс, я відредагував питання зараз. Якщо ви анкер, що питання це було б прекрасно !!! Imiediate 50 балів !! - amanuel2
Добре чути, що моя відповідь допомогла вам. Я оновив його відповіддю на ваше друге редагування. - Alex Kopachov
Добре, його оновлений EDIT 3 знаходиться внизу питання - amanuel2
Може, я помиляюся. Можливо .. Але тепер, схоже, ви не хочете розуміти те, що я вам запропонував і як це працює, і чому це працює. Те, що я бачу у вашому Cloud9, просто копіює та вставте з великою кількістю помилок, і, схоже, ви не уважно прочитали про кутова маршрутизацію. Будь ласка, прочитайте це та спробуйте повністю зрозуміти, як це працює, і чому це працює. Без цього не має сенсу для мене коректувати кожну помилку. - Alex Kopachov