I am using MVC Web API and Angular JS
When i am giving single routeProvider, then its working after adding one more routeProvider its not working....
My Code Is:
var phoneModelsApp = angular.module('phoneModelsApp', ['ngRoute']);
phoneModelsApp.config(['$routeProvider',
function ($routeProvider) {
$routeProvider.when('/phonelist', {
templateUrl: 'partials/Test1.html',
controller: 'phoneListCtrl'
}).
$routeProvider.when('/phonelist1', {
templateUrl: 'partials/Test2.html',
controller: 'phoneListCtrl'
}).
otherwise({
redirectTo: '/phonelist'
});
}]);
You need to add to in your urls "#" or adding in your configuration:
$locationProvider.html5Mode(true);
In order to remove the # in Angular you need to make an small change in your configuration:
You need to add:
$locationProvider.html5Mode(true);
This is the whole version:
myApp.config(function($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when('/page1', { template: 'page1.html', controller: 'Page1Ctrl' })
.when('/page2', { template: 'page2.html', controller: 'Page2Ctrl' })
});
Related
When I hit my angular application url it loads all the css and works as it should. However, when click any link to route to different links I am not able to css files. Below is my code.
(function () {
'use strict';
angular.module('app')
.config(["$routeProvider", "$translateProvider",
function($routeProvider, $translateProvider) {
$routeProvider.
when('/', {
templateUrl: 'src/login/login.html',
controller: 'LoginController',
controllerAs: 'ctrl'
}).
when('/home', {
templateUrl: 'src/login/home.html',
controller: 'RegistrationController',
controllerAs: 'regCtrl'
}).
otherwise({
redirectTo: '/'
});
$translateProvider.useStaticFilesLoader( {
"prefix": "src/locale/", "suffix": ".json"
} );
$translateProvider.preferredLanguage( "en" );
}])
Batter to write a service to add CSS and JS files to the
Here is a example..
https://github.com/Yappli/angular-css-injector
I have an angular app defined on my index.html file.
Using angular-routing i am routing a link named /erez to load a view with a template. It's working inside the app - when I click the link to /erez from the navbar on index.html it works perfectly.
But when I go directly to my.site.com/erez on the address bar, it gives 404. I understand why that is, having no server-side code, but is there a pure angular way of achieving direct urls?
my routing code:
var app = angular.module('labApp', ['ngRoute', 'angular.filter']);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'index.html',
controller: 'mainCtrl'
}).
when('/erez', {
templateUrl: 'erez2.html',
controller: 'erezCtrl'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
});
You can find lots of useful information from this link:
So either you need this base url tag inside the tag:
<base href="/" />
But be aware, this base tag may break the relative links in your code. Alternatively you can use:
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
Hope this helps.
Try this, it should work now.
var app = angular.module('labApp', ['ngRoute', 'angular.filter']);
app.config(function ($routeProvider, $locationProvider) {
$routeProvider.
when('/', {
templateUrl: 'index.html',
controller: 'mainCtrl'
}).
when('/erez', {
templateUrl: 'erez2.html',
controller: 'erezCtrl'
}).
otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode({ enabled: true, requireBase: false });
});
I'm using cordova angularjs together. I will use the routeprovider.
index.js:
var appGenerator = angular.module('appGenerator', ['ngRoute', 'ngResource']);
appGenerator.config(function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/);
});
appGenerator.config(['$routeProvider' function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: "partials/tablePage.html",
controller: "MainCtrl"
})
.when('/contacts', {
templateUrl: "partials/contacts.html",
controller: "ContactsCtrl"
}).otherwise({
redirectTo: '/'
}); }]);
html:
{{table.tablename}}
But I get an net::ERR_FILE_NOT_FOUND(file:///contacts) error
What I'm doing wrong?
I'm a newbie with AngularJS and I got a problem that I think that's it's can be configurable in my routeProvider.
I have this route
angular
.module('app', ['ngRoute', 'ngStorage'])
.config(['$routeProvider', function ($routeProvider) {
debugger;
$routeProvider.when('/:module/:task/:id/:menu/:action', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id/:menu', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/', { templateUrl: 'app/start.html' });
$routeProvider.otherwise({ redirectTo: '/' });
}
]);
the problem: When I just type http://localhost:53379 I'm redirected to http://localhost:53379/#/ . Where come from the /#/ ?
By default, AngularJS will route URLs with a hashtag.
For example:
http://domain.com/#/home
http://domain.com/#/about
You can very easy remove the hashtag from the URL by setting html5Mode to true in your config:
$locationProvider.html5Mode(true);
so in your code it will be:
angular
.module('app', ['ngRoute', 'ngStorage'])
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
debugger;
$routeProvider.when('/:module/:task/:id/:menu/:action', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id/:menu', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task/:id', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module/:task', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/:module', { templateUrl: 'app/blank.html', controller: PagesCtrl });
$routeProvider.when('/', { templateUrl: 'app/start.html' });
$routeProvider.otherwise({ redirectTo: '/' });
$locationProvider.html5Mode(true);
}
]);
Just after that you have to make sure that your backed will redirect all requests to your home page if you are doing "Single Page App"
Angular adds it by default. I don't know it this is the main reason, but one reason is that the routing doesn't work in older versions of IE. I had this problem in one angularjs app that didn't work in IE9 because of this reason.
Anyways, to remove the hashtag simply add $locationProvider.html5Mode(true); after your routing-declarations.
You can read more about it here: http://scotch.io/quick-tips/js/angular/pretty-urls-in-angularjs-removing-the-hashtag
This /#/ is used to create a single page application. the # is used to prevent that the page is completely reloaded. Angular then catches the new URL and loads the correct controller and partials depending on your route configuration.
Since HTML5 it is possible to remove this behavior with $location.html5Mode(true).
Source:
AngularJS documentation
I try to declare a route to use angular,in my security.yml after authentication i well be redirect to #/welcome but consider it a comment
default_target_path: #/welcome
my app.js
routeApp.config(['$routeProvider',function($routeProvider) {
// Routing system
$routeProvider
.when('/login', {
templateUrl: Routing.generate('login'),
controller: 'SecurityController'
})
.when('/welcome', {
templateUrl: Routing.generate('ard_backend_test'),
controller: 'WelcomeController'
})
.otherwise({
redirectTo: '/login'
});
}]);
Just add a double quote for your string and the hash # character will be able to escape.
default_target_path: "#/welcome"
Update: Do not define the default client route in your yml configuration.
This should be part of your angular router configuration. Depending which router you are using of course.
Here is an example with angular's default routeService:
angular.module('MyApp', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.
when('/welcome', {
templateUrl: 'partials/welcome.tpl.html',
controller: 'WelcomeCtrl'
}).
when('/some-other-route', {
templateUrl: 'partials/some-other-route.tpl.html',
controller: 'SomeOtherCtrl'
}).
otherwise({
redirectTo: '/welcome'
});
}]);