I'm new on angluarjs and trying to build an example-application.
This application is divided into 3 parts/sections:
A.) map
B.) "received"-area
C.) "send"-area
Every section has its own layout/view-area, not visible at the same time.
In part B.) you can load information from server by click or automatically, which will be displayed in part "B.)" as text and in section "A.)" as map-marker.
Additionally you can click inside section "A.)" to set a new marker.
In section "C.)" there is a send button to take the new marker from "A.)" in order to send this to the server.
Currently: all of the sections (A,B,C) are angular modules/own apps.
But I don't know, if that is the right way/best practice.
An other way could be a single module for the whole page an 3 controllers (A,B,C) which handle the logic for sections A,B and C.
What is the right way in angularjs?
From your description, I recommend designing it as a single AngularJS app with separate controllers for each view. It sounds like you would benefit from using an angular service to handle the client-side business logic and cache any shared data/models that could be used by the views. It is a best-practice in Angular to keep the controllers pretty lean and focused just on the view setup/binding and orchestrating the access to the services.
After searching the way to get some inspiration, i decided to realize the following think:
For all the self-made code, I use one module for the whole application and for all the external things, bundled with external plugins and services, I take a different module. This means: pne module for each "service-plugin bundle" (like google API & angular-google-maps plugin)
So I can switch the module, if the external service does not work, etc.
Looking at my example in the question this means:
Application part A: the map and all the map-specific things (set new marker, draw circle, etc) are insight a map-module. If I decide to use open street map instead of google maps i will plug in an new maps module
Application part A and B: this is my "main" app module with different controllers.
Related
Take a SaaS company that wants to pack all its services into a single, uhm.. Single Page Application using Angular (1). Now there is a public area (landing page, etc.) and an internal area. There are various layers of protection in the backend. There are different user groups with different privileges.
If the complete app is compiled into a single javascript file, hints for all routes can be found in the JS file quite easily. Then, there are services / $resources for interacting with the API, which again contain quite essential information on the functionality of the application.
Now the question: How could someone put modules on a certain non-binary protection level, and only load this particular module when the user is authorized to see it, all while not reloading the page?
I can find a way to lazily add modules to an angular application. I can also protect single files server sided and only send them to authorized users. But that seems like an unscalable hassle when there are more and more user groups.
Do you know any generic libraries for that purpose, ideally in sync with koa, which do not create a vast overhead? Do you know of some grunt / gulp / whatever processes, which help with that?
Thanks!
You can use latest ui.router which allows you to lazy load routes.
https://ui-router.github.io/ng1/docs/latest/interfaces/state.statedeclaration.html#lazyload
Also you can use web pack and use multiple entry points to create seperate bundles. https://webpack.github.io/docs/multiple-entry-points.html
By following above steps you can optimise the app but I don't think that this will add any protection to the web assets. You can minify to make life bit difficult to understand what your JS code is doing.
I've been reading alot about AngularJS and I just absobutely love the concept behind it and want to get my feet wet. I've read up on several tutorials and eventually downloaded Visual Studio Template SPA and that's where the "fun" stops. The way I see it - using that template seems to go against the grain of creating a SPA - there are very little examples to go on.
By default, the SPA Template installed sets up this like:
app
app_start
Content
Images
Routing
Scripts
Vendor
app.js
controller.js
(the rest you get the idea)
Views
you get the idea.
The question is really bugging me. For example,I want to insert a hockey player and coach page (two separate SPA) to work under the current masterpage content. This is where I'm a bit lost on "separation"
The way I see it, I would have to add a route to app.js and a controller to controller.js for coach and player but I don't like that because I want to separate the player and coach controller code and put it under the player and coach modules like this.
But what I tried to do and fail is:
Module
Player
playerApp.js
playerControl.js
player.cshtml
Coach
coachApp.js
coachControl.js
coach.cshtml
I'm struggling to "hook" them up. I certainly do not want to put the coach controller and the player controller in the control.js file under the scripts folder and the views (player and coach) under the Views folder. It would become too difficult to read and eventually become messy.
Any guidance would be appreciate on what I should be reading on.
thanks,
This is somewhat of an opinionated question and answer, but I want to offer one possible scenario which I have found works well.
Unless you have a compelling need for Razor (i.e. existing user controls), your path of least resistance is to not use ASP.Net MVC at all. Instead, you can leverage ASP.Net WebAPI, which operates similarly to MVC, but provides a REST interface to handle JSON data instead of using Views and Server Routing.
In your Web App, you can simply use a single index.html which can be hooked up with angular, and your individual modules can be separated without needlessly being concerned with multiple "app" pages, how to interact between them, etc.
On the server, you can either run the WebAPI from a different URL, or more commonly, from something like http://yoursite.com/api/. IIS would be configured to redirect anything that is not static files (.css, .js, images, etc.) or api calls back to the single index.html.
We do a modular application where the UI is divided in components/modules like billing area, staff management, real time charts, shipment etc... The customer pays for this component/module and only the modules he paid for shall be loaded on client side. I name these paid modules "main modules" on client side because every main module is route/button to sub content where user with different claims can do different things.
What I would like to do now is before angular is initialized I would like to manually create the modules basing on the array of licensed module names. Those modules who are not licensed are not created.
Here I have an understanding problem and can not find any similar case in google.
1.) How can I tell angularjs to load a specific module with all its attached controllers/services and their depending modules?
2.) What happens with the common javascript includes which will cause an immediate creation of the angularjs modules?
User #mpm put me on the right track. Its the best if all the files belonging to a angular module are copied over to the index.html before the body tag before the Index.html is initially sent to the client side. That way the client does not know about how the modules are loaded. It just gets the modules... Only the server knows and is doing still more stuff about the modules to be licenced like loading only the module depending endpoints/ApiController`s.
To second this answer as a recommend approach, you can watch this video:
https://www.youtube.com/watch?v=62RvRQuMVyg#t=486
from the angular conference where they recommend the same approach :-)
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( .
When I first looked at Play and went through all the samples, I was pretty excited by the zentasks sample and the fluid, clean, effortless Javascript routing that left the work of rendering things to Play. But we decided instead to go with Angular.
Upon going down that road, I thought that Angular would control all aspects of rendering.
However, we have a page that has to get a socket. We were having the socket made on the server, so for now, we still have a Play (Scala) template doing that. We have pared it down to pretty much nothing: create the socket and then inject it into the Angular context.
But we are also trying to do Protractor tests and that is made uglier by having to figure out how to accommodate the Scala template.
Question: should we just ditch the scala template and have the Angular controller call the server and get the socket? That was my favored approach to begin with.
I'm currently working on two Play apps with Angular and in both we decided to have one single main.scala.html file that load all the necessary controllers,services,directives, etc from angular using of require.js.
The goal with Angular is to create a single page app and therefore you should avoid to mix it with server side templates.
You must see your main.scala.html template as the entry point of your single page application. There you generate and load all the pieces you need and give the hand to angular to manage the rest.
I agree with Renato. It's probably better to have a single controller and template that sets up the single page app with angular. Then use AJAX to send requests from the browser to other controllers (see http://www.playframework.com/documentation/2.2.x/JavaJsonRequests).
If want to to avoid Scala templates completely, you can put your web pages and javascript in the public directory and only use AJAX.