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.
Related
I am learning and experimenting with multiple views and routing. For this reason, I have written three files test.html, controllers.js, and app.js. When I run the application, ideally the view1 should display the message and view2 should display date time. But it is just displaying two tabs as view 1 and view 2 and the message and dates are not being displayed. I am trying to figure out what I am doing wrong.
My test.html
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>AngularJS Routing</title>
<link rel="stylesheet" href="css/app.css"/>
</head>
<body>
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-view></div>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular/angular-route.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</body>
</html>
my app.js
'use strict';
angular.module('myApp',['myApp.controllers','ngRoute']);
angular.module('myApp').config(function($routeProvider){
$routeProvider.when('/view1',{
controller: 'Controller1',
templateUrl: 'partials/view1.html'
}).when('/view2',{
controller: 'Controller2',
templateUrl: 'partials/view2.html'
});
});
my controllers.js
'use strict';
angular.module('myApp.controllers',[]).
controller('Controller1',function($scope){
$scope.message="Hello, world";
}).controller('Controller2',function($scope){
$scope.now=new Date();
});
Kindly let me know where I am doing wrong.
Load your controller.js ahead of app.js since the module myApp is dependent on the myApp.controllers
<script src="js/controllers.js"></script>
<script src="js/app.js"></script>
DEMO
I am trying to learn AngularJS. I have a navigation setup as a view and I cannot get it to display. When I look in the inspector i see <!-- ngInclude: views/nav.html -->.
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>The ToDo List</title>
<script type="text/javascript" src="assets/js/lib/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.firebase.com/js/client/2.0.4/firebase.js"></script>
<script type="text/javascript" src="https://cdn.firebase.com/libs/angularfire/0.9.0/angularfire.min.js"></script>
<script type="text/javascript" src="assets/js/lib/angular-route.min.js"></script>
<script type="text/javascript" src="assets/js/lib/angular-animate.min.js"></script>
<script type="text/javascript" src="assets/js/app.js"></script>
<script type="text/javascript" src="assets/js/controllers/activetaskscontoller.js"></script>
</head>
<body>
<div class="navigation" ng-include="views/nav.html"></div>
Here is my app.js
var myApp = angular.module('myApp',
['ngRoute', 'firebase', 'appControllers']);
var appControllers = angular.module('appControllers', ['firebase']);
myApp.config(['$routeProvider',function($routeProvider) {
$routeProvider.
when('/active-tasks', {
templareUrl: 'views/active-tasks.html',
controller: 'ActiveTasksController',
}).
when('/completed-tasks', {
templareUrl: 'views/completed-tasks.html',
controller: 'CompletedTasksController',
}).
otherwise({
redirectTo: '/active-tasks'
});
}]);
ng-include is expecting a string and not a path.
Try changing to this:
<div class="navigation" ng-include="'views/nav.html'"></div>
You can read more about the subject here: AngularJS ng-include does not include view unless passed in $scope
I am just starting study Angular and trying example from book, but my simple routing doesn't work.
I have updated code as was recommended in the answers
Here is index.html:
<html ng-app="airline">
<head>
<title>Demo</title>
<script type="text/javascript" src="js/lib/angular.min.js"></script>
<script type="text/javascript" src="js/lib/angular-route.min.js"></script>
<script type="text/javascript" src="js/lib/angular-resource.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/app.js"></script>
</head>
<body>
<div class="container" ng-controller="AppCtrl">
<h1>AngulAir</h1>
<div ng-view></div>
</div>
</body>
</html>
Here is app.js:
angular.module('airline', ['ngRoute'])
.config(airlineRouter);
function airlineRouter ($routeProvider) {
info('1');
$routeProvider
.when('/', {template: '<h3>test</h3>'})
};
When I refresh the page I don't have 'test' in the browser and don't have alert message. Why ? What I am missing ?
Update
Here is a full code example: https://github.com/demas/ang_test
Latest angular library use external router so you need to inject ngRoute and pass it as:
angular.module('airline', ['ngRoute'])
You are missing ngRoute directive. Download ng-route.js file and reference it in your HTML like;
<script type="text/javascript" src="js/lib/angular-route.js"></script>
And change your app.js like
angular.module('airline', ['ngRoute'])
.config(airlineRouter);
function airlineRouter ($routeProvider) {
info('1');
$routeProvider
.when('/', {template: '<h3>test</h3>'})
};
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.
Hey i've started learning angularJS and i'm quite new to it so i gues my best bet is to ask someone.
So my $routeProvider is not routing me to anything really when i run it it wont load any partials.
The current code i'm using.
angular.module("list" , ['ngRoute' ])
config(function ($routeProvider) {
$routeprovide.
when("/", {templateUrl:"/partials/list.html"})
})
My index.html
<!doctype html>
<html ng-app="list">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/Style.css">
<link rel="stylesheet" href="css/bootstrap.css">
<title>Angular Routing!</title>
</head>
<body>
<div ng-controller="AppCtrl" class="container">
<a href="#lijst">
<h2>The List!</h2>
</a>
<div ng-view> </div>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>
Edit: I run it by using a USBWebserver app
Console Errors:
> Failed to load resource: the server responded with a status of 404 (Not Found)
http://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js
Uncaught ReferenceError: config is not defined main.js:2
Uncaught Error: Bootstrap requires jQuery bootstrap.js:7
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.7/$injector/modulerr?p0=list&p1=Error%3A%20…20at%20e%20(http%3A%2F%2Flocalhost%3A8080%2Fjs%2Fangular.min.js%3A29%3A115) angular.min.js:30
First of all, your angular-route.js must be included after angular itself
Second, you are using some routeprovide, and $routeProvider is injected
You should do this:
angular.module("list" , ['ngRoute' ]).
config(function ($routeProvider) {
$routeProvider.
when("/", {templateUrl:"/partials/list.html"})
});
You also forgot point before config method.
And this:
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-route.js"></script>
And, it seems, your Bootstrap.js requires jQuery to be included before it.