I built a simple app with angular 1.0.7 I realized that I was using old version and I wanted to change the version to latest: 1.2 or 1.3 however then my app doesn't work..
How do I know which feature is not supported or what I have to change?
App:
var sampleApp = angular.module('sampleApp', []);
sampleApp.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/ShowOrder/:carId', {
templateUrl: 'templates/show_order.html',
controller: 'ShowOrderController'
}).
when('/ShowCarOrder', {
templateUrl: 'templates/list.html',
controller: 'showCarsCtrl'
});
}]);
sampleApp.controller('ShowOrderController', function($scope, $http, $routeParams) {
$http.get('data.json').
success(function(data){
$scope.cars = data;
$scope.car_id = $routeParams.carId;
});
});
sampleApp.controller('showCarsCtrl', function($scope, $http ) {
$http.get('data.json').
success(function(data){
$scope.cars = data;
});
});
Live: http://plnkr.co/edit/JpL8gmMJ2hsZistfNoCl?p=preview
Thanks in advance!
The router has been moved into its own ngRoute route package in Angular 1.2. You need to import that package to make your code work. See the Plunker here.
A note for future debugging: You can diagnose errors like these by following the error messages in the developer console. In this particular case, had you simply clicked the link in the error message you would have been redirected to a page that would have told you what to do.
Related
I have a situation where a third party library adds "#checkout" at the end of the URL (it's Snipcart) but Angular cannot seem to detect it and it just goes back to the /test page (localhost:3000/test).
The reason the URL is: /test is intentional as I have html5mode enabled.
This works well in a normal static HTML project (so not Angular) but when I used ui.router with Angular 1.x, it doesn't work.
My angularApp.js file:
var mainApp = angular.module('mainApp', ['ui.router']);
mainApp.config(function($locationProvider, $stateProvider, $urlRouterProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise(function(){
console.log('otherwise activated');
});
var helloState = {
name: 'root',
url: '/',
templateUrl: '/partial/main.html',
controller: 'mainController'
}
var aboutState = {
name: 'test',
url: '/test',
views: {
'#': {
templateUrl: '/partial/yamuna.html',
controller: 'testController'
}
}
}
$stateProvider.state(helloState);
$stateProvider.state(aboutState);
});
mainApp.controller('mainController', ['$scope', '$rootScope', function($scope, $rootScope){
console.log('mainController activated');
}]);
mainApp.controller('testController', ['$scope', '$rootScope', function($scope, $rootScope){
console.log('testController activated');
}]);
So the paths below work as expected:
localhost:3000/ ##mainController activated
localhost:3000/test ##testController activated
But, Snipcart appends the path to:
localhost:3000/test#checkout - which I want to be able to go to the otherwise route and not fall back to localhost:3000/test#
Any way around this? As Angular 1 is quite old, I will have to come up with a workaround myself.
Edit
I can detect the path change with: (FYI this one below is in ngRoute as I was playing around with the various options):
mainApp.run(
['$rootScope', '$location', '$window', function($rootScope, $location, $window) {
$rootScope.$on("$routeChangeStart",
(event, current, previous, rejection) => {
console.log($window.location.href);
})
}])
But - what do I do after that? I can filter out only that specific path where #/checkout is hit but where do I redirect the site to? Not sure if this is even worth an edit but I thought I will mention it for completeness.
My ONLY option it seems is to upgrade to Angular 8 or higher but as I am so close to the deadline, I will like to explore all the options with Angular 1.x first.
Thanks
I am following a video tutorial on AngularJS. On the part related to $routeProvider, I got an error:
Error: [$injector:unpr] http://errors.angularjs.org/1.2.26/$injector/unpr?p0=%24templateRequestProvider%20%3C-%20%24templateRequest%20%3C-%20%24route%20%3C-%20ngViewDirective
and no content is displayed. Everything works however on instructor demo.
I noticed that when I substitute my angular libraries:
angular.min.js (v1.2.26)
angular-route.min.js (v1.3.11)
with instructor's older libraries:
angular.min.js (v1.2.9)
angular-route.min.js (v1.2.10)
everything works perfect.
I understand there must have been some updates to the way $routeProvider behaves with newer versions of AngularJS, so I would definitely prefer to follow these. Could anyone help me adapt the current code so that it works with most recent libraries?
my app.js:
var myApp = angular.module('myApp', [
'ngRoute',
'artistControllers'
]);
myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/list', {
templateUrl: 'partials/list.html',
controller: 'ListController'
}).
otherwise({
redirectTo: '/list'
});
}]);
and my controllers.js:
var artistControllers = angular.module('artistControllers', []);
artistControllers.controller('ListController', ['$scope', '$http', function($scope, $http) {
$http.get('js/data.json').success(function(data) {
$scope.artists = data;
$scope.artistOrder = 'name';
});
}]);
I am new using AngularJS, i am trying to implement a router to manage 2 different views.
I have followed the tutorial but i get an error on my javascript console:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.7-build.2029+sha.80e7a45/$injector/modulerr…Flocalhost%3A3094%2Fbower_components%2Fangular%2Fangular.min.js%3A32%3A188)
This error only happens when i add the APP.config() part of the code.
I can reach the route /views/a.html directly on my browser, and i do have a <div ng-view></div> in my html code (index.html), i don't understand what i am missing...
var APP = angular.module('APP', [ 'ui.bootstrap', 'angularFileUpload', 'ngRoute' ])
//Load Facebook SDK & co...
});
APP.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/a', {
templateUrl: 'views/a.html',
controller: 'aCtrl'
}).
when('/b', {
templateUrl: 'views/b.html',
controller: 'bCtrl'
}).
otherwise({
redirectTo: '/a'
});
}
]);
APP.controller('aCtrl', function() {
console.log('CALL A CONTROLLER');
});
APP.controller('bCtrl', function() {
console.log('CALL B CONTROLLER');
});
You have to inject ngRoute into your app:
angular.module('ngViewExample', ['ngRoute'])
Unfortunately the demo app is still using v1.0.6 so you're going to see a lot of inconsistencies. Here's a better example from the documentation:
http://docs.angularjs.org/api/ngRoute.$route
I have two moudules:
var app = angular.module('app', ["homeModule"])...
angular.module("homeModule", [])...
and if in web config property "compilation debug="true".." everything works fine.
But when I build the project in release and "compilation debug="false".."
BundleCollection collects all JS files in one I have problem.
In log console i see error
Error: Unknown provider: n from homeModule
My "app" module can not find and connect "homeModule".
What am I doing wrong? How do I properly connect the "homeModule" module ?
I think you have problem with AngularJs and minification in general. When defining dependencies you need to use array notation, for example:
angular.module("app", ["homeModule"])
.controller("UsersController", ["$scope", "usersRepository", function($scope, usersRepository) {
// ...
}]);
or use https://github.com/btford/grunt-ngmin which makes conversion for you.
I found problem in homeModule.config
Worked code:
var app = angular.module('app', ["homeModule"]);
app.config(['$routeProvider', '$locationProvider',function ($routeProvider, $locationProvider)
{
$locationProvider.html5Mode(true);
$routeProvider.otherwise({ redirectTo: '/' });
}
]);
angular.module("homeModule", [])
.config(['$routeProvider', function ($routeProvider)
{
$routeProvider.when('/', { templateUrl: 'ClientApp/Home/Index.html' });
$routeProvider.when('/home', { templateUrl: 'ClientApp/Home/Index.html' });
}])
I tried to make the 'getting started' tutorial from Angular JS, but I have a problem when setting the route of a link: the controller of that route does not get called when the user clicks on the link.
Here is my code:
angular.module('phonecat', []).
config(['$routeProvider',
function ($routeProvider) {
$routeProvider.
when('/phones', {
templateUrl: 'partials/phone-list.html',
controller: PhoneListCtrl
}).
when('/phones/:phoneId', {
templateUrl: 'partials/phone-detail.html',
controller: PhoneDetailCtrl
}).
otherwise({
redirectTo: '/phones'
});
}
]);
function PhoneDetailCtrl($scope, $routeParams, $http) {
$scope.phoneId = $routeParams.phoneId;
$scope.total = 4;
$http.get('phones/' + $routeParams.phoneId + '.json').success(function (data) {
$scope.phone = data;
});
}
function PhoneListCtrl($scope, $http) {
$http.get('phones/phones.json').success(function (data) {
$scope.phones = data;
});
$scope.orderProp = 'age';
}
What angularjs version did you use? I follow the tutorial too, and it use angular-1.0.0rc7.js and if I look up in the app.js file, it use template rather than templateUrl:
$routeProvider.when('/phones', {
template: 'partials/phone-list.html',
controller: PhoneListCtrl
});
so by looking your code, you might want to use angular-1.0.3.js or prior version above the RC
This should work but you need to be sure the link is inside the DOM element which is the root of your app; ie (ng-app='my-app').
It's hard to tell without seeing the page markup.
The problem was solved by the asker:
I fixed the problem - actually I had the HTML of the next step of this tutorial and it was messing up with the app, mainly because it had binding with attribute that did not exist in the model yet.