Unable to add cordova plugin on angularJS

Question

I have an angularJS application. I want add ngCordova module to be enable using plugins of ngCordova ($cordovaNetwork). But I can't succeed to add ngCordova to my project. My angular project are created by Yeoman :

$ mkdir myFolderProjectAngular; cd myFolderProjectAngular
$ yo angular

Then, I add ngCordova :

$ bower install --save ngCordova
bower ngCordova#~0.1.23-alpha   cached git://github.com/driftyco/ng-cordova.git#0.1.23-alpha
bower ngCordova#~0.1.23-alpha validate 0.1.23-alpha against git://github.com/driftyco/ng-cordova.git#~0.1.23-alpha
bower ngCordova#*               cached git://github.com/driftyco/ng-cordova.git#0.1.23-alpha
bower ngCordova#*             validate 0.1.23-alpha against git://github.com/driftyco/ng-cordova.git#*
bower ngCordova#~0.1.23-alpha  install ngCordova#0.1.23-alpha

My bower.json is automatically updated :

{
  "name": "test-network",
  "version": "0.0.0",
  "dependencies": {
    "angular": "^1.4.0",
    "bootstrap": "^3.2.0",
    "angular-route": "^1.4.0",
    "ngCordova": "~0.1.23-alpha"
  },
  "devDependencies": {
    "angular-mocks": "^1.4.0"
  },
  "appPath": "app",
  "moduleName": "testNetworkApp",
  "overrides": {
    "bootstrap": {
      "main": [
        "less/bootstrap.less",
        "dist/css/bootstrap.css",
        "dist/js/bootstrap.js"
      ]
    }
  }
}

I manually add two lines on index.html :

<script src="/lib/ngCordova/dist/ng-cordova.js"></script>
<script src="/cordova.js"></script>

When I run "grunt serve" to test, my index.html is edited, the two previous line are disapear and replace by :

 <script src="bower_components/ngCordova/dist/ng-cordova.js"></script>

When I try to add cordova plugin, I have the error :

Error: Current working directory is not a Cordova-based project.

I don't understand the problem .

This is my folder project

.
├── app/
├── bower_components
│   ├── angular/
│   ├── angular-mocks/
│   ├── angular-route/
│   ├── bootstrap/
│   ├── jquery/
│   └── ngCordova
│       ├── bower.json
│       ├── CHANGELOG.md
│       ├── dist/
│       │   ├── ng-cordova.js
│       │   ├── ng-cordova.min.js
│       │   ├── ng-cordova-mocks.js
│       │   └── ng-cordova-mocks.min.js
│       ├── LICENSE
│       ├── package.json
│       └── README.md
├── bower.json
├── Gruntfile.js
├── node_modules/
├── package.json
├── README.md
└── test/

Edit : I solved my first problem by changing folder. I create first a global folder with cordova

cordova create myApp com.organisation.myapp MyApp

On this folder I create angular project

yo angular MyApp

After, I can add ngCordova with bower and add cordova plugin.

My problem, I can't use function of plugin. On app.js, I have :

angular.module('myAppApp', ['ngRoute', 'ngCordova' ]) ...

and on main.js, I have for example (with Toast plugin) :

 angular.module('myAppApp')
  .controller('MainCtrl', function ($scope, $cordovaToast) {
    console.log(">"); 
    $cordovaToast.show('Here is a message', 'long', 'center')
    .then(function(success) {
      // success
    }, function (error) {
      // error
    });
   console.log("<")
});

main.js:12:4 Error: $window.plugins is undefined .show@http://localhost:9000/bower_components/ngCordova/dist/ng-cordova.js:6593:9 @http://localhost:9000/scripts/controllers/main.js:13:4 invoke@http://localhost:9000/bower_components/angular/angular.js:4523:14 instantiate@http://localhost:9000/bower_components/angular/angular.js:4531:27 $ControllerProvider/this.$gethttp://localhost:9000/bower_components/angular/angular.js:9197:18 ngViewFillContentFactory/<.link@http://localhost:9000/bower_components/angular-route/angular-route.js:977:26 invokeLinkFn@http://localhost:9000/bower_components/angular/angular.js:8841:9 nodeLinkFn@http://localhost:9000/bower_components/angular/angular.js:8335:1 compositeLinkFn@http://localhost:9000/bower_components/angular/angular.js:7731:13 publicLinkFn@http://localhost:9000/bower_components/angular/angular.js:7611:30 createBoundTranscludeFn/boundTranscludeFn@http://localhost:9000/bower_components/angular/angular.js:7749:1 controllersBoundTransclude@http://localhost:9000/bower_components/angular/angular.js:8362:18 update@http://localhost:9000/bower_components/angular-route/angular-route.js:935:25 $RootScopeProvider/this.$gethttp://localhost:9000/bower_components/angular/angular.js:16374:15 commitRoute/<@http://localhost:9000/bower_components/angular-route/angular-route.js:619:15 processQueue@http://localhost:9000/bower_components/angular/angular.js:14792:28 scheduleProcessQueue/<@http://localhost:9000/bower_components/angular/angular.js:14808:27 $RootScopeProvider/this.$gethttp://localhost:9000/bower_components/angular/angular.js:16052:16 $RootScopeProvider/this.$gethttp://localhost:9000/bower_components/angular/angular.js:15870:15 $RootScopeProvider/this.$gethttp://localhost:9000/bower_components/angular/angular.js:16160:13 done@http://localhost:9000/bower_components/angular/angular.js:10589:36 completeRequest@http://localhost:9000/bower_components/angular/angular.js:10787:7 requestLoaded@http://localhost:9000/bower_components/angular/angular.js:10728:1

Edit : I have found my mistake. Some functionality doesn't work on browser.

cagica cagica · Accepted Answer · 2015-11-27T15:12:00

You may have some task in gruntfile, that is injecting the script in your index.html, and that's why your import's changes.

Unable to add cordova plugin on angularJS

2 Answers