2015-03-11 10 views
8

Come si crea un app Chrome, abbiamo messo gli script sulla proprietà di sfondo nella manifest.json file di (questo servirà come sfondo della pagina/evento dell'app). Quello che voglio è, voglio usare AngularJS su script di sfondo ma non so come. E inoltre, è possibile? Ho appena visto some answer ma è per le estensioni di Chrome. Ho provato ad usare questa soluzione nell'app chrome ma non ha funzionato.Chrome Packaged App - Usare AngularJS nella pagina di sfondo/evento

--EDIT--

Quello che ho fatto è stato, ho cambiato un po 'da file manifest.json

da questo ..

"app": { 
     "background": { 
      "scripts": ["assets/js/background.js"] 
     } 
    }, 

a questo ..

"app": { 
      "background": { 
       "page": "views/background.html" 
      } 
     }, 

e il mio background.html

<html ng-app="backgroundModule" ng-csp> 
    <head> 
     <meta charset="UTF-8"> 
     <title>Background Page (point background property here to enable using of angular in background.js)</title> 
    </head> 
    <body> 

     <!-- JAVASCRIPT INCLUDES --> 
     <script src="../assets/js/vendor/angular1.2.min.js"></script> 
     <script src="../assets/background.js"></script> 

    </body> 
</html> 

ei miei background.js

var backgroundModule = angular.module('backgroundModule', []); 

backgroundModule.run(function($rootScope, $http) { 
    $rootScope.domain = 'http://localhost/L&D/index.php'; 
    console.log($rootScope.domain); 
}); 

Ma ancora ho ottenuto un errore. e dice

" Resource interpreted as Script but transferred with MIME type text/html: "chrome-extension://pdknlhegnpbgmbejpgjodmigodolofoi/views/background.html" 
+0

da quando hai fatto un commento nella risposta a quel post che includeva un errore, forse potresti aggiungere l'errore alla tua domanda? – Claies

+0

Non riesco a vedere un problema reale in questa domanda. – Xan

+0

Potrebbe voler controllare http://stackoverflow.com/questions/3467404/chrome-says-resource-interpreted-as-script-but-transferred-with-mime-type-text –

risposta

9

Dopo alcune ricerche e letture, ho trovato la risposta. Per permetterci di utilizzare angularJS nel nostro cromo app sfondo della pagina (noto anche come evento pagina), dobbiamo fare quanto segue:

Modifica manifest.json in qualcosa di simile ..

--NOTE-- Leggi i commenti all'interno del codice

manifest.json

{ 

    "name": "L&D Chrome App", 
    "description": "Chrome App L&D", 
    "version": "0.1", 
    "manifest_version": 2, 
    "permissions": [ 
     "storage", 
     "unlimitedStorage", 
     "alarms", 
     "notifications", 
     "http://localhost/", 
     "webview", 
     "<all_urls>", 
     "fullscreen" 
    ], 
    "app": { 
     "background": { 
      // I realized lately that this is an array 
      // so you can put the background page, angular library, and the dependencies needed by the app 
      "scripts": [ 
       "assets/js/vendor/angular1.2.min.js", 
       "assets/js/services/customServices.js", 
       "assets/js/background.js" // this is our background/event page 
      ] 
     } 
    }, 
    "icons": { 
     "16": "assets/images/logo-16.png", 
     "128": "assets/images/logo-128.png" 
    } 

} 

E poi la nostra pagina di sfondo/evento

--NOTE-- Leggi i commenti all'interno del codice

chrome.app.runtime.onLaunched.addListener(function() { 

    // you can add more and more dependencies as long as it is declared in the manifest.json 
    var backgroundModule = angular.module('backgroundModule', ['customServices']); 

    // since we don't have any html doc to use ngApp, we have to bootstrap our angular app from here 
    angular.element(document).ready(function() { 
     angular.bootstrap(document, ['backgroundModule']); 
    }); 

    backgroundModule.run(function($rootScope, $http) { 
     // do some stuffs here 
     chrome.app.window.create('views/mainTemplate.html', { 
      'bounds': { 
       'width': window.screen.availWidth, 
       'height': window.screen.availWidth 
      }, 
      'state': 'maximized' 
     }); 
    }); 

}); 

E questo è tutto. Ora possiamo usare angularJS nella nostra pagina di background/evento. Spero che aiuti.

+0

All'inizio ho avuto qualche problema, ma ho chiamato '$ rootScope' solo' $ scope', che non funziona con il nome-DI-detection di angular. Spero che questo aiuti qualcuno – SkaveRat

Problemi correlati