I am trying to build a Phonegap application using Angular.js
I am trying to this: When a user logs in, a heading will be displayed to the user.
I have directive in directive.js :
angular.module('myApp')
.directive('ngHeaderline', ['Auth', function(Auth) {
return {
templateUrl: '/views/partials/header.html',
replace: true,
scope: true,
link: function($scope) {
$scope.isAuthenticated = Auth.isLoggedIn;
$scope.logout = Auth.logout();
}
}
}]);
And let's presume all the elements are there. Auth factory and the template (everything is displaying fine when I test it on Chrome browser)
And then in my index.html I have:
<body>
<div ng-headerline></div>
<div class="main-content">
<div ng-errorline></div>
<div ng-loadingline></div>
<div ng-view=""></div>
</div>
<!-- Foundation JS dependencies -->
<script src="bower_components/foundation/js/vendor/custom.modernizr.js"></script>
<script src="bower_components/foundation/js/foundation/foundation.js"></script>
<script src="scripts/vendor/cordova.js"></script>
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/jquery.formatDateTime/jquery.formatDateTime.js"></script>
<script src="bower_components/jquery-ui/ui/jquery-ui.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/foundation/js/foundation/foundation.js"></script>
<script src="bower_components/foundation/js/foundation/foundation.topbar.js"></script>
<script src="scripts/controllers/main.js"></script>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>
</body>
And my header.html partial looks like this:
<div class="app">
<div ng-show="isAuthenticated()">
My Header
</div>
</div>
To repeat, everything is showing correctly when I est it on browser, but when I compile with Phonegap and deploy to the Android device, header is not showing.
What could be the problem?
I had this same exact problem actually. Your problem is here:
templateUrl: '/views/partials/header.html',
You need to remove that initial slash and use a relative path. In my case I had '/scripts/directives/templates/bottom-menu.html' and my template did not work. I removed the first slash and it worked perfectly.
The reason is that when it's deployed to android these files are no longer in the root directory, so that first slash breaks the path.
Related
I'm fairly new to AngularJS, and I'm attempting to set up routing on my basic app.
My app.js:
var app = angular.module("StarWarsApp", ['ngRoute', 'ne.swapi']);
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'views/home.html'
})
.otherwise({
redirectTo: '/'
});
});
My index.html:
<head>
<script type="text/javascript" src="js/vendor/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
</head>
<body ng-app="StarWarsApp" \>
<div class="container">
<div ng-view></div>
</div>
<!-- Modules -->
<script type="text/javascript" src="js/app.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="js/controllers/HomeController.js"></script>
<!-- Services -->
<script type="text/javascript" src="js/services/charactersList.js"></script>
<script type="text/javascript" src="node_modules/ne-swapi/dist/ne-swapi.min.js"></script>
</body>
</html>
When I load home.html directly, I see the contents of it properly, but it won't appear in my ng-view and I can't figure out why. I'm sure I missed something very basic, but I've no idea. Any ideas?
What you posted works correctly without your controller, service, and ne.swapi, so the error is likely there. However the code for your controller & service was not posted here.
One idea I have from referencing the ne.swapi documentation-check that you are loading 'swapi' after $scope in the controller if you are using ne.swapi. Again, since your controller was not posted I am not sure if this is causing the issue.
app.controller("Test", function($scope, swapi){
$scope.test = "Hey";
});
I have a working plunker here, I hope referencing it will help you find the error. https://plnkr.co/edit/9hD490m7nZxSTQPDTN0J?p=preview
Issues Found:
There is an unexpected character in the body tag. Remove that first.
Also, you have added the 'ne.swapi' dependency in app.js. So, its script should be added before inserting app.js.
<script type="text/javascript" src="js/vendor/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
<script type="text/javascript" src="node_modules/ne-swapi/dist/ne-swapi.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
Also, it would be good to add scripts in the bottom of the body tag. Otherwise. it might affect the page rendering speed. This is a suggestion. This won't cause the issue you have now.
I'm testing the Angular framework, and my last tests are being based on the routing thingy.
I was making an example in which I have the typical project setup: source folder with index.html, which has this:
<!DOCTYPE HTML>
<html ng-app="test">
<head>
<!-- Plugins/Frameworks !-->
<script type="text/javascript" src="plugins/angular.js"></script>
<script type="text/javascript" src="plugins/angular-route.js"></script>
<!-- JS !-->
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
<script type="text/javascript" src="js/directives.js"></script>
<script type="text/javascript" src="js/services.js"></script>
<!-- Stylesheets !-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
<div ng-view>
</div>
</body>
</html>
And then, the folders js (with controllers, directives, module definition...), css, and plugins (where I have the angular.js and angular-route.jos).
This is what I have in my module definition at js/app.js:
var app = angular.module('test', ['ngRoute', 'controllers', 'directives', 'services']);
app.config(['$routeProvider',function($routeProvider) {
$routeProvider.
when('/index', {
templateUrl: 'templates/main.html',
controller: 'mainCtrl'
}).
otherwise({
redirectTo: '/index'
});
}]);
It should work when inputting localhost/testSite/index, retrieving me to this template:
<div class="page-header">
<h1>Test site<small>For test purposes</small></h1>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 sidebar">
Test, test, test!
</div>
... shouldn't it? Well, it doesn't.
I'm having this error each time I access my index.html:
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0-rc.1/$injector/modulerr?p0=test&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.0-rc.1%2F%24injector%2Fmodulerr%3Fp0%3Ddirectives%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.5.0-rc.1%252F%2524injector%252Fnomod%253Fp0%253Ddirectives%250AP%252F%253C%2540http%253A%252F%252Flocalhost%252FtestSite%252Fplugins%252Fangular.js%253A6%253A421%250Afe%252F%253C%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%252FtestSite%252Fplugins%252Fangular.js%253A25%253A136%250Ab%2540http%253A%252F%252Flocalhost%252FtestSite%252Fplugins%252Fangular.js%253A24%253A188%250Afe%252F%253C%252F%253C%2540http%253A%252F%252Flocalhost%252FtestSite%252Fplugins%252Fangular.js%253A24%253A1%250Ag%252F%253C%2540http%253A%252F%252Flocalhost%252FtestSite%252Fplugins%252Fangular.js%253A39%253A201%250An%2540http%253A%252F%252Flocalhost%252FtestSite%252Fplugins%252Fangular.js%253A7%253A364%250Ag%2540http%253A%252F%252Flocalhost%252FtestSite%252Fplugins%252Fangular.js%253A39%253A49%250Ag%252F%253C%2540http%253A%252F%252Flocalhost%252FtestSite%252Fplugins%252Fangular.js%253A39%253A218%250An%2540http%253A%252F%252Flocalhost%252FtestSite%252Fplugins%252Fangular.js%253A7%253A364%250Ag%2540http%253A%252F%252Flocalhost%252FtestSite%252Fplugins%252Fangular.js%253A39%253A49%250Agb%2540http%253A%252F%252Flocalhost%252FtestSite%252Fplugins%252Fangular.js%253A43%253A53%250Azc%252Fc%2540http%253A%252F%252Flocalhost%252FtestSite%252Fplugins%252Fangular.js%253A20%253A421%250Azc%2540http%253A%252F%252Flocalhost%252FtestSite%252Fplugins%252Fangular.js%253A21%253A225%250Aae%2540http%253A%252F%252Flocalhost%252FtestSite%252Fplugins%252Fangular.js%253A20%253A41%250A%2540http%253A%252F%252Flocalhost%252FtestSite%252Fplugins%252Fangular.js%253A304%253A355%250Ab%2540http%253A%252F%252Flocalhost%252FtestSite%252Fplugins%252Fangular.js%253A181%253A440%250AMf%2540http%253A%252F%252Flocalhost%252FtestSite%252Fplugins%252Fangular.js%253A36%253A391%250ALf%252Fd%2540http%253A%252F%252Flocalhost%252FtestSite%252Fplugins%252Fangular.js%253A36%253A340%250A%0AP%2F%3C%40http%3A%2F%2Flocalhost%2FtestSite%2Fplugins%2Fangular.js%3A6%3A421%0Ag%2F%3C%40http%3A%2F%2Flocalhost%2FtestSite%2Fplugins%2Fangular.js%3A39%3A475%0An%40http%3A%2F%2Flocalhost%2FtestSite%2Fplugins%2Fangular.js%3A7%3A364%0Ag%40http%3A%2F%2Flocalhost%2FtestSite%2Fplugins%2Fangular.js%3A39%3A49%0Ag%2F%3C%40http%3A%2F%2Flocalhost%2FtestSite%2Fplugins%2Fangular.js%3A39%3A218%0An%40http%3A%2F%2Flocalhost%2FtestSite%2Fplugins%2Fangular.js%3A7%3A364%0Ag%40http%3A%2F%2Flocalhost%2FtestSite%2Fplugins%2Fangular.js%3A39%3A49%0Agb%40http%3A%2F%2Flocalhost%2FtestSite%2Fplugins%2Fangular.js%3A43%3A53%0Azc%2Fc%40http%3A%2F%2Flocalhost%2FtestSite%2Fplugins%2Fangular.js%3A20%3A421%0Azc%40http%3A%2F%2Flocalhost%2FtestSite%2Fplugins%2Fangular.js%3A21%3A225%0Aae%40http%3A%2F%2Flocalhost%2FtestSite%2Fplugins%2Fangular.js%3A20%3A41%0A%40http%3A%2F%2Flocalhost%2FtestSite%2Fplugins%2Fangular.js%3A304%3A355%0Ab%40http%3A%2F%2Flocalhost%2FtestSite%2Fplugins%2Fangular.js%3A181%3A440%0AMf%40http%3A%2F%2Flocalhost%2FtestSite%2Fplugins%2Fangular.js%3A36%3A391%0ALf%2Fd%40http%3A%2F%2Flocalhost%2FtestSite%2Fplugins%2Fangular.js%3A36%3A340%0A
What may be causing this?
This errors messages are really annoying to read but here is the transalation : no mod 'directives' for module 'test' :
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0-rc.1/$injector/modulerr?p0=test&p1=%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.5.0-rc.1%2F%24injector%2Fmodulerr%3Fp0%3Ddirectives%26p1%3D%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252F1.5.0-rc.1%252F%2524injector%252Fnomod%253Fp0%253Ddirectives
SO check your declaration of your module directives.
I am trying to learn how to use AngularJS and AngularJS Material using following codes:
<!doctype html>
<html lang="en">
<head>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-route/angular-route.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<script>
angular.module('F1FeederApp', [ 'ngMaterial' ]).controller('driversController',
function($scope) {
}).config(
function($mdThemingProvider) {
$mdThemingProvider.theme('default').primaryPalette('pink')
.accentPalette('orange');
});
;
</script>
<!-- default themes and core styles -->
<link rel="stylesheet"
href="bower_components/angular-material/angular-material.css">
</head>
<body ng-app="F1FeederApp">
<md-content>
<md-toolbar class="md-tall md-accent">
<h2 class="md-toolbar-tools">
<span>Toolbar: tall (md-accent)</span>
</h2>
</md-toolbar>
<ng-view></ng-view>
</md-content>
<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>
However, the Material is not displayed. What could be wrong with my code?
Console in Browser doesn't give me any error.
Just tried your code and it works fine on Chrome, FireFox, and Safari.
By the way, you have an extra ; before your closing script tag
<script>
angular.module('F1FeederApp', [ 'ngMaterial' ]).controller('driversController',
function($scope) {
}).config(
function($mdThemingProvider) {
$mdThemingProvider.theme('default').primaryPalette('pink')
.accentPalette('orange');
});
;
</script>
I recommend you to check your angular and angular material versions,
or check if there is a problem in your .js files.
I am trying this angular app for first time. I did a setup as per webstorm and bower components and installed angularjs packages in webstorm
My AngularJS App
-->
</script>-->
myapp = angular.module('myapp', []);
</script>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<div ng-view></div>
<div>Angular seed app: v<span app-version></span></div>
<!-- actual angular code bloack in div -->
<div id="main" ng-app = "app">
<nav class = "{{active}}" ng-click="$event.preventDefault">
Home
Projects
services
Contact
<p ng-hide="active">Please click a menu item</p>
<p ng-show="active">you choose<b> {{active}}</b></p>
</nav>
</div>
<!-- <script src="bower_components/angular/angular.js"></script>-->
<!-- <script src="bower_components/angular-route/angular-route.js"></script>
<script src="app.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>-->
</body>`enter code here`
</html>
ng-app="myapp" should be place in the body or where all the angular meta tags are inside of it, in your case the body, as you see is currently outside.
Also in ng-app you should put exactly the same name that you put in the declaration of the module.
angular.module([MODULE_NAME], []);
Just modify your HTML like that :
<body ng-app="myapp">
instead of
<div id="main" ng-app = "app">
ng-app directive must be placed at the top of your site and take the name you've declared in the module. Moreover, if you let <div ng-view></div> outside of ng-app like you do in your code sample ng-view will not work.
I was just testing out angular and am wonder why nothing is showing up when I load up the page. I installed AngularJS through Package install already. Is there something wrong here?
HTML
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="Journal.css">
<title>Henry's journal</title>
</head>
<body>
<div ng-app="journal">
<div header></div>
</div>
<div>
<script type="text/javascript" src="Journal.js"></script>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type ="text/javascript"
src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js">
</script>
</body>
</html>
JAVASCRIPT
var journal = angular.module("journal", []);
journal.directive("header", function(){
return{
restrict: 'A',
link: function(){
alert("I'm working");
},
template: "<div>Hello!</div>"
};
});
You need to load AngularJS and jQuery before running your own script. Like so:
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type ="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"> </script>
<script type="text/javascript" src="Journal.js"></script>
(Additionally, you might be running into a different issue if you are testing locally using the file:// protocol. I'm not sure, but just in case: you'll have to specify a HTTP[s] protocol to load AngularJS: http://ajax.googleapis.com... instead of //ajax.googleapis.com...)
you have to add ng-app in the first HTML tag.
<html ng-app>
<!-- ...head...body -->
</html>
Perhaps this is an easier version of your app:
<html ng-app="journal">
<script type ="text/javascript"
src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js">
</script>
<title>jojo</title>
<div ng-controller="hola">
</div>
<script>
angular.module("journal", [])
.controller("hola", function($scope){
alert('HOLEAAA!');
})
</script>
</html>
Thanks.