I am trying to build an angular js web project. The project will be such that, on UI side, I will have html with angular to handle presentation. Data on/from UI will be obtained/posted using ajax.
These ajax calls will take us to one of the methods in spring controller. These method will connect to another Rest WS application to obtain data / save data.
I have been able to understand the Angular JS framework and I feel comfortable to an extent working on it now. However I have no experience in designing an application structure from scratch. I have read http://scotch.io/tutorials/javascript/angularjs-best-practices-directory-structure to understand the directory structure's best practices.
I have integrated angular with my eclipse IDE.
Now, my question is, how should I go ahead with designing my application. Will it be the way we normally use js in a J2EE application? Or it is to be done in some other better/advisable way?
Any help is appreciated.
PS: Is it advisable to build an angular JS as static Web Project? I read this somewhere, I cant find the link now.
Thanks
Here are some tips:
Separate your javascript files and organize them so that they are functionally together.
Setup multiple SPAs if necessary, and organize your files/folders in the same way for each SPA:
home\index.html
home\index.js
home\index-controller.js
home\module.js // contains the Angular module definition
home\templates\user-control1.html
admin\index.html
admin\index.js
admin\index-controller.js
admin\module.js
admin\templates\user-control2.html
Create Angular UI modules specific to your application so that they can be re-used
shared\your-ui.js // this angular module contains UI directives
shared\your-ui\directives\table.js
shared\your-ui\directives\table-controller.js
shared\your-ui\directives\templates\user-control.html
shared\your-ui\services\test-service.js
Use Grunt or Gulp to build your JS files, minify them, run automated tests, and deploy them to where they need to be. Deploy your Angular UI modules and deploy your App.js module.
Use a javascript module loader (RequireJS, Webpack) so that dependent files can remain separate.
Related
I am trying to build a simple website with nodejs, express and vuejs.
In tutorials i saw people recommending having the frontend and the backend communicate through an API by using the vue-cli. (example). 1. Do People use this method in production as well?
I also saw that you can build the vue cli files into a /dist folder and move this folder into the backend. Then you can use the backend to serve the generated index.html (example)
2. After doing this, is vue.js still communicating with the backend through the api i wrote with the vue cli for development?
3. Do i have to change code in the backend to deploy the website this way, other than statically serve the index.html file that was build by the vue-cli? and lastly 3.Can i just npm install vue and use the provided vue.min.js in a scripttag and just lose some usablillity while developing?
I hope my question is understandable and i appreciate every answer.
The backend typically serves the frontend via REST API.
Your Vue app is completely separate from your backend. Most applications keep business logic in the backend and use the frontend as a view. For smaller projects, you can keep the logic in the browser.
To answer your question directly: No, the Vue CLI is not used for that. It's purpose is to enhance your development process.
Relevant topics you should learn about: Representational state transfer (REST), Single page applications, Ajax
Advanced / less relevant topics: GraphQL, Server side rendering, HTTP, web sockets, MVC
Not sure if my terminology is correct here. I have a Node/Express server, serving up Jade template files to an AngularJS app.
For my live deployment I need to be running the app in Apache / static files, rather than the dynamic Jade views.
Are there any packages that I can point at my views/partials folders and render the Jade templates into HTML files, as part of my build process? (I'm using Gulp if it can be integrated into that too).
You can use gulp-jade, as long your templates do not use any dynamic data that needs to come from node.
But your motivation seems strange. Are you only using node.js as a convenient local webserver and your live deployment will still use angular? In that case, just serve the templates statically with Apache and let angular handle the rendering.
I'm currently developing an app with angularjs and cordova. I use Gulp to compile all the js, less, etc and merge it into a www folder. It's a big project and many apps will be created based on the same base core. I don't want to "clone" the entire project each time a have a new client because if a bug is found or a feature has to change I will have to redo everything in every single project.
I want to know if there's a way to create a build system with Gulp, where I could have a base core js/less, and that base js/less core could be replaced if the same js (or angular module name for instance) is found on another folder.
Example image:
folder structure
In the above example, I will need a specific task to build "ProjectA".
I was thinking in something like "gulp build ProjectA" and then all files in "AppCore" folder would be compile only if there wasn't the same js, less or angular module inside "ProjectA" folder.
Or I don't know if is possible also to compile everything in "AppCore" and then override that result with the content found in "ProjectA" if equal. If something new in "ProjectA" that would be added.
Is there any gulp plugin to achieve this? Or does this have to be done in a different way?
What is the best way to create a flexible project like this with a shared based code core?
Thank you
I am starting my own Angular web application. I have experience coding in c# and angular but I have never had to set up my own project/solution. In this case, I would like to set up an ASP.NET Web API that will communicate to an Angular SPA front end in JSON (although it should be agnostic to the front end, any application that speaks JSON should be able to communicate with it).
Additionally, I have heard good things about grunt and so I would like to incorporate it into the project (at the very least to compile LESS and minify and combine my angular files).
I am working with visual studio professional 2013. I began by creating a Web API project and downloading the WebEssentials plugin.
I am just a little confused on how to continue here. Should I split out my angular into a separate project in the same solution? How do I include grunt?
How do I use grunt in the context of visual studio to include my angular files in my index.html file?
The project comes with a Scripts folder and a Views folder. I know that it is preferable to structure the angular files by function so that the controllers and views are housed together. Should I be including my views in the scripts folder? How does that affect my build procedure?
I realize these may be very naive questions. Please bear with me, I am a complete beginner when it comes to these kinds of tasks. All I have done in the past is basically code.
Let's go step by step:
Visual Studio Solution with Web Api and Angular JS
You can store both Web Api and Angular code in same solution and project.
In this case you can arrange structure like this:
Content
Controllers
Models
Scripts (with app/ folder and vendor scripts like angular, jquery, etc.)
Views
index.html for angular application you can put into Scripts/app folder.
And all views for Angular you can put into Scripts/app/views folder.
Using Grunt/Gulp
Grunt/Gulp/Cake/Broccoli - those tools are simply an a javascript task runners, which allows you to to various things like combine your vendor scripts into one file, minify and combine your scripts into one file, transform your LESS to CSS, etc.
To use those task runners you can use Project Build Events. In project build events you can run Grant/Gulp tasks, which will do all the magic for you.
Also there is an extension for Visual Studio called Task Runner. This extension lets you execute any Grunt/Gulp task or target inside Visual Studio by adding a Task Runner Explorer window.
Example of using Gulp in Visual Studio Project by using Task Runner
To run your Gulp tasks by Task Runner automatically you need to add a line into start of your gulpfile.js
/// <vs AfterBuild='<here is a name of your Gulp task>' />
This line will force your task to run after each rebuild of your project.
Useful Info
To get additional info about Apps with AngularJS on ASP.NET you can check video by John Papa: "Building Rich Apps with AngularJS on ASP.NET"
Usefull Gulp modules:
gulp-useref - Parse build blocks in HTML files to replace references to non-optimized scripts or stylesheets.
gulp-less - Less for Gulp.
gulp-uglify - Minify files with UglifyJS.
I have been messing around with embejs and I have been using default index.html with script tags to render templates on the page, sufice to say my index.html file is littered with:
<script type="text/x-handlebars" data-template-name="aisis">
</script>
That I would like to split up. Now I have worked with ember a little bit in rails applications, but this app doesn't have a back end, doesn't use anything other then javascript and html as its a simple internal app.
My question is, how do I split this up into partials and various other templates and still keep the app nice and small, nice and simple? I have seen a bunch of ember tools out there that generate or scaffold projects for you, but I get lost and confused fast. Where as the way I have been doing it has taught me a lot, it's just my project is massive in one index file...
Ember is designed so that each route should correspond against a template. Whenever you enter a new route, a corresponding template will automatically be rendered unless you override the "renderTemplate" hook.
Try going through the "getting started" guide here: http://emberjs.com/guides/
I would recommend looking at the yeoman suite of tools: http://yeoman.io/
It includes an Ember generator that will scaffold your project, create your bower dependencies, generate a grunt file for builds, etc. Install generator-ember to get started with the scaffolding.
Just create an empty folder, and from there use yo ember to get a complete working app. Take a look at what is generated and you can get some ideas of what to incorporate in your app.
I would check out Ember App Kit. It lets you break up the templates into various files in addition to automatically importing correct modules, linting your code and providing various build options.
Ember App Kit (EAK) is a robust starter kit for developing
applications in Ember.js. EAK makes it easy to develop, build, test,
and deploy applications independent of any back-end build process.