I'm new to AngularJS and i'm wondering what's a good way to visualize a AngularJS app (with UML classdiagram/componentdiagram)? And the reason why.
Can you give a example?
I found this, but don't know if this is a right way: https://hacks.mozilla.org/2014/11/visually-representing-angular-applications/
Thank you
You can use a Class Diagram to represent your Controllers, Factories, Services, etc (as show in the link provided by M22an in comments). In this diagram, you can easily show the methods and attributes of each Controller / Service / Factory.
You can use a Sequence Diagram to represent the communication between the parts of your app. Show each method, show which part of a service it calls, the data given and received, the update of the template with the $apply method etc.
A component diagram can be useful to explicit the content of each module and show the Controllers / Services / Factories... inside it. You can show the modules dependencies using this diagram too.
In my opinion, you can use almost all diagrams you want, AngularJS is huge, powerful and complex, and each UML diagram will be useful to represent a part of his behavior.
Related
I am implementing a functionality for (Add,update,delete & get,filter).
Currently Add View is used for add, update and delete. (Controller1)
Get View is used for get and filters. (Controller2)
Created routing for Add and Get Separately. So 2 controllers for each.
Now i have to call service for common config data , which is used in both the controllers.
which of the below design i should prefer.
Design 1
Combine both the controllers a one controller, put all the code inside.(including config data)
Design 2
One controller for Get ,filter
Second controller for Add, update and delete
common factory for Config data.
Am confused, which design i should prefer from all the aspects.
Please suggest.
Thanks in advance.
Its good practise to have "skinny controllers"
EDIT -
In AngularJS, controllers can sometimes become monolithic structures of mixed business and view logic, as it’s all too easy to house anything you need for the view inside the controller. It’s convenient, and it just plain works… until your application grows in complexity or needs unit tests.
So why do we want skinny controllers, anyway? In short, separation of concerns. Ideally, everything from services, to controllers, to directives, and more should be skinny, and achieving this is very possible in AngularJS. Each part should have a single responsibility and the controller’s responsibility should be to communicate between services and the view; i.e. its main concern should be view-model logic.
Aim to make your controllers skinny, as well as the rest of your application, by separating out view logic and business logic into controllers and services, respectively, and by taking advantage of routes and resolves.
You can read up in detail in this article & look at code examples
I feel like there is relatively little documentation on the "best practices" of how one should go about organizing AngularJS code. For example, in many of my web pages, i.e.
index.php
profile.php
editprofile.php
There are often many factories and methods that I need repeated. For example, profile.php,, editprofile.php, and index.php all need the factory userDropdown (to get the top navbar dropdown menu). However, some of them need "modified versions of factories". For example:
index.php needs a way to get all the users and their information
profile.php needs a way to get some users information
editProfile.php needs a way to get only one user information
What I mean is that (and the above was a poor example), is that often many .js files needs some modified "child" of a "parent" factory. I find it hard to scale my application because profile.php, index.php, and editProfile.php all refer to their own factories and methods, not a base file. Changes, improvements, errors, found in one factory and is corrected, will not propagate into other files (which I find very frustrating). I also don't want to write /copy/paste services and factories over and over again. Other issue I've had is that:
X.js file need some providers that Y.js file doesn't. However, both needs providers A and B, but X needs C and Y needs D. Is it bad for me to use the same "factory" and providers" for both of them (i.e. inject A, B, C, and D into both of them?) That's the problem I see with having a base factory of a factory to serve a lot of .js files. How much space or inefficiency is it to define providers or injectable services that you don't use?
How do I accomplish some scalable angularJS code to do this, or how do you guys go about organizing your angular code? And also, what about repeating HTML templates (i.e. repeating HTML code that needs to be used in almost every page? I've heard of some service called $templateCache but couldn't figure out how to use it.)
https://github.com/johnpapa/angular-styleguide This also has an example app but seriously read through his guidelines they seem to be exactly what you are looking for and have been a great resource for me as I've been learning to build bigger angular apps.
So, I'm in the midst of my first major project with Angular. I have one controller that is doing a ton of the legwork, and it's reached the point where it's thousands of lines of JavaScript.
I'd like to break this up somehow, but I can't seem to find a solid example anywhere. The code is mostly made up of functions used to do calculations on objects, so directives and modules don't seem like the right answer, but I could be wrong there.
How are you guys organizing code in your large Angular projects? Should I just suck it up, or is there a sane way to split this into easy to scan files?
I suggest putting at least some of those objects and their related calculations into services, then inject the services into your controller(s). See the Sticky Notes Part 1 blog entry for an example of a service that encapsulates some data and provides methods to access/manipulate that data.
See if you can break up your controller into multiple controllers, one for each view. A view can be as large as a page, or just some chunk/block on a page.
To quote from a google group post I saw recently: "I prefer to think of angular controllers as dumb apis/configs for my views and leave all the heavy lifting to services." -- reference
There are a few things that you need to ask yourself when you are in a controller.
Are you doing any DOM manipulation in the controller? This is a definite NO. Dont ever do that. It always belongs in the directives department.
Are you writing any Business Logic in your controller? That too is a NO. Your Business logic should in most cases exist in a Service. That is the right place for it.
Now, have a look at your controller. Is it devoid of these 2 things and still larger than 1000 lines? It is highly unlikely, but even if it somehow is happening, then consider breaking down your controller into smaller controllers. This breaking of controllers have to be done based on the view.
To sum things up, your controller is just a place where you glue up the business logic and your views in the HTML. It should technically never contain anything other than these glues.
I usually create a Util factory (seems to be the way to go now in Angular rather than services) and have it return any shared logic as a set of methods.
https://gist.github.com/lamba/c275f5f010090632209e
I've seen the diagrams, but I want a description of how it all works -- for example -- cakephp uses the controller file and the view file. What happens? Is there anything out there? It would make using cakephp's mvc easier.
most simple request would look something like the following:
when you request a url, the router figures out what is needed and then uses the Dispatcher to open up the controller and run the corresponding method.
As the controller is fired up it includes and builds up the model that corresponds to that controller.
your method will then run and do what ever it needs to do.
When the controller is done calling all the code you have included the view class is executed which starts the rendering. It will include and render the corresponding view file and then the layout that has been set in the code.
all along the way there are a number of callbacks that are triggered in the various parts of the code, like controller::beforeFilter model::afterFind etc. Best to have a look a the api and book for more detailed information or ask a more specific question about that.
If you're at all familiar with Object Oriented code and php functions, you can start to read the CakePHP core methods. They will fill in a lot of blanks in terms of understanding the internal mechanics and relationships of Models Controllers and Views.
I'm developing a CakePHP application that we will provide as a white label for people to implement for their own companies, and they'll need to have certain customization capabilities for themselves.
For starters, they'll be able to do anything they want with the views, and they can add their own Controllers/Models if they need to add completely new stuff. However, I'd rather advise against touching my controllers and models, to make version upgrading easier.
Esentially, the customization capabilities I'm planning to give them are going to be quite basic, I just need to call "something" when certain things happen, so they can do things like update external systems, e-mail themselves/the clients, things like that.
I'm wondering what's the best way to do this?
My plan is to have a "file" (with one class) for each controller of mine, to keep things reasonably organized. This file will have a bunch of empty methods that my code will call, and they'll be able to add code inside those methods to do whatever they need to do.
The specific question is, should this class full of empty methods be a Component? A Controller? Just a regular plain PHP class?
I'll need to call methods in this class from my Controllers, so I'm guessing making it a Controller is out of the question (unless maybe it's a controller that inherits from mine? or mine inherits from theirs, probably).
Also, I'd need the implementer of these methods to have access to my Models and Components, although I'm ok with making them use App::Import, I don't need to have the magic $this->ModelName members set.
Also, does this file I create (etiher Component or Controller) have to live in the app folder next to the other (my) controllers/components? Or can I throw it somewhere separate like the vendors folder?
Have you done something like this before?
Any tips/advice/pitfalls to avoid will be more than welcome.
I know this is kind of subjective, I'm looking to hear from your experience mostly, if you've done this before.
Thanks!
Two ideas that spring to mind:
create abstract templates (controllers, models, whatever necessary) that your clients can extend
write your controllers/components/models as a plugin within their own namespace
Ultimately you seem to want to provide an "enhanced" Cake framework, that your clients still have to write their own Cake code in (I don't know how this goes together with your idea of "basic customization capabilities" though). As such, you should write your code in as much an "optional" manner as possible (namespaced plugins, components, AppModel enhancements, extra libs) and provide documentation on how to use these to help your clients speed up their work.
I would setup a common set of events and use something like the linked to event system to handle this.
That lets the clients manage the event handler classes (read the readme to see what I mean) and subscribe to and broadcast events application-wide.
Also - if you want to have your users not muck about with your core functionality I recommend you package your main app as a plugin.
http://github.com/m3nt0r/eventful-cakephp