一个简单的hello world angularjs代码不能与cordova android一起使用

时间:2016-02-11 09:40:57

标签: angularjs cordova

的index.html

<body>
    <div ng-app="myapp">
        <div ng-controller="HelloController" >
           <h2>Welcome {{hello.title}} to the world Mr. {{hello.myname}}!</h2>
        </div>
    </div>
    <script src="cordova.js"></script>
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="js/index.js"></script> 
</body>

index.js

document.addEventListener('deviceready', function() {
    var myapp = angular.module("myapp", []);
    myapp.controller("HelloController", function($scope) {
        console.log("inside controller");
        $scope.hello = {};
        $scope.hello.title = "AngularJS";
        $scope.hello.myname = "hello";
    });
}, false);

logcat

中显示错误
02-11 14:52:19.835: I/chromium(2955): [INFO:CONSOLE(40)] "Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=myapp&p1=Error%3A%20%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.0%2F%24injector%2Fnomod%3Fp0%3Dmyapp%0A%20%20%20%20at%20Error%20(native)%0A%20%20%20%20at%20file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fbower_components%2Fangular%2Fangular.min.js%3A6%3A416%0A%20%20%20%20at%20file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fbower_components%2Fangular%2Fangular.min.js%3A25%3A136%0A%20%20%20%20at%20b%20(file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fbower_components%2Fangular%2Fangular.min.js%3A24%3A188)%0A%20%20%20%20at%20file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fbower_components%2Fangular%2Fangular.min.js%3A24%3A431%0A%20%20%20%20at%20file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fbower_components%2Fangular%2Fangular.min.js%3A39%3A357%0A%20%20%20%20at%20n%20(file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fbower_components%2Fangular%2Fangular.min.js%3A7%3A355)%0A%20%20%20%20at%20g%20(file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fbower_components%2Fangular%2Fangular.min.js%3A39%3A135)%0A%20%20%20%20at%20fb%20(file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fbower_components%2Fangular%2Fangular.min.js%3A43%3A164)%0A%20%20%20%20at%20Ac.c%20(file%3A%2F%2F%2Fandroid_asset%2Fwww%2Fbower_components%2Fangular%2Fangular.min.js%3A20%3A449)", source: file:///android_asset/www/bower_components/angular/angular.min.js (40)

catlog中显示的详细错误

02-11 15:35:37.334: E/Web Console(24865): Uncaught Error: [$injector:nomod] Module 'myapp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

我缺少什么,相同的代码在浏览器中工作

1 个答案:

答案 0 :(得分:1)

我建议你使用RequireJS技术

它需要多个文件,如下所示

的index.html

<body>
    <div id="controller" ng-app="app" ng-controller="HelloController" style="display:none">
          <h2>Welcome {{hello.title}} to the world Mr. {{hello.myname}}!</h2>
    </div>
    <script src="cordova.js"></script>
    <script src="bower_components/requirejs/require.js" data-main="js/main.js"></script>
</body>

main.js

require.config({
    paths: {
        'domReady': '../bower_components/domReady/domReady',
        'angular': '../bower_components/angular/angular'
    },
    shim: {
        'angular': {
            exports: 'angular'
        }
    },
    deps: ['./bootstrap']
});

bootstrap.js

define(['require','angular','app'], function (require, ng) {
    require(['domReady!'], function (document) {
        ng.bootstrap(document, ['app']);
    });
});

app.js

define(['angular'], function (ng) {
    var mod = ng.module('app', []);
    mod.controller("HelloController", function($scope) {
        $scope.hello = {
            title: "angularjs",
            myname: "hello"
        }
        document.getElementById("controller").style.display = "block";
    });
    return mod;
});

我们在require.config中使用 shim 的原因是angularJS不支持AMD,因此我们通过RequireJS将其公开为对象

我使用了document.getElementById(&#34; controller&#34;)。style.display =&#34; block&#34 ;;避免模​​板html在没有渲染值的情况下出现