Is there any way to load JS selectively depending on module?
I want to have Bootstrap.css included in templates that are in frontend and Angular Material for temaplates that are in backend of my app.
Currently if I import bootstrap.css in one component it's loaded globally which I don't want. This also means that backend.css and ngMaterial will also be loaded in frontend components...
So the way to conditionally load CSS I came up with is not very elegant but works.
I'm using Angular UI Router and when it comes to resolve route I append/remove link tag with CSS sheet using angular.element(). In my case it's abstract routes for backend and frontend, therefore it resolves (and appends/removes) link tag only once when browsing children routes.
// Frontend - add Bootstrap
$stateProvider
.state('front', {
url: "",
abstract: true,
templateUrl,
resolve: {
importBootstrapCss() {
let head = angular.element(document.querySelector('head'));
head.append("<link rel='stylesheet' type='text/css' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' id='bootstrap-css'>");
}
}
});
// Backend - remove Bootstrap
$stateProvider
.state('backend', {
url: "/backend",
abstract: true,
templateUrl,
resolve: {
deleteBootstrapCss() {
let link = angular.element(document.getElementById('bootstrap-css'));
link.remove();
}
}
});
Related
I upgraded our AngularJS package from 1.4.14 to 1.5.11. In doing so, our routes unexpectedly stopped loading. The base url for our application is baseurl.com/app.
I've reviewed the angularjs migration documents, but cannot find anything that has helped me to fix this issue.
App.config(function($routeProvider) {
$routeProvider
// route for the top level
.when('/', {
template : '<home></home>',
})
// route for a new project
.when('/new', {
template : '<new></new>',
})
// route for the project overview page
.when('/view', {
template : '<overview></overview>',
})
// route for the manage page
.when('/manage', {
template : '<manage></manage>',
})
// route for the base perform page
.when('/perform', {
template : '<perform></perform>',
})
// default route
.otherwise('/');
});
I was able to resolve the issue by adding the code below
.run(['$route', function() {}]);
This was a known issue in the AngularJS documentation that I missed somehow.
https://code.angularjs.org/1.5.11/docs/api/ngRoute#known-issues
I am running UI Router with angular 4.x. Below code is not rendering anything and I did not get any error message too. But when I changed to $default as a view name, then I am getting the page.Please suggest me.
<app-root>
<ui-view name='main'></ui-view>
</app-root>
Below is the angular State Definition,
export const appState = {
name: 'app',
views : {
main : {
component: AppComponent
}
}
};
When Angular application bootstrap's, it wipes out the inner content of app-root(root) component. What ever you put inside root component will appear until Angular application bootstrap. Generally this place has been used to add Splash screen, loader to show initial loading.
To see your ui-view to replace via ui-router configuration, you should add ui-view inside app-root component HTML.
#Component({
selector: 'app-root',
template: `<ui-view name='main'></ui-view>`
})
export AppRootComponent {
}
Here's the scenario:
I have a main AngularJS app that uses ui-router for routing, like any other app. I also have a smaller AngularJS module that functions as its own app, not requiring that it be a submodule of my larger app.
I would like for the smaller app to handle its own routing and templating, too. Goal here being, the mini app can be loaded by another AngularJS app, or loaded on its own, and have all its routing and templates set up already.
Main App:
angular
.module('mainApp')
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('mainAppParent', {
url: '/',
templateUrl: 'main.html',
controller: 'mainCtrl',
controllerAs: 'vm'
})
.state('mainAppParent.miniJournalApp', {
url: '/journal'
});
}]);
Mini App:
angular
.module('miniJournalApp')
.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('mainJournalState', {
url: '/',
templateUrl: 'mainJournalView.html',
controller: 'JournalCtrl',
controllerAs: 'vm'
})
.state('newEntry', {
url: '/new'
});
}]);
I'm planning on having all the components of the mini app being an AngularJS .component(), so I'm wondering if the correct way to do this is to just let the parent app handle routing, and let the mini app handle the templates when I define each component/directive. Then, when I want to load the mini app on its own, I would just write a wrapper AngularJS module with new routing.
As we can see that in angular ui router we are using $stateProvider so basically we are using a provider.
In an angular app the provider is loaded once and then angular puts the instance in cache so next time when the provider is injected somewhere then same instance is used.
As same instance of $stateProvider is used across angular app so it is perfectly fine to define separate states for submodules.
And this is a good practice for code maintenance.
I have used it in many projects
Im using the angular.js 1.5.8 framework along with "oc.lazyload" library for lazy loading applications.
Now, i'm trying to load a "child" component from parent component (ie. lazy load the component "navigation" into the "main") but it doest work.
Main component:
angular.module('app', [
'ngRoute', 'oc.lazyLoad'
]).component('main', {
template: '<navigation></navigation>',
controller: function($ocLazyLoad: any) {
return $ocLazyLoad.load('ui/navigation.js');
}
})
)
Navigation.js:
angular.module('app').component('navigation', {
templateUrl: './ui/navigation.html'
});
When i look into the developer console it shows me that only the navigation.js file is loaded and not the template (navigation.html)
It does work when i'm using it with ngRouter resolve property however. Is there anything similar i could use for components?
I have AngularJs ui router in my application. I need to load js file based on my state.
.state('root.home',{
url: '/index.html',
views: {
'header': {
templateUrl: 'modules/header/html/header.html',
controller: 'headerController'
},
'content-area': {
templateUrl: 'modules/home/html/home.html',
controller: 'homeController'
},
'footer': {
templateUrl: 'modules/common/html/footer.html',
controller: 'footerController'
}
},
data: {
displayName: 'Home',
}
})
The headerController,homeController and footerController have different js files when the home state is loading at that time we need to load the controller js files Is it possible through the UI router?
I think you need to use a framework like RequireJs
it is loading your Script files base on the page you are showing to the user
RequireJS loads all code relative to a baseUrl.
check it. I think It might be helpful.
You should not load javascript files on the fly depending on your route status, instead you should concatenate all your js files and minify the compiled source via Gulp for instance.
https://www.npmjs.com/package/gulp-concat
https://www.npmjs.com/package/gulp-minify
ui-route is more powerful than requirejs (ng-route).
You may look her about differences:
What is the difference between angular-route and angular-ui-router?
http://www.amasik.com/angularjs-ngroute-vs-ui-router/