How to perform routing in angularjs - javascript

I have an xml file and i tried to give routing as follows,
state('blog.bloglist', {
url: '/blog-list',
templateUrl: 'feed.xml',
controller: "blogListCtrl"
}).
but this shows errors,can some one please help me.

what type of document is feed.xml? what is said in error? perhaps, you dont mentioned the path to templateUrl correctly or templateUrl file is not a valid html-structured file. sample routing example is like this:
.state('dashboard', {
url: "/dashboard.html",
templateUrl: "views/dashboard.html",
controller: "DashboardController"
} //...

Related

External view html files in Angularjs Route

Please advice how to include(use) commonly used and shared between few projects html files.
so html files from external server needs to be included in Angularjs router.
Here is a short example of what i have and what i am trying to solve.
Now .html is in my project folder:
.state('chatbase', {
url: '/cn={cn}',
onEnter: function ($stateParams, ParamsShareService) {
ParamsShareService.updateCnValue($stateParams.cn);
},
views: {
'content#': {
templateUrl: 'views/chat_wv1.html',
controller: 'ChatController'
}
}
})
And i am trying to get them work like this.So i can share the structure for few projects.
.state('chatbase', {
url: '/cn={cn}',
onEnter: function ($stateParams, ParamsShareService) {
ParamsShareService.updateCnValue($stateParams.cn);
},
views: {
'content#': {
templateUrl: 'https://my-website/views/chat_wv1.html',
controller: 'ChatController'
}
}
})
I think the way you implemented it will not work.
templateUrl support explicit path to your project or String.
HTML is a static file with static content. However calling file from HTTP means get file content by using HTTP protocol - different flow and templateUrl doesn't support this way.
Further, Angular state is loaded before any controller and I believe templateUrl: 'views/chat_wv1.html', is what we have today.
You can try this approach (but its a bit complicated):
1) you can load some teplate.html
views: {
'content#': {
templateUrl: 'views/teplate.html',
controller: 'ChatController'
}
}
2) The teplate.html will be bind to some Controller that will load HTML content from server and you can use $compile + ng-include to achieve what you look for

AngularJs templaturl error

when('/contact', {
templateUrl: './Contact.html',
controller: 'ContactController'
}).
otherwise(
{
redirectTo: '/home'
});
I am having templateurl like this. When I try to execute, My template url is not working. I have attached link to my application Angular TemplateURL . Please help me on how to fix the issuse.
Is it showing a 404 error? If yes, then check the path that it tried for finding your partials. Make sure that the path you have mentioned is correct. It is relative to the index. It should be pages/'pagename'.html
when('/contact', {
templateUrl: 'pages/Contact.html',
controller: 'ContactController'
})
Firstly you should first understand how relative path works. So, here it follows:
/ means the root of the current drive
./ means the current directory
../ means the parent of the current directory.
As you have used :templateUrl: './Contact.html', it will try to look into the current directory.
So you have to change the path of your template URL's like this:
when('/contact', {
templateUrl: './pages/Contact.html',
controller: 'ContactController'
}).
otherwise(
{
redirectTo: '/home'
});

How to include view specific .less files in AngularJS

I am using angular UI_Router in my project. I want to load specific .less files for specific states. I tried with angular-UI-router-styles, but it didn't work. May be am using less instead of css.
Please check my code. am using angular-ui-router-styles for css adding into the routing. it is working but the styles for the pages are not reflecting.
index.js
require('jquery/dist/jquery.js');
require('bootstrap/dist/css/bootstrap.css');
require('./content/common.css');
require('angular');
require('angular-ui-router/release/angular-ui-router.js');
require('angular-route/angular-route.js');
require('angular-cookies/angular-cookies.js');
require('materialize-css/dist/css/materialize.css');
require('angular-ui-router-styles/ui-router-styles.js');
angular.module('adminsuite',['ui.router','ngCookies','uiRouterStyles']).config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('login', {
url: '/',
views:{
content:{
templateUrl: 'Login/login.html',
controller: 'loginController',
data:{
css:"styles/login/login.less"
}
},
footer:{
templateUrl: 'common/footer.html',
controller: 'footerController'
}
}
})
// HOME STATES AND NESTED VIEWS ========================================
.state('dashboard', {
url: '/dashboard',
views:{
header:{
templateUrl: 'common/header.html',
controller: 'headerController'
},
content:{
templateUrl: 'dashboard/dashboard.html',
controller: 'dashboardController',
data:{
css:"styles/dashboard/dashboard.less"
}
},
footer:{
templateUrl: 'common/footer.html',
controller: 'footerController'
}
}
});
// ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
});
require('./Login/loginController.js');
require('./dashboard/dashboardController.js');
require('./common/headerController.js');
require('./common/footerController.js');
require('./services/loginAuthenticationService.js');
require('./services/UserServices.js');
The only way that I'm aware of to achieve this would be to use a Webpack or similar build. This way you can require('./state-1.less') within your component/directive. The idea is that webpack only includes files that are needed. Realistically though, setting up a new compiling tool/task runner is not simple if you've already begun.
There is no issue in providing all css to your application. If switching is your task then you can use ngclass to provide different style blocks based on events that occur within in each state.
The_ehT is correct, you'll need to provide compiled css if you want to use the desired plugin.

Angular $route change url based on route

I'm writing a simple product information management app using angular js. To keep my app as modular as possible i've split it into multiple modules with one module "pim" as startpoint. For each module I want to have a different route, so that it is easy to plug in a new module or remove it without having to maintain a huge route in the pim module config.
Currently I have two routes (the first route):
(function(){
angular
.module("pim")
.config(router)
function router($routeProvider){
$routeProvider
.when("/",{
templateUrl: "view/info.html",
controller: "pimController"
})
.when("/info",{
templateUrl: "view/info.html",
controller: "pimController"
})
.when("/alcohol",{
templateUrl: "view/alcohol.list.html",
controller: "alcoholController"
});
}
})();
The second route
(function(){
angular
.module("alcohol")
.config(router)
function router($routeProvider){
$routeProvider
.when("/alcohol/list",{
templateUrl: "view/alcohol.list.html",
controller: "alcoholController"
})
.when("/alcohol/info",{
templateUrl: "view/alcohol.info.html",
controller: "alcoholController"
});
}
})();
As you can see /alcohol has a templateUrl and a controller, the same as /alcohol/list, but i want to know if there is a simple (standard) way to change to another URL for example /alcohol/list, so that I do not have to repeat the templateUrl and controller and keep this information in the alcohol module, where it belongs.
For example
.when("/alcohol",{
routeTo: "/alcohol/list"
})
Thank you for your help
SOLVED
The option to redirect exists, did not look in the $routeProvider documentation well enough:
.when("/alcohol",{
redirectTo:"/alcohol/list"
});
The code above works
You can use $routeProvider's redirectTo route map.
.when("/alcohol", {
redirectTo: "/alcohol/list"
});
Read more: https://docs.angularjs.org/api/ngRoute/provider/$routeProvider

Can't fix the hashtag in my angularjs app path

I know you guys are going to say "It's duplicated" but it doesn't work for me.
I'm doing exactly the same thing and here's what happens.
This is my config code:
portfolioApp.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/home', {
controller: 'portfolioController',
templateUrl: 'partials/home.htm'
})
.otherwise({redirectTo: '/home'});
if(window.history && window.history.pushState){
$locationProvider.html5Mode(true);
}
});
The URL without the locationProvider and setting path to "/" instead of "/home" would be:
http://localhost:8080/portfolio/#/
Okey, i would like to remove the hashtag and the "portfolio" path so that way it would be:
http://localhost:8080/home
With the config i've posted, it does it (the first time i refresh). But what happens? happens that if I refresh the page again with the new path... i get a 404 Tomcat Error.
In the first refresh when i write localhost:8080/portfolio and the path gets converted into "/home", I get in the console an error saying that the "partials/home.htm" can't be found 404.
So either way, it can't read my partial, and then when I refresh everything is broken.
How can I solve this? what am I doing wrong?
Make sure your including these to scripts in the header of your HTML document Where you are implementing your module. The two provided below are for implementing the most current version of angular as well as the most current version of the angular route script:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular-route.js"></script>
Make sure your injecting ngRoute into your module, here's an example of mine:
angular.module('controller', ['ngRoute','ngResource', 'ngCookies', 'ngSanitize'])
Here is an example of my config block, make sure you inject both routeProvider and locationProvider:
.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider){
$routeProvider
.when('/', {
templateUrl: '../partials/member.php',
controller: 'Member',
access: 'member'
})
.when('/leaderboard', {
templateUrl: '../partials/leaderboard.html',
controller: 'Leaderboard',
access: 'member'
})
.otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(true);
}])
If your doing all of this and it still doesn't work post a plunker of your code. Thanks.

Categories