Angular UI路由器不适用于chrome应用答案

【问题标题】：Angular UI router not working on chrome appAngular UI路由器不适用于chrome应用
【发布时间】：2016-08-19 20:38:06
【问题描述】：

我正在使用 angularjs 和 angular-ui-router 创建一个 chrome 应用程序。

app.js

var foo = angular.module('foo', [
    'ui.router',
])
.config(['$stateProvider', '$locationProvider',
    function($stateProvider, $locationProvider) {

    console.log("This works fine.");

    $stateProvider
        .state('login', {
            url: '/',
            templateUrl: 'modules/login/templates/login.html',
            controller: 'loginController'
        })

}])

login.js

foo.controller('loginController',
    ['$scope',
    function($scope){

    console.log("This should be printed on the console.");

}])

window.html

<!DOCTYPE html>
<html ng-app="mycurechrome">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="components/chromestrap/js/jquery-2.0.3.min.js"></script>
    <script src="components/chromestrap/js/bootstrap.min.js"></script>

    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>

    <script src="app.js"></script>
    <script src="modules/login/controllers/login.js"></script>

    <link href="components/chromestrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/window.css" rel="stylesheet">

</head>
<body>
    <div ui-view></div>
</body>
</html>

manifest.json

{
    "name": "foo",
    "description": "bar",
    "version": "0.1",
    "manifest_version": 2,
    "app": {
        "background": {
            "scripts": [
                "background.js"
            ]
        }
    },
    "icons": { "16": "icon-16.png", "128": "icon-128.png" }
}

background.js

chrome.app.runtime.onLaunched.addListener(function() {
    chrome.app.window.create('window.html', {
        'outerBounds': {
            'width': 1000,
            'height': 600
        }
    });
});

在app.js 上，console.log("This works fine."); 被执行，但login.js 上的 log() 没有。

我认为我使用 ui-router 并没有错，但我持怀疑态度，因为 google chrome 应用程序可能有不同的方法。

【问题讨论】：

标签： javascript angularjs google-chrome google-chrome-app

【解决方案1】：

尝试导航到登录状态，如果这是您的默认状态尝试：

.config(['$stateProvider', '$locationProvider', '$urlRouterProvider',
    function($stateProvider, $locationProvider, $urlRouterProvider) {

    console.log("This works fine.");
    $urlRouterProvider.otherwise('/login');
    $stateProvider
        .state('login', {
            url: '/login',
            templateUrl: 'modules/login/templates/login.html',
            controller: 'loginController'
        });

}]);

【讨论】：