External view html files in Angularjs Route - javascript

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

Related

How to force a browser to reload angular template file and not cache it?

When loading a javascript file I can force the browser to not use the cache by adding a version when loading the file e.g.
<script src="~/angular/myapp/app.js?version=123"></script>
From inside my angular app I am doing this:
$routeProvider.when("/", {
controller: "userController",
controllerAs: "vm",
templateUrl: "Path/to/Template/Index.html"
});
How can I make sure that any changes I made to the Index.html won't be cached? Or this isn't an issue for some reason?
angular 1.x
You could do the same for your Index.html file. Simply append a "cache buster" query string as you did to your js file. There are a few techniques to do this, but a simple Date.now() timestamp should demonstrate the goal
...
$routeProvider.when('/', {
controller: 'userController',
controllerAs: 'vm',
templateUrl: `Path/to/Template/Index.html?t=${Date.now()}`
});
If your app grows in complexity and you wish to prevent caching of templates altogether, you can achieve this with some middleware...
angular.module('preventTemplateCache').factory('preventTemplateCache', function($injector) {
return {
'request': function(config) {
if (config.url.indexOf('views') !== -1) {
config.url = `${config.url}?t=${Date.now()}`
}
return config;
}
}
}).config(function($httpProvider) {
$httpProvider.interceptors.push('preventTemplateCache');
});
The above example assumes a directory of views for your templates.
Finally, as a comment pointed out, if you are simply wishing to prevent caching for local development, you can toggle settings to disable cached resources through your browsers dev tools.

nested view doesn't work using angularjs

I'm using ui-router, but one strange thing happens, the style which i put in 'parent' doesn't get loaded.
Here's how my folder and files look like
my route.js look like this
.state("home", {
url: "/",
templateUrl: "index.html"
})
.state("dashboard", {
url: "/dashboard",
views:{
templateUrl: "layout.html"
}
})
.state("dashboard.index", {
views:{
templateUrl: "dashboard/index.html"
}
})
I expect layout.html can be the wrap of every module, like I have dashboard module, and module can have many sub-modules but still use the style which located in layout.html.
I've stuck for 6 hours, I need help, I posted my repo here.

How to perform routing in angularjs

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"
} //...

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 JS Routing - Links inside SPA

I have created a project with index.html with certain links to other pages. My routing works as intended but I'm wondering what's the best approach to go with when it comes to links on other pages.
To clarify it:
My index.html page has routes:
Feed
Bblog
Marketplace
Recruiting
Adverts
Now what I'm curious about is how do I for example route links inside these pages.
For example, my Bblog page has tabs which I want to be opened inside the same page. Now for example whenever I click some tab link, it redirects me to my index.html since my .otherwise route is set to /.
Not sure what engine or library you're using for your routing. Though I faced the same requirement not too long ago.
We're using ui-router for our routing. It's very similar to Angulars routing.
A snippet from our routing table contains something similar to this.
$stateProvider
.state('home', {
url: '/',
templateUrl: '/views/index',
})
.state('orders', {
url: '/orders',
templateUrl: '/views/orders',
})
.state('orderdetail', {
url: '/orders/detail/:id',
templateUrl: '/views/orderdetail',
})
.state('orderdetail.address', {
url: '/:addressId',
templateUrl: '/views/orderdetail',
})
Essentially you use the .dot notation to separate nested views. So the orderdetail.address is nested inside the orderdetail
This means that the routing above will go something allow you to see an overview of order details at /orders/detail/myOrderId and drill further in to, say, an address by visiting /orders/detail/myOrderId/myaddressId
If you're using ui-router then you will get more info on nested views on this link
If you're using angular ngRoute then the [ngRoute][3] docs and supporting plunker demonstrate how to stack up the routes.
So (from the plunker) -
.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/Book/:bookId', {
templateUrl: 'book.html',
controller: 'BookController',
resolve: {
// I will cause a 1 second delay
delay: function($q, $timeout) {
var delay = $q.defer();
$timeout(delay.resolve, 1000);
return delay.promise;
}
}
})
.when('/Book/:bookId/ch/:chapterId', {
templateUrl: 'chapter.html',
controller: 'ChapterController'
});
this will give you /book/myBookId and /book/myBoodId/ch/myChapterId

Categories