How can I load module on demand? - javascript

I know I can load modules (dependencies) in AngulrJS when bootstrap the app like this:
var app = angular.module('myApp', [
'ngSanitize',
'ionic',
]);
I want to load some modules on the given controller, not global.
For example I have two controllers:
app.config(function ($stateProvider, $urlRouterProvider, $locationProvider) {
$stateProvider
.state('index', {
url: '/',
templateUrl: 'partials/index',
controller: IndexCtrl
})
.state('addPost', {
url: '/addPost',
templateUrl: 'partials/addPost',
controller: AddPostCtrl
});
$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true);
});
I want to load ui.tinymce module in AddPostCtrl controller only, so I can use tinymce editor on addPost page. But I don't want to load ui.tinymce when I visit index page.
Is there any way to do it?

You nee to use AngularAMD, it lets you create angular objects on demand:
http://marcoslin.github.io/angularAMD/#/modules
http://weblogs.asp.net/dwahlin/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs

Related

AngularJs Ui-Router adding new states to the existing app.config

I'm currently working on a very large scale application that involves many routes for the many different components the application has. My team and I have decided to try and separate out the different routes into their own file, rather than having a very large routes file.
I have poked around trying to create a variable and importing into my app.js file and passing my created route object to a new state.
I keep running into errors when I try to import a file in my app.js file.
I want to know if there is a way to pass state objects from different files into the main app.config ?
Here is my App.js file that works with a statically defined state
let app = angular.module('ordyxApp', ['ui.router']);
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'pages/login.html'
})
.state(system)
});
This is what I'm trying to achieve
pages/clockIn/clockInRoute.js
export let ClockIn = {
url: '/clockIn',
templateUrl: 'pages/clockIn/clockIn.html'
};
Then my app.js file would look similar to something like this
let app = angular.module('ordyxApp', ['ui.router']);
import {ClockIn} from "./pages/clockIn/clockIn.route";
app.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'pages/login.html'
})
.state(ClockIn)
});
you should set a name for the state
stateProvider .state('home', {
url: '/home',
templateUrl: 'pages/login.html'
})
.state('clockIn', ClockIn)

Angular Route not working - some thing wrong with template url

I'm starting with AngularJS, but Router not working on my site.
This is some config relate to my route:
Firstly, app.js:
// Declare app level module which depends on views, and components
angular.module('myApp', [
'ngRoute',
'myApp.view1'
]).
config(['$locationProvider', '$routeProvider', function($locationProvider,
$routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.otherwise({redirectTo: '/'});
}]);
Secondly, view1.js
angular.module('myApp.view1', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view1', {
templateUrl: '/views/view1/view1.html',
controller: 'View1Ctrl'
});
}])
.controller('View1Ctrl', [function() {
}]);
angular.js, app.js and view1.js are added to the index.html
ng-view is used to show the content in view1.html
this is my folder tree:
Project
** admin
****** app.js
****** index.html
****** views
********** view1
*************** view1.html
*************** view1.js
Could you give me some advise to make it working??
Thanks for watching my question!
I would suggest moving your configuration all to one config. Also there is no need to reference myApp in your module instantiation. Another thing is make sure you have angularjs route file in your index.html. The following will work.
Try this:
var app = angular.module('myApp', ['ngRoute']).
app.config(function($locationProvider, $routeProvider) {
$locationProvider.hashPrefix('!');
$routeProvider.when('/view1', {
templateUrl: '/views/view1/view1.html',
controller: 'View1Ctrl'
})
.otherwise({redirectTo: '/'});
});

$locationProvider.html5Mode is not a function

Hey I am trying to enable html5 in my angular project based on this blog but using ui-router
https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag and the angular docs
https://docs.angularjs.org/api/ng/provider/$locationProvider
Basically I keep getting an error saying that html5Mode is not a function and it's confusing me as to why.
I have included it in my config file and adapted the urls including a base url. It all works fine but as soon as I add
$locationProvider.html5Mode()
I get an error saying it's not a function. So I guess my question is has the function name changed, am I missing a dependency, and if not why is this not working? In advance thank you for taking the time to help me.
angular.module('myApp', [
'ui.router',
'ui.bootstrap',
'ngTouch',
'ngAnimate',
'myApp.version'
]).
config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $locationProvider) {
$locationProvider.html5Mode({
enabled: true
});
$stateProvider
.state('home' , {
url: '/home',
templateUrl: 'app/landingPage/landingPage.html'
})
.state('landingPage', {
url: '/landing-page',
templateUrl: 'app/homePage/homePage.html'
})
}]);
You forgot to inject $urlRouterProvider as your second param.

Angular dynamic controller / templateUrl

I am trying to build my first angular app and looking to setup dynamic routing so that I can build out the app without having to continuously add to the $routeProvider config. I haven't quite found the simplest / cleanest approach yet, any guidance is much appreciated. Below was my first approach.
angular.module('app', ['ngRoute']).config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider){
$locationProvider.html5Mode(true).hashPrefix('!');
$routeProvider
.when('/', {
redirectTo: '/home',
})
.when('/:section', {
controller: function(r){
return r.section+'Ctrl';
},
templateUrl: function(r){
return 'app/views/pages/'+r.section+'.html';
}
});
}]);

AngularJS app URL

I am using ngRoute in my AngularJS app to build up different app routes, below is part of my app.js. Now the problem I am facing is that the URL is shown as ( localhost/myapp/index.html#/home ) while my client needs is at localhost/myapp#/home so I was wondering how I can get the index.html out of the equation or at least make it as localhost/myapp/index#/home without the .html? Thanks
var myApp = angular.module('myApp', ['ngRoute','ngSanitize']).
config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/home',
{ templateUrl: 'templates/home.html',
controller: 'homeController'
});
$routeProvider.when('/about',
{templateUrl: 'templates/aboutus.html',
controller: 'aboutUsController'
});
$routeProvider.otherwise({redirectTo: '/home'}); }]);
You should be able to do this with a combination of $locationProvider.html5Mode(true) and <html><head><base href="/myApp">

Categories