Javascript AngularJS路线图_Javascript_Angularjs_Undefined

Javascript AngularJS路线图

javascript angularjs

Javascript AngularJS路线图,javascript,angularjs,undefined,Javascript,Angularjs,Undefined,我不明白为什么，但当我同时控制台.log（）box和box.color时，它告诉我它是未定义的…我尝试了许多不同的方法来解决这个问题，但都失败了下面是script.js： var app = angular.module('LoginApp', ["firebase", "ngRoute", "ngCookies"]) app.provider("box", function () { var hex = "SomeColor"; var UID = 3; re

我不明白为什么，但当我同时控制台.log（）box和box.color时，它告诉我它是未定义的…我尝试了许多不同的方法来解决这个问题，但都失败了

下面是script.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)
            }
          }
    ])

当它到达控制器时，我设置散列并得到has。。。roomcontroller.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"
        });




    }
])

编辑4 好的，这是我的roomcontroller.js现在..：（控制器底部的重要细节）

app.controller（'roomController'，[“$scope”，“Auth”，“Ref”，“AuthService”，“roomService”，“$http”，“Hash”，“$routeParams”，
函数（$scope、Auth、Ref、AuthService、roomService、$http、Hash、$routeParams）{
//甜蜜警报：）
函数生成器DomainStringToken（长度）{
var字符串=”；
var characters=“abcdefghijklmnopqrstuvxyzabefghijklmnopqrstuvxyzo123456789”；
对于（变量i=0；i


和script.js（请注意，这不是我唯一拥有的。您可以在Cloud9（Plunk未更新）上的上述链接上看到所有其他脚本）：
var-app=angular.module（'LoginApp'，[“firebase”，“ngRoute”，“ngCookies”，“ngMessages']））
app.provider（“散列”，函数（）
{
var-UID=0；
var_getHash=function（）
{
返回UID；
};
返回{
getHash:_getHash，
$get:function（）
{
返回{
setHash：函数（值）
{
UID=值；
},
getHash:\u getHash
}
}
}
})
config（函数（$routeProvider、$cookiesProvider、HashProvider）{
$routeProvider
。当（“/”{
templateUrl:'HtmlFiles/registration.html'，
控制器：“regController”
})
.when（“/logIn”{
templateUrl:'HtmlFiles/login.html'，
控制器：“登录控制器”
})
.when（“/Chat”{
templateUrl:'HtmlFiles/Chat.html'，
控制器：“聊天控制器”
})
.when（“/：Hash”{
模板：“测试”，
控制器：“任何控制器”
})
.when（“/userSettings”{
templateUrl:'HtmlFiles/userSettings.html'，
控制器：“userSettingsController”
})
.当（“/房间”{
templateUrl:'HtmlFiles/room.html'，
控制器：“roomController”
})
.否则({
重定向到：'/'
}); 
});
app.controller（'测试'，[“$scope”，“roomService”，“Hash”，函数（$scope，roomService，Hash）{
log（“这是来自控制器服务：”+roomService.room.roomUID）
console.log（Hash.getHash（））
}
])
app.factory（“Auth”，[“$firebaseAuth”，
函数（$firebaseAuth）{
var ref=新的火基（“https://chattappp.firebaseio.com/");
返回$firebaseAuth（ref）；
}
]);
应用程序工厂（“参考”，功能（）{
var ref=新的火基（“https://chattappp.firebaseio.com/")
返回ref；
})
应用程序工厂（“UniPosts”，函数（）{
var ref=新的火基（“https://postss.firebaseio.com/")
返回ref；
});
app.service（'getCookieService'，[“$cookieStore”，“$scope”，
函数（$cookieStore，$scope）{
this.getCookie=函数（名称）{
$cookieStore.get（名称）
}
}
])
[1]: https://ide.c9.io/amanuel2/chattapp
[2]: https://plnkr.co/edit/ToWpQCw6GaKYkUegFjMi?p=preview
您的代码中有两个问题：
“roomController”的定义

只要匹配参数和它们的声明，您就会发现遗漏了“box”参数的声明。正确的“roomController”定义如下：
app.controller('roomController', ["$scope", "Auth", "Ref", "AuthService", "roomService","$http", "box",
        function($scope, Auth, Ref, AuthService, roomService, $http,box)

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

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

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

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

$routeParams.hash

“盒子”提供者。您将“setColor”方法定义为provider的配置方法，但尝试将其用作provider结果方法。更正后的版本应如下所示：
app.controller('roomController', ["$scope", "Auth", "Ref", "AuthService", "roomService","$http", "box",
        function($scope, Auth, Ref, AuthService, roomService, $http,box)

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

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

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

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

$routeParams.hash



对EDIT2的回答：
您定义了HashProvider
。要在app.config
中配置它，您应该将参数作为HashProvider
传递（不仅仅是散列，而且当您尝试在app.config之外的任何地方使用它时，您应该将其作为散列插入）。因此，您的app.config声明应该如下所示：
app.controller('roomController', ["$scope", "Auth", "Ref", "AuthService", "roomService","$http", "box",
        function($scope, Auth, Ref, AuthService, roomService, $http,box)

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

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

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

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

$routeParams.hash

…要访问getHash
方法，必须将其移动到提供程序配置，例如：
app.controller('roomController', ["$scope", "Auth", "Ref", "AuthService", "roomService","$http", "box",
        function($scope, Auth, Ref, AuthService, roomService, $http,box)

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

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

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

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

$routeParams.hash

对EDIT3的回答：
现在我知道你想做什么了。问题是你正试图做错事：）。正确的方法更简单。必须使用param，例如：
app.controller('roomController', ["$scope", "Auth", "Ref", "AuthService", "roomService","$http", "box",
        function($scope, Auth, Ref, AuthService, roomService, $http,box)

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

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

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

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

$routeParams.hash

在控制器中，您可以分析哈希是否正确，并执行必要的操作，或者在哈希无效时将用户重定向到某个位置。
app.controller（'roomController'，[“$scope”，“Auth”，“Ref”，“AuthService”，“roomService”，“$http”，function（$sc