角度ng-viewrouting在PhoneGap中不起作用

角度ng-viewrouting在PhoneGap中不起作用,第1张

角度ng-view / routing在PhoneGap中不起作用

在搜索了几个问题和论坛之后,我终于使它可靠地工作了。这就是我从一个干净的PhoneGap项目中运行它所需要的。

index.html

<!DOCTYPE html><html ng-app="App"><head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />    <meta name="format-detection" content="telephone=no" />    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />    <link rel="stylesheet" type="text/css" href="css/index.css" />    <title>Hello World</title></head><body>    <a href="#/">Main View</a>    <a href="#/view">New View</a>    <div ng-view></div>    <!-- Libs -->    <script type="text/javascript" src="lib/cordova-2.5.0.js"></script>    <script type="text/javascript" src="lib/angular-1.0.5.js"></script>    <!-- App -->    <script type="text/javascript" src="js/index.js"></script>    <script type="text/javascript" src="js/routers.js"></script>    <script type="text/javascript" src="js/controllers.js"></script>    <script type="text/javascript">        app.initialize();    </script></body></html>

注意

<html ng-app="App">
标签。如果没有该指令的值,该应用程序将无法加载,因此请确保其中包含一个。

index.js

var app = {    initialize: function() {        this.bindEvents();    },    bindEvents: function() {        document.addEventListener('deviceready', this.onDeviceReady, true);    },    onDeviceReady: function() {        angular.element(document).ready(function() { angular.bootstrap(document);        });    },};

在此文件中,当PhoneGap触发

'ondeviceready'
事件时,我们将手动引导Angular 。

routers.js

angular.module('App', []).config(function ($compileProvider){    $compileProvider.urlSanitizationWhitelist(/^s*(https?|ftp|mailto|file|tel):/);}).config(function ($routeProvider) {    $routeProvider    .when('/', {        controller: TestCtrl,        templateUrl: 'partials/main.html'    })    .when('/view', {        controller: ViewCtrl,        templateUrl: 'partials/view.html'    });});

该文件中有两个重要内容。首先,我们使用之前在中使用的相同名称创建模块

<html np-app="App">
。其次,我们需要将路由器配置为将文件URI列入白名单。我个人不需要这个,但是似乎有几个人遇到了这个问题,因此我将其包括在内。

controllers.js

function TestCtrl($scope) {    $scope.status = "It works!";}function ViewCtrl($scope) {    $scope.status = "Also totally works!";}

最后,只是一些基本的控制器。

我已经在这里创建了一个github存储库。

希望这对其他人有帮助。



欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/5427924.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-12-11
下一篇 2022-12-11

发表评论

登录后才能评论

评论列表(0条)

保存