I'm building out an angular app and I'd really like to use a single file to handle certain things like nav, meta data etc. Partially for my OCD, but mostly because it will make managing that functionality a lot easier down the road.
I had it all set up and running, but it appears that only my nav app is running (it looks like this)
<nav ng-app="nav">
And has it's own file
<script src="js/nav.js">
Then, I tried adding in some content in another app
<div ng-app="content">
But I'm getting an angular load issue on the controllers in that app saying that they are not functions
Error: [ng:areq] Argument 'chartCtrl' is not a function, got undefined
Even though ng-app content script is loading fine and the "didload" console log I have INSIDE of chartCtrl is working fine...
Just wondering if anyone has seen anything like this before. Thanks!
This is not good idea. By this crumbling, you are dropping most of features that makes Angularjs usefull. One website = one app is what you want. If you worry about organizing files, it is not related to Angularjs, but build process. Time when there was one huge file is long gone.. You can organize files as you wish (into folder structure), then concat/import them via build engine (npm, grunt, gulp, webpack etc..) into one file. Angularjs app then handle loading dependencies in right order... Just read some articles like this and ofc documentation..
Related
I have been looking for a few hours for something that could help my problem, but as of now, I havent found it.
The problem is:
I am working on an PHP/Latte server-side rendered website, where I have decided to implement Vue. However, since there is no possibility for me to change this website into an SPA, I need to just create micro components with Vue and use them inside the BE templates.
By that I mean that there is a .latte template, where I insert a <My_component /> element, which gets rendered client side.
Which is fine for some components, but others, like the main menu, product or something else important for SEO purposes, needs to be somehow pre-rendered for crawlers.
By now I have read 10+ articles and watched 4 videos on prerender-spa-plugin, which I am sure is a great solution for SPAs, but I dont think it would work for my case. Especially since I am not using Vue router.
Nuxt.js also seems like not what I want and would be a bit of an overkill in my case.
Basically I just need a webpack or Node based plugin, that would take .vue files, that I would need to be pre-rendered, and create (build) the static HTML for them. Which would be either automatically or by hand inserted into the .latte template.
Has anyone had any experience with this?
Does anyone know of a recent blog post or tutorial on which angular 2 .js files along with the appropriate d.ts files I need so I can just drop them into an existing VS solution without using NPM? I see that I can get the angular files here, but not sure which ones I need. According to the Angular docs, I need do nothing to get typings files for library packages that include d.ts files—as all Angular packages do., but again, when I look thru a sample Angular app, don't know which d.ts files I need.
I can't stand bloat and clutter. Below is a brand new asp.net core on .net 4.6 on the left, the same thing on the right after following this blog:
I can't stomache having to add over 13,000 files to get ahold of maybe 20?, 30? files.
Maybe I'm being too OCD about this, but right now I'll take any suggestions to avoid that bloat, even going with another front-end framework. I've briefly looked at Aurelia, which I like, but again, NPM. Not sure React is appropriate.
My business domain includes Category, which is a self-referencing class/table, and I'm after an intuitive UI where the user can quickly create their own Category structure without having to do a bunch of post-backs to the server. Seems with either Angular2 or Aurelia, I'd only need a couple of Components to accomplish this in the browser.
I know Angular 1.5 added Components, and I may explore that if need be. From what I understand about React, it's not for data management.
So to reiterate my questions, can I get just the Angular2 files along with their d.ts files so I can code in typescript? If not, the same question for Aurelia. And if not, any way that I can keep bloat down yet still write some elegant front-end code.
Any help will be appreciated
Ok so for Development purposes yes your Angular 2 stuff will be massive (its annoying but necissary) however as I am sure you know, once you build your angular app for production (using angular cli for example) it cuts all those 40,000 files down to about 10. for example this is my application before and after production...
and after
So I would guess you want to build your angular stuff out first and then drop it in you application
Been struggling with something and I can't find any specific information around this.
I have an application, I'm trying to unit test (Jasmine), but for some reason, the testing project brings down the TS files alongside the generated JS, which is causing some unexpected behaviour:
I figured it has something to do with they way I'm building up the spec runner page, in my case, I wrote a back-end method that loads the necessary JS files from the project I am testing, and adding the references to the JS files to a section on the site, designated for this.
the files are added using their web URL, and not the physical location on the server, for example:
http://directives/Tests.js
Is there a way to stop IIS from bringing down the TS files as well?
I'm developing a web application, and I recently discovered the need of a basic input form. The rest of my application does not have much of this, mostly single input-fields. I figured I would try to use a javascript library for validation, and ended up choosing parsley.js.
in this youtube tutorial, the tutor uses bootstrapping, a term I have come across a lot lately, but have no experience with. I figured I'd try it out in the single page of my web app.
However I get errors on the first character of the css I try to import, stating that < is an illegal token. This is of course the start of the file <!DOCTYPE html>. So in other words, the .css is found and included, it is just not accepted. This error has been repeated with a couple of different import sources now.
I've tried to look a little outside the box, to figure out why. I read posts like these:
What is bootstrapping?
Setup bootstrup file in java web application
These have led me to suspect that bootstrapping might not be meant for importing a style sheet, for a single page which is only a part of a web app, like I am trying to do.
So, is it wrong to think that I can use bootstrapping as I would import a .css file, for a single page? If not, what else might my problem be?
EDIT:
I forgot to tell that I am importing the css and js libraries through their online url's. If i copy them to my workspace, and import them from there, I get this error:
PWC6199: Generated servlet error:
The code of method _jspService(HttpServletRequest, HttpServletResponse) is
exceeding the 65535 bytes limit
I am using RequireJS and I am creating a own script file for each page. However I also have some components that are included into some of the pages (server side). Should these pages also get their own script file, or should the necessary javascript be in the containing page? Some of the functionality for the included pages are common to many pages.
I think you'd be better off thinking about your javascript as reusable modules rather than page-specific functionality. So, say your page has a search box which initiates an AJAX request, a few date pickers, and a whole bunch of tabs. Each of these should be a module (or if the functionality they provide is complex enough, a few modules). By breaking down your app into small pieces that have very focused aims, you make it easier to test each bit in isolation (automated unit tests) and reuse the functionality elsewhere.
Now as to how to load your javascript modules, there's a point where it makes sense to strategically load stuff based on user needs (ex: core.js is loaded by default but search.js isn't loaded until the user accesses the "search" tab) but you can get pretty far just packaging everything into a single file (require's r.js tool does this for you) and using the same script file (main.js) on every page.
When using a single script file, keep in mind that your js will need to work when the target of it's functionality is not present. jQuery makes this super simple and you almost don't have to think about it - ex:
$('#js-foo').on(...) // <-- this doesn't blow up if '#js-foo' isn't on the page.
I've also seen people set a data-attr on the body tag for the page - e.g. data-page="foo" and key js off of that:
var page = $('body').data('page');
if (page === 'foo'){
component1.setup();
component2.setup();
}
In your case, I would try building everything into a single file using RequireJS / AMD-style modules. Each component would get its own module file (mycomponent.js), your main.js would require() all your modules and init things appropriately, and finally you'd configure your r.js build to package everything into a single file when deploying to / running in production.
If you are interested in exploring this topic more, check out these posts:
Single Entry Point FTW
Single Entry Point Redux