Reputation: 1009

angular ng-view phonegap is not working

I am trying to make basic app with angularjs and phonegap in android. But it doesn't seem to be working. Below are my source code files:

index.html

    <!DOCTYPE html>
<html ng-app="main-app">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Insert title here</title>
</head>
<body>
<div class="body-content" ng-controller="MainCtrl">
    <div class="loader-ajax" ng-show="isViewLoading"></div>
    <div ng-view></div>
</div>
    <script src="js/angular.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="cordova-2.3.0.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript">
            app.initialize();
    </script>
</body>
</html>

main.js

var mobileApp = angular.module("main-app", []);

mobileApp.config(function ($routeProvider,$compileProvider) {

    $routeProvider
        .when("/",
        {
            templateUrl: "partial/home.html",
            controller: "homeController"
        })
        .when("/home",
        {
            templateUrl: "partial/home.html",
            controller: "homeController"
        });
    $compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
});
mobileApp.controller("MainCtrl",function($scope){
    alert('Coming here');
    $scope.isViewLoading=true;
});
mobileApp.controller("homeController",function($scope){
    alert('Home Coming here');

});

index.js

var app = {
    initialize: function() {
        this.bind();
    },
    bind: function() {
        document.addEventListener('deviceready', this.deviceready, false);
    },
    deviceready: function() {
        // note that this is an event handler so the scope is that of the event
        // so we need to call app.report(), and not this.report()
        app.report('deviceready');
        angular.bootstrap(document, ['main-app']);
    },
    report: function(id) { 
        console.log("report:" + id);
    }
};

When the app is getting load, router doesn't seem to work as its not getting into Homecontroller.

From what I have ready everywhere else, this code should work. Any help would be greatly appreciated.

Upvotes: 0

angular ng-view phonegap is not working

Answers (3)

Related Questions