Angular Js Uncaught Error

时间:2016-01-07 13:20:16

标签: javascript angularjs

嘿伙计们我得到了错误

  

未捕获错误:[$ injector:modulerr] http://errors.angularjs.org/1.3.15/ $ injector / modulerr?p0 = loginApp& p1 =错误%... gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js %3A17%3A381)

我不知道为什么但是这里的文件都在同一个文件夹中我觉得它与ngRoute没有在login.html中正确实现有关但不确定。你们不需要阅读CSS,因为我们确信它们不是问题所在。谢谢你的帮助!

的login.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Angular Js</title>
  <!-- load Bootstrap and custom style.css -->
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
  <link rel="stylesheet"  href="login.css">

  <!--Google Font - Work Sans-->
  <link href='https://fonts.googleapis.com/css?family=Work+Sans:400,300,700' rel='stylesheet' type='text/css'>


<!--Login-->
<script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
  <script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>
<script src="main.js"></script>
</head>

<body ng-app="loginApp" ng-controller = "loginController">

  <div id="container_demo" >
    <!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4  -->
    <a class="hiddenanchor" id="toregister"></a>
    <a class="hiddenanchor" id="tologin"></a>
    <div id="wrapper">
        <div id="login" class="animate form">
            <form  autocomplete="on">
                <h1>Log in</h1>
                <p>
                    <label for="username" class="uname" data-icon="u" > Your email or username </label>
                    <input id="username" name="username" required="required" type="text" placeholder="myusername or mymail@mail.com"/>
                </p>
                <p>
                    <label for="password" class="youpasswd" data-icon="p"> Your password </label>
                    <input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" />
                </p>
                <p class="keeplogin">
                    <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" />
                    <label for="loginkeeping">Keep me logged in</label>
                </p>
                <p class="login button">
                    <input type="submit" value="Login" />
                </p>
                <p class="change_link">
                    Not a member yet ?
                    <a href="#toregister" class="to_register">Join us</a>
                </p>
            </form>
        </div>

        <div id="register" class="animate form">
            <form autocomplete="on">
                <h1> Sign up </h1>
                <p>
                    <label for="usernamesignup" class="uname" data-icon="u">Your username</label>
                    <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690" />
                </p>
                <p>
                    <label for="emailsignup" class="youmail" data-icon="e" > Your email</label>
                    <input id="emailsignup" name="emailsignup" required="required" type="email" placeholder="mysupermail@mail.com"/>
                </p>
                <p>
                    <label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label>
                    <input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO"/>
                </p>
                <p>
                    <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label>
                    <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="eg. X8df!90EO"/>
                </p>
                <p class="signin button">
                    <input type="submit" value="Sign up"/>
                </p>
                <p class="change_link">
                    Already a member ?
                    <a href="#/ToDo" class="to_register"> Go and log in </a>
                </p>
            </form>
        </div>

    </div>
  </div>


  </body>

</html>

login.css:

#subscribe,
#login{
    position: absolute;
    top: 0px;
    width: 88%;
    padding: 18px 6% 60px 6%;
    margin: 0 0 35px 0;
    background: rgb(247, 247, 247);
    border: 1px solid rgba(147, 184, 189,0.8);
    box-shadow:
        0pt 2px 5px rgba(105, 108, 109,  0.7),
        0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
    border-radius: 5px;
}
#login{
    z-index: 22;
}
/**** general text styling ****/
#wrapper h1{
    font-size: 48px;
    color: rgb(6, 106, 117);
    padding: 2px 0 10px 0;
    font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
    font-weight: bold;
    text-align: center;
    padding-bottom: 30px;
}

/** For the moment only webkit supports the background-clip:text; */
#wrapper h1{
    background:
    -webkit-repeating-linear-gradient(-45deg,
        rgb(18, 83, 93) ,
        rgb(18, 83, 93) 20px,
        rgb(64, 111, 118) 20px,
        rgb(64, 111, 118) 40px,
        rgb(18, 83, 93) 40px);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

#wrapper h1:after{
    content:' ';
    display:block;
    width:100%;
    height:2px;
    margin-top:10px;
    background:
        linear-gradient(left,
            rgba(147,184,189,0) 0%,
            rgba(147,184,189,0.8) 20%,
            rgba(147,184,189,1) 53%,
            rgba(147,184,189,0.8) 79%,
            rgba(147,184,189,0) 100%);
}
/**** advanced input styling ****/
/* placeholder */
::-webkit-input-placeholder  {
    color: rgb(190, 188, 188);
    font-style: italic;
}
input:-moz-placeholder,
textarea:-moz-placeholder{
    color: rgb(190, 188, 188);
    font-style: italic;
}
input {
  outline: none;
}
/* all the input except submit and checkbox */
#wrapper input:not([type="checkbox"]){
    width: 92%;
    margin-top: 4px;
    padding: 10px 5px 10px 32px;
    border: 1px solid rgb(178, 178, 178);
    box-sizing : content-box;
    border-radius: 3px;
    box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
    transition: all 0.2s linear;
}
#wrapper input:not([type="checkbox"]):active,
#wrapper input:not([type="checkbox"]):focus{
    border: 1px solid rgba(91, 90, 90, 0.7);
    background: rgba(238, 236, 240, 0.2);
    box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset;
}
@font-face {
    font-family: 'FontomasCustomRegular';
    src: url('fonts/fontomas-webfont.eot');
    src: url('fonts/fontomas-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/fontomas-webfont.woff') format('woff'),
         url('fonts/fontomas-webfont.ttf') format('truetype'),
         url('fonts/fontomas-webfont.svg#FontomasCustomRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

/** the magic icon trick ! **/
[data-icon]:after {
    content: attr(data-icon);
    font-family: 'FontomasCustomRegular';
    color: rgb(106, 159, 171);
    position: absolute;
    left: 10px;
    top: 35px;
    width: 30px;
}
/*styling both submit buttons */
#wrapper p.button input{
    width: 30%;
    cursor: pointer;
    background: rgb(61, 157, 179);
    padding: 8px 5px;
    font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;
    color: #fff;
    font-size: 24px;
    border: 1px solid rgb(28, 108, 122);
    margin-bottom: 10px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    box-shadow:
        0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
        0px 0px 0px 3px rgb(254, 254, 254),
        0px 5px 3px 3px rgb(210, 210, 210);
    transition: all 0.2s linear;
}
#wrapper p.button input:hover{
    background: rgb(74, 179, 198);
}
#wrapper p.button input:active,
#wrapper p.button input:focus{
    background: rgb(40, 137, 154);
    position: relative;
    top: 1px;
    border: 1px solid rgb(12, 76, 87);
    box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset;
}
p.login.button,
p.signin.button{
    text-align: right;
    margin: 5px 0;
}
/* styling the checkbox "keep me logged in"*/
.keeplogin{
    margin-top: -5px;
}
.keeplogin input,
.keeplogin label{
    display: inline-block;
    font-size: 12px;
    font-style: italic;
}
.keeplogin input#loginkeeping{
    margin-right: 5px;
}
.keeplogin label{
    width: 80%;
}
p.change_link{
    position: absolute;
    color: rgb(127, 124, 124);
    left: 0px;
    height: 20px;
    width: 440px;
    padding: 17px 30px 20px 30px;
    font-size: 16px ;
    text-align: right;
    border-top: 1px solid rgb(219, 229, 232);
    border-radius: 0 0  5px 5px;
    background: rgb(225, 234, 235);
    background: repeating-linear-gradient(-45deg,
    rgb(247, 247, 247) ,
    rgb(247, 247, 247) 15px,
    rgb(225, 234, 235) 15px,
    rgb(225, 234, 235) 30px,
    rgb(247, 247, 247) 30px
    );
}
#wrapper p.change_link a {
    display: inline-block;
    font-weight: bold;
    background: rgb(247, 248, 241);
    padding: 2px 6px;
    color: rgb(29, 162, 193);
    margin-left: 10px;
    text-decoration: none;
    border-radius: 4px;
    border: 1px solid rgb(203, 213, 214);
    transition: all 0.4s  linear;
}
#wrapper p.change_link a:hover {
    color: rgb(57, 191, 215);
    background: rgb(247, 247, 247);
    border: 1px solid rgb(74, 179, 198);
}
#wrapper p.change_link a:active{
    position: relative;
    top: 1px;
}
#register{
    z-index: 21;
    opacity: 0;
}#toregister:target ~ #wrapper #register,
#tologin:target ~ #wrapper #login{
    z-index: 22;
    animation-name: fadeInLeft;
    animation-delay: .1s;
}.animate{
    animation-duration: 0.5s;
    animation-timing-function: ease;
    animation-fill-mode: both;
}
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}#toregister:target ~ #wrapper #login,
#tologin:target ~ #wrapper #register{
    animation-name: fadeOutLeftBig;
}

@keyframes fadeOutLeft {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-20px);
    }
}

的index.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Angular Js</title>
  <!-- load Bootstrap and custom style.css -->
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
  <link rel="stylesheet" href="main.css">
  <link rel="stylesheet" type="text/css" href="main.css">




<!--Login-->
<script src="https://cdn.firebase.com/js/simple-login/1.6.2/firebase-simple-login.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  <script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
  <script src="https://cdn.firebase.com/libs/angularfire/1.1.3/angularfire.min.js"></script>
<script src="main.js"></script>
</head>

<body ng-app="app" ng-controller = "ToDoController">

  <h1 style = "text-align:center;" id = "ToDoHeader">Todo List</h1>
  <input type="text" class="form-control" id="text" placeholder= "What Needs To Be Done?" ng-model = "textValue">
  <a class="button-0" ng-click = "submit()">Submit</a>


  <ul id = "tasks">



  <li  ng-repeat = "messages in toDo">{{messages.textValue}}</div>
  </li>
</ul>







  </body>

</html>




<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>

<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<script type="text/javascript" src="main.js"></script>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<link href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="main.css"> -->

的main.css:

#ToDoHeader{
  font-family : Impact;
  text-shadow: 2px 2px 5px blue;
  text-shadow: -1px -1px 1px #000, 1px 1px 1px #ccc;
   text-shadow: 0 1px 0 #999999, 0 2px 0 #888888,
             0 3px 0 #777777, 0 4px 0 #666666,
             0 5px 0 #555555, 0 6px 0 #444444,
             0 7px 0 #333333, 0 8px 7px rgba(0, 0, 0, 0.4),
             0 9px 10px rgba(0, 0, 0, 0.2);
  /* 16 * 0.0625 = 1px */
  letter-spacing: 0.0625em;
  font-size:100px;
}
#text{
  width:500px;
  position:relative;
  left:430px;
  top:40px;
  height:60px;
}
:placeholder-shown {
  font-family: "Times New Roman", Georgia, Serif;
  color:white;
  font-size:25px;
  opacity: 0.4;
  font-style: italic;
  font-weight:bold;

}
.button-0 {
    position: relative;
    bottom:20px;
    left:920px;
    height:60px;
    padding: 10px 40px;
    margin: 0px 10px 10px 0px;
    float: left;
    border-radius: 10px;
    font-family: 'Helvetica', cursive;
    font-size: 25px;
    color: #FFF;
    text-decoration: none;
    background-color: #3498DB;
    border-bottom: 5px solid #2980B9;
    text-shadow: 0px -2px #2980B9;
    /* Animation */
    transition: all 0.1s;
    -webkit-transition: all 0.1s;
}

.button-0:hover,
.button-0:focus {
    text-decoration: none;
    color: #fff;
}

.button-0:active {
    transform: translate(0px,5px);
    -webkit-transform: translate(0px,5px);
    border-bottom: 1px solid;
}
#tasks{
  position: relative;
  top:100px;
  text-align: left;
  right:50px;
  list-style-type: none;
  font-family : Impact;
  font-size:40px;
  text-align: center;
}

main.js:

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

app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
  $routeProvider
    .when('/login', {
      templateUrl: 'login.js',
      controller: 'loginController',
    })
    .when('/ToDo', {
      template: 'Loged In!'
    })
    .otherwise({
      redirectTo: '/login'
    });
}]);



app.controller("ToDoController", ["$scope", "$firebaseArray",
  function($scope, $firebaseArray) {
  var ref = new Firebase("https://todolistt.firebaseio.com/");
    $scope.toDo = $firebaseArray(ref);
    $scope.submit = function(){
      if(!($scope.textvalue == ""))
     ref.push({
       'textValue' :$scope.textValue
     })
    }

}
]);










/*
app.config(function($routeProvider){
  $routeProvider.
  when('/About', {
    templateUrl: 'About.html'
  })
  .otherwise({d
    redirectTo:'/'
  })

})*/

编辑问题

Here是我的Plunk。这里的问题是两件事,首先由于某种原因,我无法用login.html启动插件,第二个因为某些原因无法使用app.config。当我拿走app.config时,todo页面由于某种原因变得很好。三江源

3 个答案:

答案 0 :(得分:0)

您在js和视图中的应用名称不同,请更改

<body ng-app="loginApp" ng-controller = "loginController">

<body ng-app="app" ng-controller = "loginController">

答案 1 :(得分:0)

我更改了AngularJS引用,添加了JQuery(因为Bootstraps需要JQuery),添加了Angular-route并添加了 var dimensions = [ {dim: 590, token:'...'}, {dim: 800, token:'.....'}, {dim: 2500, token:'........'} ]; function getTokenForLargestDim(array) { if(array.length === 0) { throw new Error('Empty array'); } var maxDim = Number.NEGATIVE_INFINITY; var maxIndex = -1; for(var i=0; i < array.length; i++) { var lastDim = maxDim; if(dimensions[i].dim > maxDim) { maxDim = dimensions[i].dim; maxIndex = i;} } return array[maxIndex].token; } getTokenForLargestDim(dimensions); ,如前所述。

<强> Working Plunker.

这些是我添加的标签(按重要顺序,否则无法使用):

ngRoute

这在你的<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-route.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

main.js

答案 2 :(得分:0)

那么你不仅要做Goldowner和Sajeetharan之前提到的事情。实际上,您需要将ngroute模块包含在项目中。

  <script src="https://code.angularjs.org/1.3.15/angular-route.min.js"></script>

https://plnkr.co/edit/e4PsZ0WUpwjY4HH4FFzO

错误消息中的链接会告诉您。