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
Related
I would like to create a Single Page Web App with Angular but I couldn't decide to project type.
(Just generated files by tools like angular-cli or that generated files inside an Asp.Net Core Project)
I got some question.
What are the advantages and disadvantages of building angular app on ASP.NET Core Project?
Which cases I should prefer to locate angular app inside a ASP.NET Core Project?
I'd like to take a stab at this. I'll agree that the answer is on some part opinion based though.
I have just been comparing the two versions for a new project that I am involved in.
First some facts
The Angular project created inside of the ASP.Net core application is in no way dependant on the .Net code. You can navigate to the directory and type ng serve and run it by itself.
You can copy the angular code to another directory or repo and host it by itself if you for some reason later on decide that you don't want to combine it. All you have to do is copy paste the angular code, and then remove some lines in startup.cs regarding the internal hosting.
The code that gets added inside of the asp net core template is close to the base angular app with a few examples added on.
If you use the login functionality template it implements an oidc client, and an identity server on the back end, (opinion) pretty much the same way I would have done it myself. There is nothing stopping you from rewriting it if you don't like it. At worst it's a good example of how it can be done.
As of today the template is using Angular 8.0.0, you can just change the package.json to get the latest version and run npm install. It works great.
You can still use Visual Studio Code for the Angular parts with a combined project.
Here are when Id choose the different versions (warning opinions ahead).
When to choose the asp.net core angular project.
Small web app with limited functionality.
Small team, probably same person writing angular code as api code.
If you are unsure. You can always split later.
When to choose separate apps.
Big team with deployment builds and automation.
If you want to host angular and asp.net core separately (for reasons such as to achieve maximum performance and load balancing in apps with thousands of visitors).
Separate people coding angular and asp.net
You don't like having it all in same repo and want to split it up.
In a bigger teams and contexts with multiple APIs you will probably have to deal with CORS anyways, but if not you will have to at least think about it for this to work.
If you are unsure, you can always combine it to one app later.
I am using Yeoman to auto-generate a project using Bootstrap & Sass. The one thing I am having trouble with is changing the default structure of the project to be more modularized. The generator is here on GitHub.com
Currently the application is structured like so:
/app
/images/
/scripts/
/controllers/
main.js
app.js
/styles/
main.css
/views/
main.html
index.html
I'd rather have it separated into individual directives with a core(shared) folder, so that it would be like so:
/app/
/directives/
/home/
home.html
homeCtrl.js
home.sass
index.html
app.module.js
app.route.js
But I am having difficulty figuring out the best method of modularizing the project. Am I supposed to be creating the file structure that I want with the pre-generated application, and then edit it within the Gruntfile.js? Is there a more streamlined way of doing this, or am I SOL doing it manually?
The best and elegant way is to follow their guideline around creating a customised template which you can use to generate apps based on it.
However, if this is a one off thing you probably won't need to bother unless you want to create something decent and share it with community, so other people can use your template and create their app with modularised structure.
Even if you don't try to write your own template you can still read the guide and modify the initial template generator to change the file structure before creating the app for you.
Here is another good article around template customisation:
https://scotch.io/tutorials/create-a-custom-yeoman-generator-in-4-easy-steps
This project appears to be abandoned. The most recent change is a year ago, there are 67 issues and 18 pull requests. It's probably only generating Angular 1.x code as well, and that may not be "up to date" with current Angular 1 best practices.
You can, of course, fork the project and make changes yourself, and even take over maintenance of it, but you might be better to look at something like Angular-cli, which generates Angular2 code, and is being actively developed.
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 )
We have a large web project, where we need components which can talk to each other which can be put in a central repository of components for different projects.
Using reuirejs and Backbone for the modular development. Went through different boilerplate available for backbone and requirejs, but none matched my requirement. So I have created following directory structure. It can be explained as follows.
---resources
|---custom-components
|---mycomponent
|---js
|---views
|---models
|---collections
|---css
|---templates
|---mycomponent.js
|---mycomponent2
|---js
|---views
|---models
|---collections
|---css
|---templates
|---mycomponent2.js
|---libraries
|---backbone
|---underscore
|---jquery
|---jquery-ui
|---jqueryplugins
|---jcarouselite
|---thirdpartyplugins
|---page-js
|---mypage.js
|---mypage2.js
resources directory will contain all the resources. Under that we will have 4 directories as mentioned.
libraries, jqueryplugins and thirdpartyplugins are obviusly the directories for the name they say.
page-js directory will contain the actual main-js which will be used inside our html file as requirejs data-main attribute.
Custom-component is where all widgets created by us will reside, as you can see it has a js file with same name as that of the component, which will be entry point of this widget. This directory also has directories for js, css and templates. CSS and templates will be loaded by text plugin and CSS plugin respectively. Js directory will contain all the backbone code to make this widget work.
Custom components will be asked by main-js residing in page-js.
Coming to what I need.
1. I want experts to have review this directory structure in perspective of large web projects, where you will need to share your widgets with other teams. suggestions are welcome.
2. My each custom-component will define a module, which will have dependencies within package structure as well as outside package structure. I want to know, if there is any way to use r.js to optimize only my custom widget dependency within package structure and let the plugins and libraries optimized separately.
3. I am developing single page ajax application, so I will be asking modules on demand so I need to cleanup modules and widgets when I dont need them, is there any way for cleaning up I should be aware of?
About the directory structure
As a directory structure pattern, I highly recommend using directory structure of cakePHP. it's really robust as in words!! I'm running multiple apps (one of them is as big as Groupon) and it works just like a charm.
You may need to tweak it a little because, you know, cake is a PHP framework and yours is a javascript one.
Here is the cake's awesome MVC directory structure:
Please note that you may host thousands of apps on a single cake installation. so if you're interested, what are you waiting for? go to their site and read their docs.
About the cleaning up techniques
Well, here is one of the downsides of the Javascript which I don't like. there is no real way to destroy a OO module like in Java or C++. here we don't have such things like C++'s ~ destructors.
For many years, programmers use module = null to free up memory from un-used codes.
Take a look at these also:
Can dynamically loaded JavaScript be unloaded?
Loading/unloading Javascript dynamically
How to unload a javascript from an html?
Hope it helps and good luck on designing your app ;D
Probably I'm late in answering this, but anyway let me share my views here, incase someone else finds it useful.
Your directory structure looks alright. It is always a better design to keep your business components self contained in to a particular directory. I will not recommend Cake MVC structure which break the Open Close Principle. Also have a look at the directory structure recommended by http://boilerplatejs.org which is a reference architecture for large scale JavaScript development.
I do not get the question very clear. when r.js is run it will optimize all JS files it find in the directory (exclude possible) and then create a single script by going though the dependency tree. In production you only need that single script (plus locale files if i18n plugin is used)
Read my blog post below. It might give you some hints: http://blog.hasith.net/2012/11/how-much-multi-page-single-page.html
I'm just taking a look at Sproutcore (gem version 1.6.0.1) to see what I can do with it.. so excuses for the beginner questions...
I've gone through the tutorial and looked at the doc mini-site.
I'm wondering how I should organise my source code files. After building the really simple todo app I've already got one messy monolithic javascript file that contains a model, some views, some view controllers, etc.. i can't picture this scaling well.
I've noticed that if I add another js file it is automatically inserted into the project when I load the app in a browser but I'm second-guessing what order those files go in - alphabetically my file (test.js) should have been included before todos.js but it wasn't.
What's the recommended approach to organise a larger scale app; are there some guidelines for this?
Couldn't see anything on the sproutcore website, strangely enough..
What if I want to share models between apps, is that possible too ?
Thanks
The helper tools should arrange the files for you. Granted, you might not use them. Here is the folder structure I have from a project I did a while ago
So under the root project directory, there is an apps dir, a frameworks dir, and a Buildfile and README (the other stuff you see is not necessary for sproutcore).
In the apps dir, you see the main app (sudoku in this case) directory. Under it, you see, directories that directly relate to the objects you are going to create -- datasources, controllers, models, views, states, etc....If you put more than one app in the apps dir, you can access both from localhost:4020/, i.e. localhost:4020/app1 vs localhost:4020/app2
I didn't expand the frameworks dir, but in it are all the frameworks the project uses. So if you want to modify sproutcore, you can put the version you use in frameworks, and the build tools will use that version. It is a good idea to make your model layer its own framework, so you can use it with other projects if you want. You model framework should be completely decoupled from the rest of the app; it should expose an API that any client app will use.
You can further create other directories under these directories at your discretion. For example, if you have a complicated application around a Person model, you can create person directories under models, views, controllers, etc, and then put your code in their.
Note that if you have a PersonController object, the file name would be person.js according to convention, but that's up to you.