Question

我不能让这件事起作用，这是超级压力和混乱。

我想定义一个Angular服务并在Angular控制器中使用它。该服务知道用户是否已登录，如果不是，控制器会将用户重定向到登录页面。

mainservice.ts

/// <reference path="assets/angular.d.ts"/>

module OdgApp
 {
    export class MyMainService  
    {
        constructor() 
        {
            console.log("MyMainService constructor");
            this.autenticato = false;
        }

        public Autenticato():boolean 
        {
            return this.autenticato;
        }

        public SetAutenticato(nuovoValore:boolean):void 
        {
            this.autenticato = nuovoValore;
        }

        private autenticato: boolean;
    }

    angular
        .module("OdgApp")
        .service("MyMainService", MyMainService);
}

第一个问题，模块名称是否必须与Angular模块名称相同？这令人困惑。我打电话给OdgApp。

然后我想在登录控制器中使用该服务：

loginctrl.ts

/// <reference path="assets/angular.d.ts"/>
/// <reference path="mymainservice.ts"/>  //IS THIS REQUIRED??

//import ms = require("mymainservice.OdgApp"); //IS THIS REQUIRED?


module OdgApp
{
    'use strict';
   //export interface IController {} //IS THIS REQUIRED?


    export class LoginCtrl  //DO I HAVE TO implement IController?
    {
        static $inject = ['$location', 'MyMainService'];  

        constructor(private $location: ng.ILocationService, private servizio: MyMainService)  
        {
            console.log("LoginCtrl constructor");
            this.erroreLogin = false;
        }

        public utentePasswordVuoti() : boolean
        {
            if ( ! (this.utente && this.password) )
                return true;

            return false;
        }

        public faiLogin() : boolean
        {
            console.log("utente: " + this.utente);
            console.log("passwd: " + this.password);

            //TODO: call http service to check for authentication 
            if ( true ) //  simulation
            {
                this.erroreLogin = false;

                this.servizio.SetAutenticato(true);

                this.$location.path('/home');
            }

            return true;
        }


        private utente: string;
        private password: string;
        private erroreLogin: boolean;
    }

    angular
        .module("OdgApp")
        .controller("LoginCtrl", LoginCtrl); 
}

主要模块位于 app.ts ：

/// <reference path="assets/angular.d.ts"/>
/// <reference path="assets/angular-route.d.ts"/>

module OdgApp // the same as Angular module? 
{
    'use strict';

    var main = angular.module("OdgApp", 
        [
            "ngRoute", 
            "LoginCtrl",
            "MyMainService" // Do I need to reference this here?
        ]);


    routeConfig.$inject = ["$routeProvider"];

    function routeConfig($routeProvider: ng.route.IRouteProvider): void
    {
        $routeProvider
            .when("/login", 
            {
                templateUrl: "/login.html",
                controller: "LoginCtrl as vm"
            })
            .when("/home", 
            {
                templateUrl: "/home.html",
                controller: "LoginCtrl as vm"
            })
            .otherwise(
            {
                redirectTo: "/login"
            });
    }

    main.config(routeConfig);
}

三个html文件：

的index.html

<!DOCTYPE html>
<html ng-app="OdgApp">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Ordine Del Giorno</title>

        <link href="assets/bootstrap.min.css" rel="stylesheet">
        <link href="assets/bootstrap-theme.css" rel="stylesheet" />     
        <link href="assets/odg.css" rel="stylesheet">

        <script src="assets/angular.js"></script>
        <script src="assets/angular-route.js"></script>
        <script src="javascripts/app.js"></script>
        <script src="javascripts/mymainservice.js"></script>
        <script src="javascripts/loginctrl.js"></script>
        <script src="javascripts/mainctrl.js"></script>
    </head>

    <body ng-controller="MainCtrl as ctrl">
        <ng-view></ng-view>
    </body>

</html>

的login.html

 <div class="container" ng-controller="LoginCtrl as vm">
    LOGIN
</div>  <!-- /container -->

home.html的

<div class="container" ng-controller="LoginCtrl as login" >
    HOME PAGE
</div>  <!-- /container -->

这一切都编译但运行它会给我以下错误：

错误：[$ injector：modulerr]无法实例化OdgApp模块到期 to：错误：[$ injector：modulerr]无法实例化模块LoginCtrl 由于：错误：[$ injector：nomod]模块'LoginCtrl'不可用！您要么错误拼写了模块名称，要么忘记加载它。如果注册模块确保您将依赖项指定为第二个论点。

我需要指出正确的方向，这一切都令人困惑！

这是一个吸虫： https://plnkr.co/edit/DW2AOXeytfFA76xFvbFx?p=info

AngularJS和TypeScript - 定义要在控制器中使用的服务

0 个答案: