Can you help me please? I try to render page with AngularJS. Page has been rendered, but in console of browser it give me error.
app.js (main angular file)
var DevApp = angular.module("DevApp", [ 'ngRoute' ])
.config(['$routeProvider',function($routeProvider) {
$routeProvider.when('/', { templateUrl: 'tpl/index.html', controller: "MainCtrl" })
.otherwise({
url: '/',
controller: "MainCtrl",
templateUrl: "tpl/index.html"
});
}])
.controller('MainCtrl', [
'$scope',
'$http',
'$routeParams',
'$element',
'$timeout',
function($scope, $http, $routeParams, $element, $timeout) {
console.log(1);
}
]);
tpl/index.html (temppate of MainCtrl)
<div ng-controller="MainCtrl">
Главная страница
</div>
index.html (main file)
<!DOCTYPE html>
<html ng-app="DevApp">
<head>
<link rel="stylesheet" href="/bootstrap/dist/css/bootstrap.min.css">
<script type="text/javascript" src="/javascripts/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/javascripts/angular/angular.min.js"></script>
<script type="text/javascript" src="/javascripts/angular/angular-route.js"></script>
<script type="text/javascript" src="/javascripts/angular/app.js"></script>
<script type="text/javascript" src="/bootstrap/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div ng-view></div>
</body>
</html>
I receive error:
angular.js:12416
Error: [$injector:unpr] http://errors.angularjs.org/1.4.5/$injector/unpr?p0=%24elementProvider%20%3C-%20%24element%20%3C-%20MainCtrl
at Error (native)
at http://127.0.0.1:3000/javascripts/angular/angular.min.js:6:416
at http://127.0.0.1:3000/javascripts/angular/angular.min.js:40:307
at Object.d [as get] (http://127.0.0.1:3000/javascripts/angular/angular.min.js:38:308)
at http://127.0.0.1:3000/javascripts/angular/angular.min.js:40:381
at d (http://127.0.0.1:3000/javascripts/angular/angular.min.js:38:308)
at e (http://127.0.0.1:3000/javascripts/angular/angular.min.js:39:64)
at Object.instantiate (http://127.0.0.1:3000/javascripts/angular/angular.min.js:39:213)
at http://127.0.0.1:3000/javascripts/angular/angular.min.js:80:257
at link (http://127.0.0.1:3000/javascripts/angular/angular-route.js:977:26) <div ng-view="" class="ng-scope">
Unknown provider: $elementProvider <- $element <- MainCtrl, which means that the $element could not be injected in your MainCtrl.
Try this
var DevApp = angular.module("DevApp", [ 'ngRoute' ])
DevApp.config(['$routeProvider',function($routeProvider) {
$routeProvider.when('/', { templateUrl: 'tpl/index.html', controller: "MainCtrl" })
.otherwise({
url: '/',
controller: "MainCtrl",
templateUrl: "tpl/index.html"
});
}])
DevApp.controller('MainCtrl', [
'$scope',
'$http',
'$routeParams',
'$element',
'$timeout',
function($scope, $http, $routeParams, $element, $timeout) {
console.log(1);
}
]);
I didn't test your code but maybe there is typo in the router declaration ( there is no 'url' param )
.config(['$routeProvider',function($routeProvider) {
$routeProvider.
when('/', { templateUrl: 'tpl/index.html', controller: "MainCtrl" })
otherwise({
redirectTo: '/'
});
}])
Related
Scenario is,
Im new to AngularJS and making an AngularJS with AngularFire, I have defined my routing bye using $routeProvider ,see below
var appMainModule = angular.module('appMain', [ 'firebase','ngRoute'])
.config(function ($routeProvider, $locationProvider) {
$routeProvider.when('/', { templateUrl: '/Templates/CustomerLogin.html', controller: 'HomeCtrl' });
$routeProvider.when('/customer/home', { templateUrl: '/Templates/CustomerHome.html' , controller:'ForLogout'});
$routeProvider.when('/customer/singup', { templateUrl: '/Templates/CustomerSinup.html', controller: 'RegisterCtrl' });
$routeProvider.when('/dashboard/godash', { templateUrl: '/Templates/dashboard.html', controller: 'DashboardCtrl' });
$routeProvider.when('/customer/list', { templateUrl: '/Templates/CustomerList.html', controller: 'customerListViewModel' });
$routeProvider.when('/customer/detail', { templateUrl: '/Templates/CustomerDetail.html', controller: 'customerDetailViewModel' });
$routeProvider.when('/customer/googlemap', { templateUrl: '/Templates/GoogleMap.html', controller: 'MapCtrl' });
// $routeProvider.when('/customer/postdata', { templateUrl: '/Templates/CustomerPostData.html', controller: 'AddPostCtrl' });
$routeProvider.when('/customer/getdata', { templateUrl: '/Templates/CustomerGetData.html', controller: 'GetCtrl', reloadOnSearch: false });
$routeProvider.when('/victim/getdata', { templateUrl: '/Templates/RiskVictimDetail.html', controller: 'VictimGetCtrl' });
$routeProvider.otherwise({ redirectTo: '/' });
$locationProvider.html5Mode(true);
});
this is my login controller
appMainModule.controller('HomeCtrl', ['$scope', '$location', 'CommonProp', '$firebaseAuth', function ($scope, $location,CommonProp, $firebaseAuth) {
var firebaseObj = new Firebase("FireaseURL/");
loginObj = $firebaseAuth(firebaseObj);
$scope.user = {};
var login = {};
$scope.SignIn = function (e) {
login.loading = true;
e.preventDefault();
var username = $scope.user.email;
var password = $scope.user.password;
loginObj.$authWithPassword({
email: username,
password: password
})
.then(function (user) {
//Success callback
// alert('Authentication successful');
login.loading = false;
$location.path('/dashboard/godash')
}, function (error) {
//Failure callback
alert('Authentication failure');
});
}
}])
my problem is that, when I refresh my login page by browser refresh, it refreshes successfully, but after login when refresh any page it gives me error
Page Not Found
my HTML:
<!DOCTYPE html>
<html data-ng-app="sampleApp">
<head>
<title>My new Project</title>
<meta charset="utf-8" />
<!-- AngularJS -->
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<!-- Firebase -->
<script src="https://cdn.firebase.com/js/client/2.2.4/firebase.js"></script>
<!-- AngularFire -->
<script src="https://cdn.firebase.com/libs/angularfire/1.2.0/angularfire.min.js"></script>
<script src="Scripts/App.js"></script>
<base href="/" />
</head>
<body ng-view>
</body>
</html>
If you configure $location to use html5Mode (history.pushState), you need to specify the base URL for the application with a <base href=""> tag or configure $locationProvider to not require a base tag by passing a definition object with requireBase:false to $locationProvider.html5Mode():
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
From : https://docs.angularjs.org/error/$location/nobase
Be sure to check all relative links, images, scripts etc. Angular requires you to specify the url base in the head of your main html file () unless html5Mode.requireBase is set to false in the html5Mode definition object passed to $locationProvider.html5Mode(). With that, relative urls will always be resolved to this base url, even if the initial url of the document was different.
From : https://code.angularjs.org/1.3.14/docs/guide/$location
Simple example:
Index.html
<!DOCTYPE html>
<html data-ng-app="appMain">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<script src="script.js"></script>
<base href="/" />
</head>
<body ng-view>
</body>
</html>
script.js
var appMainModule = angular.module('appMain', ['ngRoute'])
.config(function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
templateUrl: '/Templates/CustomerLogin.html',
controller: 'HomeCtrl'
});
$routeProvider.when('/customer/home', {
templateUrl: '/Templates/CustomerHome.html',
controller: 'ForLogout'
});
$routeProvider.when('/dashboard/godash', {
templateUrl: '/Templates/dashboard.html',
controller: 'DashboardCtrl'
});
$routeProvider.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
});
appMainModule.controller('HomeCtrl', ['$scope', '$location', function($scope, $location) {
$scope.godash = function(e) {
$location.path('/dashboard/godash')
}
}]);
appMainModule.controller('DashboardCtrl', ['$scope', '$location', function($scope, $location) {
$scope.home = function(e) {
$location.path('/customer/home')
}
}]);
appMainModule.controller('ForLogout', ['$scope', '$location', function($scope, $location) {
$scope.home = function(e) {
$location.path('/')
}
}]);
/Templates/CustomerLogin.html
<div>
<button ng-click="godash()">/dashboard/godash</button>
</div>
/Templates/CustomerHome.html
<div>
<button ng-click="home()">/</button>
</div>
/Templates/dashboard.html
<div>
<button ng-click="home()">/customer/home</button>
</div>
I am building my first angularJS app and I am struggling with getting parameters from my URL into my code.
The URL has a single parameter, subject and all I am trying to do at this stage is display it on the screen...
Javascript:
app.config(function($routeProvider) {
$routeProvider
.when('/setspage/:subject',
{templateUrl: "setspage.html",
controller: "setsController"
}),
});
angular.module("app").controller("setsController", function($scope, $routeParams, $http) {
$scope.selectedSubject = routeParams.subject
});
HTML:
<body ng-controller="setsController">
<div class="page-header">
<h1>Subject : {{selectedSubject}}</h1>
</div>
<script src="./node_modules/angular/angular.js"></script>
<script src="./node_modules/angular-route/angular-route.js"></script>
<script src="scripts/app.js"></script>
</body>
change
routeParams.subject
to
$routeParams.subject
Change your controller like this
angular.module("app").controller("setsController",['$scope', '$routeParams', '$http', function($scope, $routeParams, $http) {
$scope.selectedSubject = $routeParams.subject
}]);
I can't figure out why the module is failing to load on ngRoute. I have angular and angular-route scripts loading from cdn but I'm still getting the error Error: $injector:modulerr
Module Error
<!--Angular-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.16/angular-route.min.js"></script>
<script src="app/index.js"></script>
<script src="app/components/blog/blogControllers.js"></script>
// index.js
'use strict';
var pdizzApp = angular.module('pdizzApp', [
'ngRoute',
'blogControllers'
]);
pdizzApp.config(['$routeProvider'], function ($routeProvider) {
$routeProvider
.when('/blog', {
templateUrl: 'blog/view/blog-list.html',
controller: 'BlogListController'
})
.otherwise({
redirectTo: '/blog'
})
});
//blogControllers.js
'use strict';
var blogControllers = angular.module('blogControllers', []);
blogControllers.controller('BlogListController', ['$scope', '$http',
function ($scope, $http) {
$http.get('/api/blog/post').success(function (data) {
$scope.posts = data._embedded.post;
});
$scope.toDate = function(date) {
return new Date(Date.parse(date));
}
}]);
Your config block should look as follows, i.e. the method needs to be declared inside the array that you pass to the config method:
pdizzApp.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when('/blog', {
templateUrl: 'blog/view/blog-list.html',
controller: 'BlogListController'
})
.otherwise({
redirectTo: '/blog'
});
}]);
When using parameters in ngRoute and accessing the URL directly (not through a link inside the site), the CSS does not load. All my routes work perfectly except for /chef/:id. I used yeoman's angular generator, and I'm running things using grunt serve.
Here's my Route code:
angular
.module('agFrontApp', [
'configuration',
'LocalStorageModule',
'ngCookies',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: '../views/main_view.html',
controller: 'MainCtrl',
controllerAs: 'MainCtrl',
})
.when('/login', {
templateUrl: '../views/login_view.html',
controller: 'LoginCtrl',
controllerAs: 'login',
})
.when('/chefs', {
templateUrl: '../views/chef_list_view.html',
controller: 'ChefListController',
controllerAs: 'chefs',
})
.when('/chef/:id', {
templateUrl: '../views/chef_detail_view.html',
controller: 'ChefDetailController',
controllerAs: 'chef'
})
.when('/receitas', {
templateUrl: '../views/recipe_list_view.html',
controller: 'RecipeListController',
controllerAs: 'recipe'
})
.when('/perfil', {
templateUrl: '../views/perfil_view.html',
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
});
And here's the controller for /chef/:id:
'use strict';
(function() {
function ChefDetailController($routeParams, $scope, $log, Chefs) {
var vm = this;
Chefs.getChef($routeParams.id)
.then(function(data) {
$log.log('success');
})
.fail(function(data) {
$log.log('something went wrong');
});
}
angular.module('agFrontApp')
.controller('ChefDetailController',
[ '$routeParams', '$scope', '$log', 'Chefs', ChefDetailController]);
})();
What am I doing wrong?
Edit:
Here's chef_detail_view.html: http://pastebin.com/bL5ST01N
You're very likely loading your CSS using a relative url like so
<link rel="stylesheet" href="styles/style.css" />
The problem is in html5mode your chef url is /chef/123 So the browser is trying to load your CSS from
/chef/styles/style.css You'll want to either turn off html5mode or change your stylesheet href to be root relative (e.g. /styles/style.css)
I have been researching and trying to figure out this error for 2days now and Still no luck.
To begin I new to angular, and I have following this tutorial : http://jphoward.wordpress.com/2013/01/04/end-to-end-web-app-in-under-an-hour/
Every was going well until my grid was not filling with data. So I decided to make minor changes to code and now I have ran into this error.
in my js file:
var MyApp = angular.module("Myapp", ["ngResource", "ngRoute"]).
config([function ($routeProvider) {
$routeProvider.when('/', {templateUrl: 'list.html', controller: 'ListCtrl' }).
otherwise({ redirectTo: '/' });
}]);
MyApp.factory('Myapp', function ($resource) {
return $resource('/Myapp/:id', { id: '#id' }, { update: {
method: 'PUT' } });
});
MyApp.controller('ListCtrl', ['$scope', 'ds72', function ($scope, Myapp) {
$scope.todos = Myapp.query();
}]);
can some one please explain to me what i am doing wrong?
PS: These are all my Scripts
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-resource.min.js"> </script>
<script src="/Scripts/angular-route.min.js"></script>
try something like that
var MyApp = angular.module("Myapp", ["ngResource", "ngRoute"]).
config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {templateUrl: 'list.html', controller: 'ListCtrl' }).
otherwise({ redirectTo: '/' });
}]);
you must add the name of the provider to inject when you use the array declaration
.config(['$routeProvider'/*must be the exact name*/, function(route/*get the $routeProvider value*/) {}])
//equivalent as
.config(function($routeProvider) {})