ok, I have viewed the docs, and have directly taken this code from another project that works. I have no idea why, but i keep getting an unknown provider error. Ive run through all the possible problems that angular points out on their error reference, so if you are just going to link me there don't waste your time.
the error:
angular.js:13236 Error: [$injector:unpr] http://errors.angularjs.org/1.5.0/$injector/unpr?p0=waypointsProvider%20%3C-%20waypoints%20%3C-%20WaypointController
at Error (native)
at https://code.angularjs.org/1.5.0/angular.min.js:6:416
at https://code.angularjs.org/1.5.0/angular.min.js:43:7
at Object.d [as get] (https://code.angularjs.org/1.5.0/angular.min.js:40:270)
at https://code.angularjs.org/1.5.0/angular.min.js:43:69
at d (https://code.angularjs.org/1.5.0/angular.min.js:40:270)
at e (https://code.angularjs.org/1.5.0/angular.min.js:41:1)
at Object.instantiate (https://code.angularjs.org/1.5.0/angular.min.js:41:364)
at https://code.angularjs.org/1.5.0/angular.min.js:87:42
at A.link (https://code.angularjs.org/1.5.0/angular-route.min.js:7:274) <div ng-view="" class="ng-scope">
my index.html file:
<!DOCTYPE html>
<html>
<head>
<title>Appalachian App</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<script type="text/javascript" src="https://code.angularjs.org/1.5.0/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.5.0/angular-route.min.js"></script>
</head>
<body ng-app="atApp">
<h1 class="header">Yo</h1>
<div ng-view></div>
<!-- Modules -->
<script type="text/javascript" src="js/app.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="js/controllers/WaypointController.js"> </script>
<!-- Services -->
<script type="text/javscript" src="js/services/waypoints.js"></script>
</body>
</html>
my app.js file:
var app = angular.module('atApp', ['ngRoute']);
app.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'views/waypoint.html',
controller: 'WaypointController'
}).
otherwise({
redirectTo: '/'
});
}]);
my controller:
app.controller('WaypointController',[
'$scope','waypoints',
function($scope, waypoints){
$scope.helloWorld='hello world!';
$scope.ways = waypoints;
}]);
my service:
app.factory('waypoints', [function(){
var demo = [
{
name:"Milinockett",
date:"17 August 2015",
state:"Maine",
specificLocation:"motel",
startingPoint:true,
distanceFromStart:0,
distanceFromEnd:2189.0,
img:"https://56.media.tumblr.com/03645603932681733b6ae4b46d6c7abf/tumblr_o43w4sh5Zu1rrw1gjo1_540.jpg",
companions:"Vallone",
},
{
name:"Katahdin Stream Campground",
date:"18 August 2015",
state:"Maine",
specificLocation:"Baxter State Park Camp Site 21",
startingPoint:false,
distanceFromStart:5.2,
distanceFromEnd:2183.8,
img:"http://41.media.tumblr.com/1a0fd39fd0b14f83ce03151299c883f8/tumblr_o43w7109pQ1rrw1gjo1_1280.jpg",
companions:"Vallone",
},
];
return demo;
}]);
any help is appreciated
First things first. When you want to debug your application, do not use the minified, but the standard version of Angular. That will give you a far more descriptive error, which will guide you to the source of your issue.
Here's a working example: http://plnkr.co/edit/JANQwccTsyqPUTSYAZLv?p=preview . Your code (at least the part you included) looks good at first glance, so I hope this will give you an idea where you went wrong.
P.S. Using service vs. a factory will arguably give you a cleaner syntax:
function WaypointsService() {
this.getWaypoints = getWaypoints;
function getWaypoints() {
return [way1, way2, ...];
}
}
app.service('waypointsService', WaypointsService);
Place waypoints.js file before WaypointController.js
Have any error for JSON on the console. Nothing I found buggy in your code.
Try this code for your factory:
app.factory('Waypoints', Waypoints);
function Waypoints(){
var demo = [ { ... }, { ... }, ];
return{
getDemo: getDemo
}
function getDemo(){
return demo;
};
});
So in your controller inject Waypoints and get demo like:
$scope.ways = Waypoints.getDemo();
Related
I'm new to angularjs and followed the tutorial here from w3schools to create my first simple Angularjs app and it worked fine. After going through the official angularjs tutorial I decided to modularize my app but now its not working. Currently I m getting the error
"The controller with the name 'redController' is not registered."
I want to display a message in component 'red' using its controller. I tried altering many parts of the code only to get new errors and it seems I have messed up modularizing :|
I'm using v1.6.9
Here is my directory structure
app/
scripts/
angular.min.js
angular-route.js
blue/
blue.template.html
red/
red.template.html
red.module.js
red.component.js
app.config.js
app.module.js
index.html
and source files :
app.config.js
angular
.module("myApp", [ 'red','ngRoute' ])
.config(function($routeProvider) {
$routeProvider
.when("/red", {
templateUrl : "red/red.template.html",
controller: "redController"
})
.when("/blue", {
templateUrl : "blue/blue.template.html"
});
});
app.module.js
angular.module('myApp', [
'red',
'ngRoute'
]);
index.html
<!DOCTYPE html>
<html>
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.js"></script>
<script src="app.module.js"></script>
<script src="app.config.js"></script>
<script src="red/red.module.js"></script>
<script src="red/red.component.js"></script>
<body ng-app="myApp">
Red
Blue
<div ng-view></div>
<p>Click on the links to navigate "</p>
</body>
</html>
red.template.html
<h1>red</h1>
<p>{{msg}}</p>hell
red.module.js
angular.module('red', [ 'ngRoute' ]);
red.component.js
angular.module('red').component('red',{
templateUrl: 'red/red.template.html',
controller: function redController() {
this.msg = "this is red";
console.log("Hi");
}
});
You are delcaring the module again and again in each .js files, declare only in one .js file and use it in rest of the fields.
change your red.module.js as,
angular.module('red', []);
your app.config.js should be as,
angular
.module("myApp")
.config(function($routeProvider) {
$routeProvider
.when("/red", {
templateUrl : "red/red.template.html",
controller: "redController"
})
.when("/blue", {
templateUrl : "blue/blue.template.html"
});
});
and change the order as follows,
<script src="red/red.module.js"></script>
<script src="app.module.js"></script>
<script src="app.config.js"></script>
<script src="red/red.component.js"></script>
Change red.component.js as follows
angular.module('red')
.component('red',{
templateUrl:
'red/red.template.html',
})
.controller("redController",function($scope)
{
$scope.msg ="This is red";
});
First of all, as #Sajeetharan you're defining the myApp module twice. Inside your app.config.js and also in app.module.js. If you use angular.module with 2 parameters angular.module('app', []) you're setting the module, if you use angular.module('app') it'll work as a getter. So, in your app.config.js you should use the getter to configure your app.
Once you did that, you can configure your route to something like this:
angular.module('myApp').config(function($routeProvider){
$routeProvider.when('/red', { template: '<red></red>'});
})
I would use this approach since you defined the component in another module.
If you still want to use the approach you've implemented to set both the templateUrl and controller in the $routeProvider, you'll have to change your red component declaration to something like this:
angular.module('red')
.component('red', { templateUrl: 'red/red.template.html'})
.controller('redController', function(){
this.msg = 'This is red.';
});
I'vent tested this second approach as for me the first makes more sense.
trying to learn angluar route constructs but I fail on implementing ngRoute
The Definition of my app
var app= angular.module('app', ['ngMaterial', 'ngRoute']);
The configuration
app.config(['$routeProvider', function($routeProvider) {
$routeProvider.otherwise({redirectTo: '/'});
}]);
My directive to use the router
app.directive("applicationDirective", function($router) {
return {
restrict : "E",
templateUrl: 'app/templates/application.html',
controller: 'applicationController'
};
});
And my implemention in HTML
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-messages.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.js"></script>
<script src="app/app.js"></script>
Seems to be OK; but Fails... With:
angular.js:14525 Error: [$injector:unpr] Unknown provider: $routerProvider <- $router <- applicationDirectiveDirective
http://errors.angularjs.org/1.6.4/$injector/unpr?p0=%24routerProvider%20%3C-%20%24router%20%3C-%20applicationDirectiveDirective
at angular.js:66
at angular.js:4789
at Object.getService [as get] (angular.js:4944)
at angular.js:4794
at getService (angular.js:4944)
at injectionArgs (angular.js:4969)
at Object.invoke (angular.js:4995)
at angular.js:8110
at forEach (angular.js:403)
at Object.<anonymous> (angular.js:8108)
Has anybody got a hint how to solve it.
regards
n00n
You need to set routing in your config function. This directive is not needed and it doesn't work like this.
Check this out:
https://www.w3schools.com/angular/angular_routing.asp
I am trying to set up a project using gulp and browser sync with angularjs. I cannot get browser sync to work correctly when I use the ng-view tag in my index.html file. This is the error I get in my browser console when I run browser sync:
Uncaught TypeError: Cannot read property 'data1457531805746' of null
coming from browser-sync-client.2.11.1.js:204 It works as expected, page loads fine, when ng-view/ngRoute is not used.
These are my files:
./gulpfile.js
// Spin up a server
gulp.task('browserSync', function() {
browserSync.use(spa({
selector: "[ng-app]" //Only needed for angular apps
}));
browserSync.init({
port: 8080,
server: {
baseDir: path.src
}
})
});
// Watch for changes in files
gulp.task('watch', ['browserSync'], function() {
// Watch .js files -- removed for brevity
});
// Default Task
gulp.task('default', ['watch']);
./app/controllers/controllers.js
'use strict';
/* Controllers */
var dc4SearchControllers = angular.module('dc4SearchControllers', []);
dc4SearchControllers.controller('CompanySearchCtrl', ['$scope', '$http',
function($scope, $http){
$scope.test = 'Hello, world!';
}]);
./app/index.html
<html ng-app="dc4SearchApp">
<head>
<link href="/bower_components/webui-core/dist/webui-core.min.css" rel="stylesheet">
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/angular/angular.min.js"></script>
<script src="/bower_components/angular-route/angular-route.min.js"> </script>
<script src="/bower_components/lodash/lodash.min.js"></script>
<script src="/bower_components/webui-core/dist/webui-core.min.js"></script>
<script src="app.js"></script>
<script src="controllers/controllers.js"></script>
</head>
<body ng-view>
</body>
</html>
./app/app.js
'use strict';
/* App Module */
var dc4SearchApp = angular.module('dc4SearchApp', [
'ngRoute',
'dc4SearchControllers'
]);
dc4SearchApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/company-search', {
templateUrl: 'views/company-search.html',
controller: 'CompanySearchCtrl'
}).
otherwise({
redirectTo: '/company-search'
});
}]);
./app/views/company-search.html
<div ng-controller="CompanySearchCtrl">
{{test}}
<div class="spinner spin"> </div>
</div>
I am hoping this is just something silly and easy that I am over looking and haven't tried yet! Thanks in advance.
"Browsersync works by injecting an asynchronous script tag right after the body tag during initial request. In order for this to work properly the body tag must be present. Alternatively you can provide a custom rule for the snippet using snippetOptions"
https://www.npmjs.com/package/browser-sync
It seems Browsersync is reloading the body tag. Have you tried moving the ng-view to another child div ?
I am running Ionic and trying to use cordovaHTTP for SSL pinning. I followed the instructions on the the github but I get the error that the module isn't there.
My index.html
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
My app.js:
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'cordovaHTTP'])
In services.js:
angular.module('starter.services', [])
.service('MyService', function(cordovaHTTP) {
cordovaHTTP.enableSSLPinning(true, function() {
console.log('successful ssl pin');
cordovaHTTP.useBasicAuth("user", "pass", function() {
console.log('successful basic auth!');
cordovaHTTP.get(url, function(response) {
console.log(response.status);
}, function(response) {
console.error(response.error);
});
}, function() {
console.log('error basic auth');
});
}, function(){
console.log('error ssl pin');
});
});
This results in the error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module cordovaHTTP due to:
Error: [$injector:nomod] Module 'cordovaHTTP' 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.
I have tried messing with this countless times but no dice. Any help is appreciated.
Actually I think you're initializing your module multiple times. In angular factories / services are singleton. Your code look like something this
angular.module('starter', ['ionic', 'MyService', 'cordovaHTTP']) //setters for a module
Please make sure you're injecting right service or factory name. You should change your service declaration way too, like below
angular.module('starter') //Don't use [] it is only getter of above initialized module
.service('MyService', function(cordovaHTTP){
//Code
});
Also please don't forget to load app.js at last. Hope it may help you.
I found the solution from github issues.
Make sure that you load the angular js files after cordova js files in index.html.
Here's my index.html:
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/jquery/jquery-3.2.1.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/directives.js"></script>
<script src="js/services.js"></script>
Is angular defined?
cordova-HTTP will only instantiate the cordovaHTTP module if angular is defined otherwise it will fall back to window.cordovaHTTP.
You could use this this:
document.addEventListener("deviceready", function () {
console.log(window.cordovaHTTP);
console.log(window.CordovaHttpPlugin); // For some version it's instantiated in this name if angular is not defined.
}, false);
Manually bootstrap your AngularJS app instead of using the ng-app attribute.
Code:
<script>
angular.element(document).ready(function() {
document.addEventListener("deviceready", function () {
console.log(window.cordovaHTTP);
console.log(window.CordovaHttpPlugin); // For some version it's instantiated in this name if angular is not defined.
angular.bootstrap(document, ['MyAppName']);
}, false);
});
</script>
When using it in your controller or service, do not need to add the $.
Just use it like this:
angular.module('MyAppName.services', [])
.service('MyService', ['cordovaHTTP', function(cordovaHTTP){
// Your codes are here.
}]);
I was curious if anybody was familiar with separating routes from the main app config function. My route list is getting quite large and I wanted to move them into a separate file and load them into the main config. I have seen this done before but I cannot remember or find where I saw it. Any help would be appreciated.
You can (and should !) use AngularJS modules to separate your application into modules.
Then, each module can define its own routes (with its own .config).
Then, in your main module (usually "app"), you just need to require them as dependencies and you're set to go.
angular.module('blog', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
...
}];
angular.module('app', ['blog', 'user']);
Then you can have each module in its own file.
You can put your config function in a separate file easily:
App-config.js
angular.module('app').config(function(...){...});
Just make sure you include the module definition before you include App-config.js.
App-module.js
angular.module('app',[...]).controller(...).etc
It's easy to set up config file separately. There are few other ways to set this up, and I played around with those structure for config; this seems to work for me the best. Enjoy!
---> myApp.html
<html lang="en" ng-app="myApp">
<head>
<script src="lib/angular.min.js" type="text/javascript"></script>
<script src="lib/angular-route.min.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>
<script src="js/controller.js" type="text/javascript"></script>
...
</head>
<body ng-controller="MainCtrl">
<!-- /* Using ng-view with routeProvider to render page templates */ -->
<div data-ng-view></div>
</body>
</html>
----> app.js
'use strict';
angular.module('myApp', [
'ngRoute',
'ngAnimate',
'myApp.controllers'
]).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/page1', {
templateUrl : 'partials/page1.html',
controller : 'page1Controller'
});
$routeProvider.when('/page2', {
templateUrl : 'partials/page2.html',
controller : 'page2Controller'
});
$routeProvider.when('/images', {
templateUrl : 'partials/page3.html',
controller : 'page3Controller'
});
$routeProvider.otherwise({redirectTo: '/page1'});
}]);
--->controller.js
angular.module('myApp.controllers', ['myModules'])
.controller('mainCtrl', function($scope) {
...
})
.controller('page1', function($scope) {
...
})
.controller('page2', function($scope) {
...
})
.controller('page3', function($scope) {
...
});