I am about the start working on a project which I want to avoid using Angular 2 as it's still not out there and this project will be finished way before Angular2 will be released.
One thing I really like in Angular 2 is it's: templateURL , where you can import html templates at runtime very easily and works great.
After googling I've found Webpack or Browserify but not sure how good they are for this specific functionality I'm looking for.
Are their any other javascript libraries or released frameworks that have this same functionality, if so, what are my options?
You can do it yourself with those simple steps:
Get the html file as string in your code (using http get on the file).
Injecting the result into the DOM. (using innerHTML or some other method)
No framework needed.
Related
I want to prototype a quick app but don't want to go down the road of using a framework like React or Vue. I'd also prefer not just creating an html file and a js file that is imported within the html.
Is there a way I can make use of npm packages, SCSS and still write vanilla Javascript without the usage of a framework?
Without using a framework, the most straightforward way to using NPM packages in the browser would be using Browserify. Check out https://medium.com/jeremy-keeshin/hello-world-for-javascript-with-npm-modules-in-the-browser-6020f82d1072 for instance.
Otherwise you can use Gulp,which helps running Browserify, SCSS etc, and use BrowserSync to refresh on changes. But I personally wouldn't go this way: while this is a great way to understand how stuff works, it takes a bit of time to setup properly, and isn't used that much anymore.
My advice is:
Go with Webpack or Rollup. Seems harder to grasp than Gulp but at the end of the day, learning Webpack is very useful (much more than learning Gulp), for instance if you happen to work on a project that uses it (and there are so many).
Use a backend framework that bundles all this kind of stuff. Like Laravel which uses Mix - you can even use Mix without Laravel but there will be a point at which you'll probably need some static data, some routing, interactions... So if you need something more than just hardcoded JSON data, go with a framework. Laravel is great for prototyping but it's not the only one.
I'm getting started with Ajax (jQuery) using WebStorm and not sure what project template to use for it.
I've added the jQuery plugin in WebStorm, but that doesn't give me additional project templates to choose from. I was hoping for some equivalent of say a new Angular JS project (which gives you a stub of what a typical project may look like in terms of structure), as I've never used jQuery/Ajax.
Or is that somewhat irrelevant, there isn't a lot more to it than just starting an empty project, adding an html & a .js file and start from there?
I have some experience using AngularJS 1.x in .Net MVC application. In that project, we basically downloaded all required Angularjs min files and included them in project. We did not use npm or bower. It worked fine.
Now my next project is on Java Web application. This is an existing application with plain servlet/jsp. I want to use Angularjs 2 on new pages that I'm developing. But I'm not able to make progress on how to include Angularjs in this existing project.
Angular team recommends to use Typescript along with npm/gulp. But I want to stick to javascript and not introduce complications with TypeScript in existing project. I was expecting to download angular min files and include in my JSP and get going. Apparently I cannot even find link do download min files. New Angular website doesn't even have link to download them. I also looked up angular github but couldn't find min files.
I would appreciate if someone can guide me in right direction. At this point, I'm thinking to stick to 1.x instead of 2.0. Thank you.
Wow, that is so annoying.
You could try creating a test project using NPM, add the dependencies you need, and then build the project. From there, you could copy paste out the javascript files you need.
Hope that helps.
You can find angular2 versions prior to release here : https://code.angularjs.org but if you want the latest ones you will have to try Samuel's answer.
Besides, if you're doing this project at school and it asks you to use servlet / jsp, you should stick with it and use something like bootstrap for easier html/css.
Doing the frontend with angular might be considered a cheat or a workaround ( speaking from experience )
I have worked with Angular 1.x and now starting with Angular 2. Now I am overwhelmed to see the number of js scripts that we have to add to our index.html just to get started.
I mean even if I exclude angular's (and its components') own js files, there are "systemjs", "es6-shim", "reflect-metadata", "rxjs", "zone.js".
And I keep on hearing that Angular 2 is 2 to 3 times faster than Angular 1.
I have used AngularJS 1.x and also ReactJS and no where I have seen this much dependency on other scripts.
What I don't understand is this - Don't all these script files make the browsers slow? Don't they create extra load on the JS Engine of the browser?
And are we assuming that we are only targeting the latest of browsers when we are developing in angular 2 ?
Will anyone please explain?
EDIT:
I would like to understand the performance effect by lots of JavaScript files.
Can you refuse/reject the fact that Angular 2 needs a lot more JS files to start working than Angular 1?
Well having more file to load may increase the first time loading the page, and memory consumption at start (not necesseraly in then end) obviously.
But once you passed that, this is pretty much unrelated to performance.
Furthermore by using libraries that have been specially developped and optimized for their purpose, angular developers don't have to rewrite their own part of code which would probably less optimized/ morebuggy than existing and widely used ones.
Let's take a simple example : underscorejs or lodash. By including it to your browser you will probably add some time loading, but by using the functionnality that the provide, your code will be probably faster because there is a lot of trick about javascript & performance when it comes to what those libraries are used for.
And it's not because you load those libraries that you will get their full code executed on each javascript loops, same goes for angularJS2 and all his libraries.
The most annoying thing about this could be the need, not only to learn angularJS2, but some of the others components to get things rights about how to code properly with angularJS2, increasing the learning curve so.
Among the file you showed : es6-shim is to make angularJS2 compatible for no-es6 browser, you had the same when using angularJS 1.x on IE8, nothing new for this one.
The Angular team is working on a build tool (partially included already in RC) that resolves all kind of stuff before the application is delivered to the browser
script inlining
CSS inlining
CSS rewrite for ViewEncapsulation.Emulated (default)
HTML inlining
lazy loading of components depending on routes configuration
replace declarative bindings by generated code
...
During development an Angular applications has to make dozens to hundreds of HTTP requests to get all resources. After the build step these are minimized to the absolutely necessary.
I've got a Play 2 application where my angular js dependencies (and possibly others) are declared using WebJars. When I serve up a page, I use the routing helper to fetch these javascript files.
If I want to test my javascript with Karma I need to specify the path to angular javascript files in order to run my angular dependent code. The examples I've seen on the web don't use web jars and just specify the path as ../app/assets/javascripts/lib/angular.js (or whatever). Is there a better way to do this?
I am not familiar with playframework and therefore I am not entirely understanding the restrictions it is bring to your JS Files but if this helps you can also do something like this in karma.cofig
files: [
'http://localhost:91/sample.js'
],
I performed some quick tests and it worked fine.