I know this question maybe duplicate.But I am still not getting valid results based on those answers.Anyways i have following doubt:
I want to implement angularjs with loading controller files on demand, with template routing.I have used requirejs concept for this.But I am not able to load ONLY controller files on demand.
For ex.
app.config(function($routeProvider) {
$routeProvider.when('/', {
controller:'page1',//I want to load controller file here
templateUrl:'page1.html'
});
});
I have used resolve concept here,but it didn't helped.
In above code I want to load controller file and also bind it to respective view.Please provide any solution or reference.If possible please provide detailed solution.
Thanks.
Related
The application has many small HTML files. Is there some way that I can concat these together into some kind of template and had them all at one time? I'm not sure if this would be AngularJS or ui-router functionality or if that option even exists. Looked and did not so far see any examples of people doing that with ui-router. Hope to get some good feedback or some examples.
Yes, it's possible. Suppose you have these two html files:
partials/foo.html, containing <h1>Hello</h1>
partials/bar.html, containing <h2>World</h2>
and those constitute the value of the templateUrl of two of your states.
You can generate a JS file containing that kind of code:
angular.module("templates").run(
function($templateCache) {
$templateCache.put('partials/foo.html', '<h1>Hello</h1>');
$templateCache.put('partials/bar.html', '<h2>World</h2>');
}
]);
If loaded, this JS file will thus prepopulate the cache used by angular to store the templates, and the router will thus not have to get them from the backend.
There are gulp (and probably grunt) plugins doing that for you at build time. A quick google search found this, for example: https://www.npmjs.com/package/gulp-angular-templatecache
I am using ngdocs to document my AngularJS application. I have a controller in the API that is specific to the directive itself. I have attempted to document this as #module.directive:dirName.controller:ControllerName, but this doesn't seem to tag this properly and the controller ends up being documented under a new module labeled as module.directive:directiveName. Should I just document this under the module? Anyone have any thoughts on the best way to do this?
I am working on a project with more 300+ pages based on AngularJS.
Everything is all right, but I'd like to find a way to get rid of those 300+ lines for routing.
Here my thoughts :
User goes on url /settings/company
AngularJS has to load templateUrl at '/template/'+settings/company+'.html'
Then AnguarJS loads controller SettingsCompany+'Ctrl'
Do you think if it is possible ?
If you are using ui-router which I would recommend you can create your routes Dynamicly all you need to do is
var state = {
url: someUrl
template: someHtml
controller: someController
};
$stateProviderRef.state(TheStatename, state);
You obviously need to do that before loading the view. I personally have a static login in my app and after i know which user logged in i load different modules and with this i basicly create the states dynamicly and load the Controller files with lazyload.
Hope this was helpful
I would to dynamically load controller in my partial file so my code is better organized. Through my research, I found that if I want to load controller from partial using the script tag, I need to include JQuery.
However, these approach seem to only work if my controller is declared in the global scope, i.e.
function MainCtrl($scope) {}
If I switch to using module in my controller.js
angular.module ("myApp").controller ("MainCtrl", function ($scope) {});
this no longer work with the error message
"Argument 'MainCtrl' is not a function, got undefined"
Below is a plunker to demonstrate this.
http://plnkr.co/wNv3UD
How could I make this work?
Note
I did not include controller.js in index.html intentionally. I want to load controller from the partial.html, since it would only be used there.
Edit
I was able to achieve what I wanted to to after reading this question: AngularJS Dynamic loading a controller
This seem to be a straightforward approach to support lazy loading. Hopefully the $controllerProvider.register method could be exposed through angular.module.controller in future versions to support lazy loading.
You may want to take a look at [RequireJS][1]
it provides a good and easy way for you to load your .js files on the run.
for the dynamic controller loading part: you should write a provider (a service) which exposes some methods to register your controllers wile the angular app is running (take a look at $controllerProvider in angular docs)
i suggest you take a look at this post as it mentions how to fully customize your application regarding the script loading and controller registeration and stuff like that.
You can achieve this using custom directive and in directive you can load script using jquery getscript or jQuery ajax call, directive will fire when you load the partial
I am struggling to find a way to get angular and my code to play nicely and since angular is awesome i know it must be my problem.
Some of my models have static data only but most have either only dynamic data that i pull in from rest services or a combination of static/rest data.
many of the examples i see here and in the docs just deal with a small static json set of data.
My problem when i put the angular script call in the html it tries to load and execute before my models are loaded and ready to go. there has to be a way to coordinate that loading time.
So i have tried to devise ways to make sure my model js scripts are all loaded and then finally call for the angular script in a getScript call.
Also i wrote a custom filter and i want that to be added to my module. when i add the module name to the ng-app tag and i try to lazy load the angular script via getScript it errors and says it doesn't recognize my module name.
If i remove the module name from ng-app and then try to initialize my filter module it does lazy load angular.js but then it says my filter method is invalid because (i guess) it is not registered with the model.
I'm sure i'm missing some key piece of information somewhere. Angular has to be smart enough to load and then realize that my models will take a few moments to arrive. Not just run through my html and bark at the first ng-controller tag because the model isn't loaded or the service call to fill the model is not done yet.
Right now if i put a tag on my html like so:
<html class="no-js" ng-app="yourApp">
I get an error when i call getScript on angular.js that says
angular.js failed to load: Error: No module: yourApp
Please help. thanks for any suggestions.
If I understand correctly, you load angularjs not during page load, but via an ajax call? If you do that you will need to do a manual bootstrap.
Here is an example I'm using with require.js, but with jquery's $.getScript(), it will be similar:
require(['angular', 'jquery', 'app/app-config'], function (angular) {
'use strict';
angular.element(document).ready(function () {
angular.bootstrap(document, ['app']);
});
});
In your case it will be something like:
$.getScript("http://code.angularjs.org/1.0.4/angular.js", function(data, textStatus, jqxhr) {
angular.bootstrap(document, ['myApp']);
});
Just make sure all javascript files with controllers, directives, ... are loaded too.