I am trying to develop an angularjs based web app but I am a little bit confused on how should I structure my app. For example I am used on using JSP pages when it come to the front end so for example every different component is a different jsp page let's say a home page, contact page etc. My question is what is the suggested way to do so in angularjs since the angularjs should be a single page web app should I create my content in directives and depending on the flow hide or show other directives or what ?
Any direction or suggestions for reading will be more than appreciated !
I highly recommend to you reading about Angular Style Guide made by John Papa.
View Angular Style Guide here
It's a very helpful guide which provides Angular best practices to deliver a testable, scalable and extensible app.
Related
I have old multi-page Rails website (more than 30 pages) and I'm going to implement Material design with some JavaScript effects for it. After investigations I found that Angular Material provides the most appropriate solution for me. But I'm not sure if it's good to use it, because I have multi-page site. As I understand basically Angular is used for single-page applications.
In fact I'll use only Angular Messages, Material, Animation and View features. Please advise if using such massive JS framework worth it in this case.
Angular does not need to be used only for SPAs. Here's a more in depth discussion of the topic Is AngularJS just for single-page applications (SPAs)?. That said, if all your using is messages, material and animation, those should be the only components you need to add to the project and so you shouldn't be bringing in anything more than is required, such as angular routing. Hope this helps!
I need to add new features to an already existing application. The application is built using Lithium and jQuery. The features that needs to be included have a complex view which allow users to analyze data and perform CRUD functionality. I won't go into details about the features here, but after working on a few simple Angular tutorials and side projects, I know that using AngularJS to create this view will make my life a lot more easier than creating the view using jQuery.
Over the course of the next few months we may convert the entire app to AngularJS.
I am uncertain about where I should place the Angular files and how to setup routing. How can I integrate AngularJS to Lithium so that part of the Lithium routing works and part of it is handled by AngularJS.
I also found this answer on stackoverflow but it doesn't mention folder structures or how to integrate Angular with Lithium. I think this link mentioned in the answers is supposed to have what I am looking for but it doesn't seem to exist anymore.
The link is down, but you can clone the source repository and run it yourself here: https://github.com/nateabele/li3-angular-presentation
Regarding organization, the simplest way would be to place the directory structure for your Angular components inside of /webroot. The more advanced (and in my opinion better) way would be to make them two separate applications: an AngularJS UI app, and a backend API in Li3 that it talks to.
First of all i am confuse for my project whether it can use angular.js or not, although i have started using it and i created some customization module with this but when i started applying it for all project i got stuck on many things.
My project is a order taking project and it has structure like this.
In the index page it has 3 panels.
left panle that draws all categories
middle panel that draws all category specific productes
and right panel that draws all the basket items with calculations.
On product click there also appears a model that draws all the customization.
I am using MVC-4.
Every thing on index that includes some layout is a partial view _leftpanl, _middlePnl, _rightPnl, _customziaion.
My concern is.
If i define the routes to the module i created how to fix on ng-view because per scope there will be one ng-view only. and my application load atleast 3 partial views to index page at the same time. So how would i fix on ng-view.
Just gimme some guide lines that i should follow to create this kind of application with angular.js.
Or it is not possible with angular because i think it is not a single page application.
Use the Angular-Breeze SPA template provided by the ASP.Net team http://www.asp.net/single-page-application/overview/templates/breezeangular-template
Don't mix up the Razor view/partials with Angular. Use ASP.Net MVC to manage only the REST interface and use AngularJS to embrace the presentation layer.
Learn the Angular Routing and Templates to mimic your requirements.
https://egghead.io/lessons/angularjs-routeprovider-api
https://egghead.io/lessons/angularjs-ng-view
It seems you have a problem to define what you really need.
AngularJS primary purpose is to do some Single Page Application. Which is, code only in HTML/CSS/JS in the front-end, and reuse your abilities in the back-end to produce DATA only (REST-json is the most classic but you can choose whatever you want).
So if you use a tool outside its primary purpose, you have to do some compromises : Of course you can mix backend template with AngularJS, but in this case, you can forget the router and ng-view.
Use AngularJS if you think you have some complex web interface. If it is only some static text, or even a few input forms here and there you don't necesseraly have to AngularJS, you can just use your classic server-side display rendering.
You could use ng-include to include each of your three partials into one view. Then in each partial view you can specify the controller with ng-controller. For creating the modal popup I would probably use ui bootstrap's modal
Alternatively you could use ui-router to create multiple parallel views.
I have following guidelines here which i hope will help you.
Do not mix Server Side MVC and Client Side MVC. AngularJS is primarly meant to augment the HTML and browser capability. The two-way binding of angularjs is excellent and provides lots of dynamic behavior. MVC4 scores best when we have to do lot of server side processing using the .Net platform capabilities.
But as you spent some good effort on this project and the corresponding technologies, there is a way out. Convert all your Controlller Actions in MVC4 to produce JsonResult and when the angularjs needs data use that, e.g. in $http.get( .
I am planning to develop my monitoring/dashboard pages for hardware devices like Cisco router/switch/controller using Angular JS Library.
My page contains graphs(line & area), Google maps, tables and some blocks (div with value)
Is it feasible to use Angular for monitoring data?
What are the advantages we can get by using Angular? since it is only monitoring we don't have to use 2 way binding.
I am looking for few points to justify why we need angularJS for monitoring/dashboard kind of pages rather than JQuery/Javascript.
Please let me know your thoughts and comments.
Thanks.
Using AngularJS is totally feasible.
Main advantages is that charts can be implemented as reusable components (AngularJS directives).
There is a project in development that allows building dashboard from arbitrary directives
Running Demo http://nickholub.github.io/angular-dashboard-app
Demo source code https://github.com/nickholub/angular-dashboard-app
Dashboard directive itself https://github.com/nickholub/angular-ui-dashboard
And here is example of visualizing data coming from WebSocket
https://github.com/nickholub/angular-real-time-charts
If your site is 100% static - and by that I mean that you do a request for a status page, and the page you get will never change before you do a new request - then angular might be a little unnecessary.
But if you want your status page to 'live', you could use socket.io to push new events and data to the client and let angular take care of the ui refresh.
There are some angular directives to work with graphs, but I have no experience using them.
Some pointers:
Node.js + socket.io + angular.js:
http://www.html5rocks.com/en/tutorials/frameworks/angular-websockets/
angular.js + charts: http://ngmodules.org/tags/charts
I have individual pages and initially I wanted to use angularJS because of data binding and the many other neat features. I also ended up using requireJS simply to help me manage my dependancies better as the list of javascript libraries I'm using is growing.
My question is using AngularJS with requireJS a no no for non single page web apps?
It's not a no-no. You can definitely use angular on non-single page apps. You just will lose a lot of the functionality - ie the stuff between "pages". You app will essentially be recreated on every page.
I've used angular for a multi-page site (basically a product search engine), with each page being separate. I used GET and POST to transfer stuff across pages, but ultimately, I wanted to use angular for rendering the content on the page because it's just neat and clean.