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/
Related
I want to organize my angular code like this:
project/
thing/
thing.js
view.html
other_thing/
other_thing.js
view.html
Then I want to include routing that picks the thing based on url params:
$routeProvider
.when('/thing', {
templateUrl: 'thing/thing.html',
controller: 'thingController'
})
.when('/other_thing', {
templateUrl: 'other_thing/other_thing.html',
controller: 'otherThingController'
});
$locationProvider.html5Mode(true);
What I'm missing is how to load thingController and otherThingController on demand. If I've got 50 different controllers I don't want to load all of them up front, I want to wait until the client actually visits the route to load the js, similar to how the templateUrl isn't loaded until the user navigates there.
May be this will help you
ocLazyLoad
angularAMD
I am in trouble with a specific requirement here for our Application.
We a are setting-up an angular application inside a pre-existent Rails Application.
As a full refactor of our code-base is currently out-of-the-question we are dealing with some hard customization and hackings on both sides to allow a incremental introduction of Angular.
What we need for now is a way to tell the ui-router to bind only to the links we have the ng-sref attribute and do not bother with all the regular href links within our app.
Is there a way to achieve this behavior ?
Below is my current code:
angular.module('app').config(function($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider.state('test', {
url: "/1/test",
template: 'test'
});
$locationProvider.html5Mode({
enabled: true,
requireBase: false,
rewriteLinks: false
})
}
)
With this approach, all links, even those ones without any route setup for it, and without a ui-sref attribute, are being watched by angular routing service and prevented to work like it`s previous behaviour. I do not want to add every route of our huge app to the angular routing setup (this is a terrible idea) because most of theses links are to non-angular pages. I just want angular routing service to ignore this links, or these locations that are not defined. Maybe a setting for the $location service to let those guys fallow along with its previous behaviour (ajax requests, regular requests, or Turbolinks requests). I am pretty sure this is something really trivial that I might be missing the point.
What happens when I click on theses links is that the window location changes, but nothing happen. The browser request is not triggered.
Thank you very much in advance.
###################################################################################
# My suggestion is use the ui-router to route to specific pages as shown
# in the example below.
# <a ui-sref="/login">
# <a ui-sref="/logout">
# <a ui-sref="/signup">
# <a ui-sref="/profile">
# 'ui-sref' will take you to the specific pages.
# You can also use '$state.go' to take you to specific pages as shown below.
# $state.go('authentication.login');
# $state.go('authentication.logout');
# $state.go('authentication.signup');
# $state.go('authentication.profile');
###################################################################################
(function() {
'use strict';
angular
.module('app.foo.authentication')
.config(moduleConfig);
/* #ngInject */
function moduleConfig($translatePartialLoaderProvider, $stateProvider) {
$translatePartialLoaderProvider.addPart('app/foo/authentication');
$stateProvider
.state('authentication.login', {
url: '/login',
templateUrl: 'app/foo/authentication/login/login.tmpl.html',
controller: 'LoginController',
controllerAs: 'vm'
})
.state('authentication.logout', {
url: '/logout',
templateUrl: 'app/foo/authentication/logout/logout.tmpl.html',
controller: 'LogoutController',
controllerAs: 'vm'
})
.state('authentication.signup', {
url: '/signup',
templateUrl: 'app/foo/authentication/signup/signup.tmpl.html',
controller: 'SignupController',
controllerAs: 'vm'
})
.state('authentication.profile', {
url: '/profile',
templateUrl: 'app/foo/authentication/profile/profile.tmpl.html',
controller: 'ProfileController',
controllerAs: 'vm'
});
}
})();
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
I am interested in using a Angular Material based contact form on a Shopify hosted page. Because the rest of the site is not built with Angular Material (yet), I would like to implement this contact form in a modular fashion, and have it isolated within its own div. The problem I've run into is that the stylesheet (currently linked in the head) for Angular Material is affecting page elements outside of the desired area of influence. Is it possible to isolate Angular Material content away from the rest of the page? How might one go about it?
You can create separate Angular module for you required template file and Inject angular material there. Link angular-material CSS in that template file only. This way It won't affect other pages.
The only way i think you can do this is by using an iframe because the css will always combine, and will follow the rule of cascade so the one that is below will override the others.
You can use angular-ui-router states with seperate angular modules. So you can inject angular-material one of the state of your routes then use it.
module.exports =
angular.module('parentModule', [
'angularMoment',
require("./childFolder"),
])
.config(function ($stateProvider) {
$stateProvider
.state('parent', {
url:"parent/",
views:{
'': {
templateUrl: 'main/layout.html',
controller: 'MainController'
}
}
})
.controller('MainController', require('./mainController'));
module.exports =
angular.module('childModule', [
'ngMateiral', 'ngMessages'
])
.config(function ($stateProvider) {
$stateProvider
.state('parent.child', {
url: "parent/:id",
views: {
'': {
templateUrl: 'main/layout.html',
controller: 'MainController'
},
'content#main': {
templateUrl: 'main/child/layout.html'
controller: 'ChildController'
}
}
});
})
.controller('ChildController', require('./childController'));
My application is created by using MVC 4 + AngularJs.
In this application we are using Bundling for render the javaScript and css files, this is working as expected.
But for the $routeProvider we are using templateUrl to load the template in runtime, but the speed of page is decreased.
For the reason i have created the below folder structure:
HTML
Home
Index.html
Xyz.html
Student
Create.html
Update.html
I want to render these files using the bundling like below:
[
{
key:"/HTML/Home/Index.html",
val:"HTML text"
},
{
key:"/HTML/Home/Xyz.html",
val:"HTML text"
},
{
key:"/HTML/Student/Create.html",
val:"HTML text"
},
{
key:"/HTML/Student/Update.html",
val:"HTML text"
}
]
In that case we use $templatecache and caches all the key with values
and then we can able to use like below:
$routeProvider.
when('/Home', {
template: $templatecache.get("/HTML/Student/Update.html"),
controller: 'HomeController'
}).
when('/planning', {
template: '$templatecache.get("/HTML/Student/Create.html"),
controller: 'StudentController'
}).
otherwise({
redirectTo: '/Home'
});
This is taking long time in initial load, after that it loading fast.
How can we render template using bundling?
How to put html in $templatecache (using services or other)?