从Angular.js开始

时间:2016-02-19 17:37:44

标签: javascript html angularjs

我创建了像

这样的app.js
var app = angular.module('AngularAuthApp', ['ngRoute', 'LocalStorageModule', 'angular-loading-bar']);

App.config(function ($routeProvider) {

    $routeProvider.when("/admin", {
        controller: "loginController",
        templateUrl: "/app/views/login.html"
    });



    $routeProvider.otherwise({ redirectTo: "/admin" });

});

并在index.html的标题中

<!DOCTYPE html>
<html data-ng-app="AngularAuthApp">
<head>
    <title></title>
    <meta charset="utf-8" />
</head>
<body>

<!-- Load app main script -->

    <script src="scripts/angular.min.js"></script>
    <script src="scripts/angular-route.min.js"></script>
    <script src="app/app.js?v=2"></script>

</body>
</html>

但是当http://localhost:18992/#/admin类型没有出现时我的意思是登录界面没有出现,我是否遗漏了login.html的样子               ArabTone |登录               

<!-- login section starts here -->
<article class="LoginCon">
    <div class="container">

        <!-- logo section starts here  -->
        <article class="LoginConLogo"> <a href="#"><img src="images/logo.png" alt="" title=""></a> </article>
        <!-- logo section ends here  -->
        <!-- middle content section starts here  -->
        <article class="LoginConLogin">
            <h2>Use a account to login</h2>
            <article class="inputCon">
                <!-- input for username starts here -->
                <div class="input-icon">
                    <i class="fa fa-user"></i>
                    <input class="form-control placeholder-no-fix" type="text" autocomplete="off" placeholder="Username" name="username">
                </div>
                <!-- input for username ends here -->
                <!-- input for password starts here -->
                <div class="input-icon">
                    <i class="fa fa-lock"></i>
                    <input class="form-control placeholder-no-fix" type="password" autocomplete="off" placeholder="Password" name="password">
                </div>
                <!-- input for password ends here -->
            </article>
            <!-- submit btn starts here -->
            <article class="inputBTn">
                <input type="submit" value="Login">
            </article>
            <!-- submit btn ends here -->
        </article>
        <!-- midle content section ends here  -->
        <!-- footer section starts here -->
        <article class="footerCon">&copy;2014 My ASp.Net MVC Application</article>
        <!-- footer section ends here -->


    </div>
</article>

<!-- login section ends here -->

我在控制台

中收到此错误
19:48:06.761 Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=AngularAuthApp&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.0%2F%24injector%2Fmodulerr%3Fp0%3DLocalStorageModule%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.5.0%252F%2524injector%252Fnomod%253Fp0%253DLocalStorageModule%250AH%252F%253C%2540http%253A%252F%252Flocalhost%253A18992%252Fscripts%252Fangular.min.js%253A6%253A416%250Ake%252F%253C%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%253A18992%252Fscripts%252Fangular.min.js%253A25%253A136%250Ab%2540http%253A%252F%252Flocalhost%253A18992%252Fscripts%252Fangular.min.js%253A24%253A188%250Ake%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%253A18992%252Fscripts%252Fangular.min.js%253A24%253A1%250Ag%252F%253C%2540http%253A%252F%252Flocalhost%253A18992%252Fscripts%252Fangular.min.js%253A39%253A287%250An%2540http%253A%252F%252Flocalhost%253A18992%252Fscripts%252Fangular.min.js%253A7%253A353%250Ag%2540http%253A%252F%252Flocalhost%253A18992%252Fscripts%252Fangular.min.js%253A39%253A135%250Ag%252F%253C%2540http%253A%252F%252Flocalhost%253A18992%252Fscripts%252Fangular.min.js%253A39%253A304%250An%2540http%253A%252F%252Flocalhost%253A18992%252Fscripts%252Fangular.min.js%253A7%253A353%250Ag%2540http%253A%252F%252Flocalhost%253A18992%252Fscripts%252Fangular.min.js%253A39%253A135%250Afb%2540http%253A%252F%252Flocalhost%253A18992%252Fscripts%252Fangular.min.js%253A43%253A164%250AAc%252Fc%2540http%253A%252F%252Flocalhost%253A18992%252Fscripts%252Fangular.min.js%253A20%253A449%250AAc%2540http%253A%252F%252Flocalhost%253A18992%252Fscripts%252Fangular.min.js%253A21%253A259%250Afe%2540http%253A%252F%252Flocalhost%253A18992%252Fscripts%252Fangular.min.js%253A20%253A69%250A%2540http%253A%252F%252Flocalhost%253A18992%252Fscripts%252Fangular.min.js%253A306%253A372%250Ab%2540http%253A%252F%252Flocalhost%253A18992%252Fscripts%252Fangular.min.js%253A183%253A440%250ARf%2540http%253A%252F%252Flocalhost%253A18992%252Fscripts%252Fangular.min.js%253A36%253A475%250AQf%252Fd%2540http%253A%252F%252Flocalhost%253A18992%252Fscripts%252Fangular.min.js%253A36%253A424%250A%0AH%2F%3C%40http%3A%2F%2Flocalhost%3A18992%2Fscripts%2Fangular.min.js%3A6%3A416%0Ag%2F%3C%40http%3A%2F%2Flocalhost%3A18992%2Fscripts%2Fangular.min.js%3A40%3A60%0An%40http%3A%2F%2Flocalhost%3A18992%2Fscripts%2Fangular.min.js%3A7%3A353%0Ag%40http%3A%2F%2Flocalhost%3A18992%2Fscripts%2Fangular.min.js%3A39%3A135%0Ag%2F%3C%40http%3A%2F%2Flocalhost%3A18992%2Fscripts%2Fangular.min.js%3A39%3A304%0An%40http%3A%2F%2Flocalhost%3A18992%2Fscripts%2Fangular.min.js%3A7%3A353%0Ag%40http%3A%2F%2Flocalhost%3A18992%2Fscripts%2Fangular.min.js%3A39%3A135%0Afb%40http%3A%2F%2Flocalhost%3A18992%2Fscripts%2Fangular.min.js%3A43%3A164%0AAc%2Fc%40http%3A%2F%2Flocalhost%3A18992%2Fscripts%2Fangular.min.js%3A20%3A449%0AAc%40http%3A%2F%2Flocalhost%3A18992%2Fscripts%2Fangular.min.js%3A21%3A259%0Afe%40http%3A%2F%2Flocalhost%3A18992%2Fscripts%2Fangular.min.js%3A20%3A69%0A%40http%3A%2F%2Flocalhost%3A18992%2Fscripts%2Fangular.min.js%3A306%3A372%0Ab%40http%3A%2F%2Flocalhost%3A18992%2Fscripts%2Fangular.min.js%3A183%3A440%0ARf%40http%3A%2F%2Flocalhost%3A18992%2Fscripts%2Fangular.min.js%3A36%3A475%0AQf%2Fd%40http%3A%2F%2Flocalhost%3A18992%2Fscripts%2Fangular.min.js%3A36%3A424%0A
H/<() angular.min.js:6
g/<() angular.min.js:40
n() angular.min.js:7
g() angular.min.js:39
fb() angular.min.js:43
Ac/c() angular.min.js:20
Ac() angular.min.js:21
fe() angular.min.js:20
<anonymous> angular.min.js:306
b() angular.min.js:183
Rf() angular.min.js:36
Qf/d() angular.min.js:36
1 angular.min.js:6:416

1 个答案:

答案 0 :(得分:1)

file login.js:

app.controller('loginController', function () {
  });

文件app.js:

app.config

而不是

App.config

app是您为其分配模块的变量。

file index.html

<script src="scripts/login.js"></script>

对于复杂的身份验证,在您完成基础知识教程后 - 可能是谷歌的5步教程。转到login tutorial