个人中心
gpt4 book ai didi

angularjs - OnsenUi Angular 和登录

转载 作者：行者123 更新时间：2023-12-03 06:55:47 25 4
gpt4 key购买 nike

我正在尝试使用 onsen+cordova 开发移动应用

我需要的是:

当应用程序启动时，它会加载login.html页面。如果应用程序检测到用户已登录，则会重定向到 home.html

对于每个“ protected 页面”，我想调用一个函数来检测用户是否已登录。如果没有，我想重定向到登录页面。

所有“ protected 页面”都有一个滑动菜单。

按照我所做的:

index.html

<html ng-app="app2gest">
    <head>
        <meta charset="utf-8">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"/>

        <title>App2Gest</title>

        <link rel="stylesheet" type="text/css" href="vendors/onsen/css/onsenui.css"/>

        <link rel="stylesheet" type="text/css" href="vendors/onsen/css/onsen-css-components.css"/>

        <!-- Download also your onsen-css-components.css stylesheet using the integrated CSS Components Theme Roller
        http://components.onsenui.io -->

        <link rel="stylesheet" type="text/css" href="vendors/onsen/css/onsen-css-components-blue-theme.css"/>
        <!--<link rel="stylesheet" type="text/css" href="vendors/onsen/css/onsen-css-components-default.css"/>-->
        <!--<link rel="stylesheet" type="text/css" href="vendors/onsen/css/onsen-css-components-blue-basic-theme.css"/> -->
        <!--<link rel="stylesheet" type="text/css" href="vendors/onsen/css/onsen-css-components-dark-theme.css"/> -->
        <!--<link rel="stylesheet" type="text/css" href="vendors/onsen/css/onsen-css-components-sunshine-theme.css"/> -->
        <!--<link rel="stylesheet" type="text/css" href="vendors/onsen/css/onsen-css-components-purple-theme.css"/> -->

        <link rel="stylesheet" type="text/css" href="css/angular-carousel.css"/>

        <!-- NVD3 re-usable charting library (based on D3) -->
        <link rel="stylesheet" type="text/css" href="css/nvd3/nv.d3.min.css">

        <link rel="stylesheet" type="text/css" href="css/style.css"/>

    </head>
    <body>

        <ons-sliding-menu menu-page="menu.html" main-page="login.html" side="left" max-slide-distance="85%" swipable="true" swipe-target-width="100" var="menu">
        </ons-sliding-menu>

        <!-- Javascripts -->
        <script type="text/javascript" src="vendors/onsen/js/angular/angular.js"></script>    
        <script type="text/javascript" src="js/angular-touch.js"></script>

        <script type="text/javascript" src="vendors/onsen/js/onsenui.js"></script>        

        <script type="text/javascript" src="js/lodash.underscore.min.js"></script>
        <script type="text/javascript" src="js/bluebird.js"></script>        

        <script type="text/javascript" src="js/event.js"></script>        
        <script type="text/javascript" src="js/angular-local-storage.js"></script>
        <script type="text/javascript" src="js/angular-sanitize.js"></script>        


        <script type="text/javascript" src="js/app.js"></script>
        <script type="text/javascript" src="js/data.js"></script>
        <script type="text/javascript" src="js/app-local-storage.js"></script>

        <script src="js/jquery-1.11.1.min.js"></script>    

        <script type="text/javascript" src="cordova.js"></script>

        <script type="text/javascript">
            app.initialize();
        </script>                        


    </body>
</html>

home.html 

 <ons-page ng-controller="HomeController" ng-init="LoginUtility.checkLogin()">

        <ons-toolbar fixed-style>
            <div class="left">
                <ons-toolbar-button onclick="ons.slidingMenu.toggleMenu()">
                    <ons-icon icon="bars">
                </ons-toolbar-button>
            </div>

            <div class="center">App2Gest</div>

            <div class="right">
                <ons-toolbar-button onclick="appNavigator.pushPage('settings.html', {title: 'Settings', animation: 'slide'})">
                    <ons-icon icon="gears">
                </ons-toolbar-button>
            </div>
        </ons-toolbar>

        <ons-scroller>
            <section class="home-grid">
                <div class="grid-menu">
                    <div class="centering-and-alignment" ng-repeat="row in items| partition:2">
                        <div class="grid-menu-item list__item list__item--tappable" ng-repeat="item in row" ng-click="showDetail(($parent.$index * row.length) + $index);">
                            <ons-icon icon="{{item.icon}}"></ons-icon>
                            <div class="grid-menu-item-label">{{item.title}}</div>
                        </div>                                                
                    </div>
                </div>               
            </section>

        </ons-scroller>

        <div>

        </div>

    </ons-page>

login.html

<ons-navigator title="Navigator" var="appNavigator">
    <ons-page sliding-menu-ignore="true" ng-controller="LoginController" ng-init="LoginUtility.checkLogin()">

        <ons-toolbar>
            <div class="left">           
            </div>
            <div class="center">App2Gest - Login</div>
        </ons-toolbar>

        <div class="main-image-wrapper">
            <i class="fa fa-sign-in main-image"></i>
        </div>
        <form ng-submit="LoginUtility.login()">
            <input type="email" class="text-input--underbar" placeholder="Username" value="" ng-model="username">
            <input type="password" class="text-input--underbar" placeholder="Password" value="" ng-model="password">
            <br>
            <button class="button login-button">Log in</button>
            <br>
        </form>    

    </ons-page>


</ons-navigator>

app.js

var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);

    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicity call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');

        ons.setDefaultDeviceBackButtonListener(function() {
            if (navigator.notification.confirm("Vuoi chiudere l\'app?",
                    function(index) {
                        if (index == 1) { // OK button
                            navigator.app.exitApp(); // Close the app
                        }
                    }
            ))
                ;
        });

        // Open any external link with InAppBrowser Plugin
        $(document).on('click', 'a[href^=http], a[href^=https]', function(e) {

            e.preventDefault();
            var $this = $(this);
            var target = $this.data('inAppBrowser') || '_blank';

            window.open($this.attr('href'), target);

        });

        // Initialize Push Notifications
        // Uncomment the following initialization when you have made the appropriate configuration for iOS - http://goo.gl/YKQL8k and for Android - http://goo.gl/SPGWDJ
        //app.initPushwoosh();

    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        //var parentElement = document.getElementById(id);
        //var listeningElement = parentElement.querySelector('.listening');
        //var receivedElement = parentElement.querySelector('.received');

        //listeningElement.setAttribute('style', 'display:none;');
        //receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    },
    // Register device for Push Notifications
    initPushwoosh: function() {
        var pushNotification = window.plugins.pushNotification;

        if (device.platform == "Android") {
            registerPushwooshAndroid();
        }
        if (device.platform == "iPhone" || device.platform == "iOS") {
            registerPushwooshIOS();
        }
    }

};

(function() {
    var app = angular.module('app2gest', ['onsen.directives', 'ngTouch', 'ngSanitize', 'appLocalStorage', 'LocalStorageModule', 'ui.event']);


    app.controller("LoginController", function($scope, LoginUtility) {                  

           $scope.LoginUtility = LoginUtility;
           $scope.LoginUtility.setScope($scope);                                                                               
    });

    // Home Controller
    app.controller('HomeController', function($scope, Data, LoginUtility) {

        $scope.items = Data.items;

        $scope.LoginUtility = LoginUtility;
        $scope.LoginUtility.setScope($scope);

        $scope.showDetail = function(index) {
            var selectedItem = $scope.items[index];
            Data.selectedItem = selectedItem;
            if (selectedItem.type === 'internal') {
                $scope.ons.navigator.pushPage(selectedItem.url, {title: selectedItem.title, animation: 'slide'});
            }
            else {
                window.open(selectedItem.url);
            }
        };


    });



    app.controller('CaricoHomeController', function($scope) {

    });

    // Menu Controller
    app.controller('MenuController', function($scope, MenuData) {

        $scope.items = MenuData.items;

        $scope.showDetail = function(index) {
            var selectedItem = $scope.items[index];
            MenuData.selectedItem = selectedItem;

            $scope.ons.slidingMenu.setMainPage(selectedItem.page, {closeMenu: true});

        };

    });




    // Barcodescanner Controller
    app.controller('BarcodescannerController', function($scope) {

        $scope.scan = function() {
            cordova.plugins.barcodeScanner.scan(function(result) {
                $scope.result = result;
                $scope.$apply();
            }, function(error) {
                $scope.error = error;
                $scope.$apply();
            });
        }

    });

    //dummy implementation 
    app.factory('LoginUtility', function() {

        var username;
        var password;
        var scopeVar;

        var loginObj = {};

        loginObj.setScope = function(elem) {
            scopeVar = elem;
        };

        loginObj.isGuest = function() {
            return username == null;
        };

        loginObj.login = function() {
            console.log('login called');
            username = scopeVar.username;
            password = scopeVar.password;
            //dummy login, we assume login always succeded
            scopeVar.ons.slidingMenu.setMainPage("home.html", {closeMenu: true});
        };

        loginObj.logout = function() {
            username = null;
        };

        loginObj.checkLogin = function() {               
            if (this.isGuest() && **imNotInLoginPage()**) {                  
                scopeVar.ons.slidingMenu.setMainPage("login.html", {closeMenu: true});
            }            
        };

        return loginObj;
    });



    // Filter
    app.filter('partition', function($cacheFactory) {
        var arrayCache = $cacheFactory('partition');
        var filter = function(arr, size) {
            if (!arr) {
                return;
            }
            var newArr = [];
            for (var i = 0; i < arr.length; i += size) {
                newArr.push(arr.slice(i, i + size));
            }
            var cachedParts;
            var arrString = JSON.stringify(arr);
            cachedParts = arrayCache.get(arrString + size);
            if (JSON.stringify(cachedParts) === JSON.stringify(newArr)) {
                return cachedParts;
            }
            arrayCache.put(arrString + size, newArr);
            return newArr;
        };
        return filter;
    });


})();

对于应用程序开头的虚拟函数imNotInLoginPage()，如果使用appNavigator.getCurrentPage()，它可以工作，但appNavigator.getCurrentPage().page为空

登录后，如果我调用appNavigator.getCurrentPage()，它是未定义的，并且我收到一个js未定义错误。

如何检查我是在登录页面还是在另一个页面？

还有一个非常大的问题，这是 Angular 方面的一个很好的实践吗？

否则我怎样才能用 Angular+onsen 实现这个目标？？？

温泉主题的支持很差。我找到了其他涉及 Angular 路线的解决方案，但与温泉不兼容。

我为实现这个标准而疯狂。希望有人能帮助我，提供完整的示例代码。

谢谢

最佳答案

我创建了示例。如果我误解了你的意思，请告诉我。

index.html

 <!DOCTYPE HTML>
<html ng-app="myApp">
<head>
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="js/app.js"></script>    
</head>
<body>
    <ons-navigator var="myNavigator" page="login.html">
    </ons-navigator> 
</body>
</html>

app.js

var myApp = angular.module("myApp", ['onsen']);

myApp.controller('loginCtrl', function($scope) {

    if(checkLogin()) {
        openProtectedPage();
    }

    function openProtectedPage() {
        alert("you are already logged in. open protected page");
        setTimeout(function() {
            myNavigator.pushPage('protected.html');    
        }, 1000);

    }

    function checkLogin() {
        //temporariry return true;
        // please write your own logic to detect user login;
        return true;
    }    
});

登录.html

<ons-page ng-controller="loginCtrl">
    <ons-toolbar>
        <div class="center">Login Page</div>
    </ons-toolbar>

    <div style="text-align: center; margin-top: 30px;">
        Email: <input type="text" />
    </div>

    <div style="text-align: center; margin-top: 30px;">
        Password: <input type="text" />
    </div>  

    <div style="text-align: center;margin-top: 30px;">
        <ons-button>
            Sign In 
        </ons-button>
    </div>
</ons-page>

protected .html

<ons-page>
    <ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1.html" side="left" type="overlay" max-slide-distance="200px">
    </ons-sliding-menu>
</ons-page>

希望这个例子能对您有所帮助。

关于angularjs - OnsenUi Angular 和登录，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27401544/

25 4 0
文章推荐： angularjs - 从子模态 Controller 调用父 Controller 方法(ui bootstrap)
文章推荐： javascript - 通过单击堆叠的条形图打开选项卡
文章推荐： javascript - 带有 Chrome 可执行文件的 Puppeteer 中的外部资源无法加载 (net::ERR_EMPTY_RESPONSE)
文章推荐： javascript - 确定多个 XPath 的存在和值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com