Question

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

我需要的是：

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

对于每个受保护的页面＆＃34;我想调用一个检测用户是否被记录的函数。如果不是我想重定向到登录页面。

所有受保护的网页＆＃34;有一个幻灯片菜单。

遵循我所做的：

的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未定义的错误。

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

这个非常大的问题，这是一个很好的角度吗？

否则我怎么能用角+ +来实现这个目标？

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

我为实施这个标准事物而疯狂。我希望有人可以帮助我，提供完整的示例代码。

谢谢

Answer 1

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

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

的login.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>

我希望这个例子可以帮助你。

OnsenUi Angular和登录

1 个答案: