Why is AngularJS router not triggering? - javascript

I'm trying to trigger a controller for this URL http://crm.dev/accounts, I'm just using an anonymous function in this example for the controller, but the alert inside doesn't get triggered. I can't figure out why, guess it is something stupid I'm missing?
I don't want to use a template or view, I just need to get my controller fired.
Please note that I've already set $locationProvider.html5Mode(true);.
'use strict';
angular.module('crm', [
'ngSanitize',
'ngRoute',
'angularMoment',
'ui.bootstrap',
'ui.select',
'ui.bootstrap.datetimepicker'
]);
angular.module('crm').config(function(uiSelectConfig) {
uiSelectConfig.theme = 'bootstrap';
});
angular.module('crm').constant('angularMomentConfig', {
preprocess: 'utc',
timezone: 'Europe/Berlin'
});
angular.module('crm').config(['$routeProvider', '$locationProvider',
function ($routeProvider, $locationProvider) {
$routeProvider.
when('/accounts', {
controller: function($scope) {
alert('TEST');
}
}).
otherwise({
redirectTo: '/'
});
// enable html5Mode for pushstate ('#'-less URLs)
$locationProvider.html5Mode(true);
$locationProvider.hashPrefix('!');
}]);

you need to have a
<ng-view></ng-view>
in your main template, otherwise routing system won't work

Related

Angularjs multiple app can't route a subapplication

I have a site with multiple angularjs app inside. The structure is the following :
index.html
js
js_controller.js
js_directives.js
js_filters.js
js_routes.js
js_home.js
sub_app
index.html
js
subapp_controller.js
subapp_directives.js
subapp_filters.js
subapp_routes.js
subapp_home.js
On the first app I added the following in js_routes.js :
angular.module('jsroutes.routes', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {templateUrl: 'templates/mytemplates.html'});
$routeProvider.otherwise({redirectTo: '/'});
}])
No problem with this. It works well.
The problem concern my subapp. I added the following in subapp_routes.js :
angular.module('subapproutes.routes', ['ngRoute'])
.config(['$routeProvider','$locationProvider', '$httpProvider', function ($routeProvider, $locationProvider, $httpProvider) {
$routeProvider.when('/subapp', {templateUrl: '/subapp/templates/mytemplate.html', controller: 'myCtrl'});
$routeProvider.when('/subapp/:id', {templateUrl: '/subapp/templates/mysecond.html', controller: 'myCtrl'});
$routeProvider.otherwise({redirectTo: '/subapp'});
}])
The problem is : if the url is /subapp works, /subapp/1 not work for example. It returns to home with templates/mytemplates.html
I don't know why.
If someone can help me.
Thanks in advance

Angular translate preferredLanguage is not working

'use strict';
angular.module("Demo", ['pascalprecht.translate', 'ngRoute', 'ngCookies', 'controll', 'factors', 'filteer'])
.config(['$routeProvider', '$translateProvider', function ($routeProvider, $translateProvider) {
$translateProvider.useStaticFilesLoader({
prefix: 'i18n/',
suffix: '.json'
});
$translateProvider.preferredLanguage('en-US');
$translateProvider.determinePreferredLanguage();
$translateProvider.fallbackLanguage('en-US');
$routeProvider
.when('/page1', {
templateUrl: 'Main.html',
controller: 'myCtrl',
resolve: {
message: function (messageService) {
return messageService.getMessage();
}
}
})
.when('/page2', {
templateUrl: 'page.html',
controller: 'myCtr'
});
}]);
In angular js translate preferredLanguage is not working properly in IE.When i reload the page it showing the page correctly, but while its executed its shows empty page.This code works finely in firefox and chrome only issue is in IE.In IE also once i reload the page its working and shows the content,but while initial loading there is a trouble.I also used fallback that also fails.

AngularJS routing without webserver?

I'm trying to create a simple website using angular as front-end.
Is there a way to create partial views and routing without having a webserver?
I've been trying to do so, but I keep getting this error:
Uncaught Error: [$injector:modulerr]
Here's my code: index.html
<!DOCTYPE html>
<html lang="en" ng-app="cerrajero">
<head>
<meta charset="UTF-8">
<title>Cerrajero</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
</head>
<body ng-controller="MainCtrl">
<div ng-view></div>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.min.js"></script>
<script src="js/app.js"></script>
<script type="text/ng-template" id="partials/contact.html" src="partials/contact.html"></script>
<script type="text/ng-template" id="partials/services.html" src="partials/services.html"></script>
<script type="text/ng-template" id="partials/home.html" src="partials/home.html"></script>
</body>
</html>
and the app.js:
var app = angular.module('cerrajero', []);
app.config([function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/services', {
template: 'partials/services.html'
}).
when('/contact', {
template: 'partials/contact.html'
}).
when('/home', {
template: 'partials/home.html'
}).
otherwise({
redirectTo: '/home',
template: 'partials/home.html'
});
}]);
function MainCtrl ($scope) {
};
What am I doing wrong?
edit
I've added the ngRoute but I still get the same error when I open the index.html file in the browser.
var app = angular.module('cerrajero', ['ngRoute']);
app.config([function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(true);
$routeProvider.
when('/services', {
template: 'partials/services.html'
}).
when('/contact', {
template: 'partials/contact.html'
}).
when('/home', {
template: 'partials/home.html'
}).
otherwise({
redirectTo: '/home',
template: 'partials/home.html'
});
}]);
function MainCtrl ($scope) {
};
edit 2
Here's the files on github:
https://github.com/jsantana90/cerrajero
and here's the website when it loads:
http://jsantana90.github.io/cerrajero/
edit 3
I've manage to get rid of the error by having the following code:
var app = angular.module('cerrajero', ['ngRoute']);
app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
$locationProvider.html5Mode(false);
$routeProvider.
when('/services', {
template: 'partials/services.html'
}).
when('/contact', {
template: 'partials/contact.html'
}).
when('/home', {
template: 'partials/home.html'
}).
otherwise({
redirectTo: '/home',
template: 'partials/home.html'
});
}]);
app.controller('MainCtrl', function ($scope) {
});
I added this app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
But now my page is blank. It doesn't redirects or anything.
Have I placed everything how it's suppose to go?
edit 4
I forgot to change ui-view to ng-view. Now it works but it's showing in the view: partials/home.html instead of the actual view.
edit 5
Ok so, after having this final code:
var app = angular.module('cerrajero', ['ngRoute']);
app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
$routeProvider.
when('/services', {
templateUrl: './partials/services.html'
}).
when('/contact', {
templateUrl: './partials/contact.html'
}).
when('/home', {
templateUrl: './partials/home.html'
}).
otherwise({
redirectTo: '/home'
});
}]);
app.controller('MainCtrl', function ($scope) {
});
I get this error:
XMLHttpRequest cannot load file:///partials/home.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
Now I'm guessing this is because I don't have a webserver running. How do I get it to work without a webserver?
solution
When I uploaded the files to github it seems to work there, but not locally.
Looks like you are using ngRoute and forgot to include it!
First load angular-route.js after loading angular.js. The inject ngRoute as a module:
var app = angular.module('cerrajero', ['ngRoute']);
Try removing the array syntax brackets from inside your config function. I believe there are two different ways of invoking these functions, either with a standalone function or with an array for any minification processes.
You should either one of the following:
app.config(function ($locationProvider, $routeProvider) {
// your code here
});
Or define the variable names with the array syntax for use in minifiers
app.config(['$locationProvider', '$routeProvider', function ($locationProvider, $routeProvider) {
// your code here
}]);
When you pass in an array to the config function, I believe Angular is expecting the first parameters to be a string value.
You should use ui-router instead of ng-route. It will allow you to nest views. Most current Angular projects use ui-router. ui-router scotch.io
Also, for your controller try app.controller('MainCtrl', function($scope){...});
Replace
var app = angular.module('cerrajero', []);
with
var app = angular.module('cerrajero', ['ngRoute']);

Unable to match route in AngularJS

I have the following code in my app.js:
var myApp = angular.module('myApp', ['ngRoute'])
myApp.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.
when('/products', {
templateUrl: '/angularjs/public/angular/views/product.html'
}).
otherwise({
templateUrl: '/angularjs/public/angular/views/home.html'
});
$locationProvider.html5Mode(true);
}]);
When I go to home at http://localhost/angularjs/public, the .otherwise kicks in correctly.
If I go to http://localhost/angularjs/public/products, nothing happens, or more precisely, I believe .otherwise is invoked again, since is displayed the home.html view. Also no error is throwed in batarang's console.
What could be the problem?
you need to add "public" to product slug in your route
when('public/products', {
templateUrl: '/angularjs/public/angular/views/product.html'
}).

Angular html5 mode not redirecting

I am using AngularJs with Ruby on Rails.
I set the html5 option to true in angular: $locationProvider.html5Mode(true)
But now when I try to navigate through pages in my application, it will only change the URL in my browsers URL bar. But the page it self will nto change unless I reload the page. Only then will it go to the page specified.
This is how my Angular routing looks like:
#test.config(['$routeProvider', '$locationProvider', ($routeProvider, $locationProvider) ->
# Route for '/'
$routeProvider.when('/', { templateUrl: '../../views/visitors/index.html.erb', controller: 'VisitorsCtrl' } )
$routeProvider.when('/users', { templateUrl: '../../views/users/index.html.erb', controller: 'UsersCtrl' } )
# Default
$routeProvider.otherwise( { redirectTo: "/" } )
$locationProvider.html5Mode(true)
])
On the root page I have a element: <h2><a ng-click="viewUsers()">Users</a></h2>
And viewUsers() is called here:
#test.controller 'VisitorsCtrl', ['$scope', '$location', '$http', ($scope, $location, $http) ->
$scope.viewUsers = ->
$location.path('/users')
console.log("Redirected")
]
What could be needed more to get this kind of routing to work?
New angular route:
Test.config ($routeProvider, $locationProvider) ->
$routeProvider
.when '/',
templateUrl: '../../views/visitors/index.html.erb',
controller: 'VisitorsCtrl'
.when '/users',
templateUrl: '../../views/users/index.html.erb',
controller: 'UsersCtrl'
try to use following instead:
$window.location.href = '/users'

Categories

Resources