On a large AngularJS application having all my controllers in a single "controllers.js" file seems a little un-maintainable to me. Is there a better way to do this such as:
\js\controllers\myController.js
\js\controllers\yourController.js
\js\controllers\ourController.js
and that also applies for filters, services, directives etc...
There are lot's of ways to organize your code. You can look in the following links
Building Huuuuuge Apps with AngularJS
Code Organization in Large AngularJS and JavaScript Applications
AngularJS Best Practices: Directory Structure
You can follow their standard or you can make your own.
Try to follow the following guidelines:
Contollers shouldn't be too long, if it's too long then it is handling multiple responsibilities
Try to use Directives and Services in your system to reuse your code/logic
Directives are the most powerful things in Angualrjs, try to get maximum advantage of it.
Write Tests; even better you can try to practice TDD with AngularJS
You can manage it like module wise!!
For example , take user view , you make one directory, here its name is user!!
user // directory , now put all controller ,service and directive file into it !!
-- userController.js // controller file
-- userService.js // service file
-- userDirective.js // directive file
-- views // make directory, and put all html file regarding that module into this
--users.html // html file
Hope this will help you!!
See how these two starter projects organize files for a larger-scale application:
https://github.com/angular-app/angular-app/
https://github.com/joshdmiller/ng-boilerplate
You may wish to have a look at this community-driven guide.
The guide describes best practices for organizing the directory structure of a large AngularJS application.
It also makes recommendations on naming and structuring AngularJS modules, controllers, directives, filters and services.
It's also worth it to check out a tool like Lineman.js with the AngularJS application template.
For enterprise AngularJS projects, you may wish to look at this kickstarter which is based on ng-boilerplate.
There's a nice document out there from Google's own team that back up Shivali's example:
https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/pub
Something like this:
sampleapp/
app.css
app.js top-level configuration, route def’ns for the app
app-controller.js
app-controller_test.js
components/
adminlogin/
adminlogin.css styles only used by this component
adminlogin.js optional file for module definition
adminlogin-directive.js
adminlogin-directive_test.js
private-export-filter/
private-export-filter.js
private-export-filter_test.js
userlogin/
somefilter.js
somefilter_test.js
userlogin.js
userlogin.css
userlogin.html
userlogin-directive.js
userlogin-directive_test.js
userlogin-service.js
userlogin-service_test.js
index.html
subsection1/
subsection1.js
subsection1-controller.js
subsection1-controller_test.js
subsection1_test.js
subsection1-1/
subsection1-1.css
subsection1-1.html
subsection1-1.js
subsection1-1-controller.js
subsection1-1-controller_test.js
subsection1-2/
subsection2/
subsection2.css
subsection2.html
subsection2.js
subsection2-controller.js
subsection2-controller_test.js
subsection3/
subsection3-1/
etc...
Check this, build your angular app with CoffeeScript, SCSS.
https://github.com/nhim175/modular-angular-skeleton/
Related
I cannot include all the things I need an answer to the title, so here is what I concern:
Must a client side framework/lib be required when developing AEM ? If yes what is the best one fits to AEM and easy for development (Angular.js is just the way that I think it is "enough" good and easy for integration).
In case of using angular.js, I have some doubts:
Which is the most outter App (which is initialized with ng-app) and how We load it because AEM component is separated and I can not load most outter in any of them.
IMO, most outter ng-app will be loaded in the template (which is required by all the components, but it is just in theory (I'm not sure about that) and I do not see any example outhere show me how to load JS,CSS files on TEMPLATE creation (not component creation, just for clearly)
Alternative approach, each AEM component will be an separated angular module, and it will bootstraped manually (I'm not sure, too, please help to clarify)
Last but not least, If you have examples (enough complicated, not like hello world) or production project that used this stack (perfect !), please help to let me know, because my biggest concern is "is it possible to do".
Many many thanks in advance !
I am currently using angular JS with AEM successfully.
Which is the most outter App (which is initialized with ng-app) and how We load it because AEM component is separated and I can not load most outter in any of them.
ans: You can create a renderer component for this purpose and make it as an outer app then add the required clientlibs to it. after that you can use the renderers scope as a normal angular application.
IMO, most outter ng-app will be loaded in the template (which is required by all the components, but it is just in theory (I'm not sure about that) and I do not see any example outhere show me how to load JS,CSS files on TEMPLATE creation (not component creation, just for clearly)
ans: Rather than loading it in the template It will pretty easy to add it in the component as a client lib because everything like js / css in AEM we can add it as a client lib
Alternative approach, each AEM component will be an separated angular module, and it will bootstrapped manually (I'm not sure, too, please help to clarify)
ans: Yes you can create a component as an angular application and you can bootstrap it seperately
I have used Angular 1.x with AEM 6.x and created SPA (Single Page Application). Also, created AEM Screens App using Angular 1.x.
There could be many ways to do it, but I have followed the following approach :-
AEM Page template (body tag) with ng-app and added angular dependency for site (clientlib angular 1.x)
Define angular module in your site clientlib(JS) say module.js,
example: var app = angular.module('app', ['ui.router', 'ngAnimate','ui.bootstrap.tpls','ui.bootstrap.modal']);
You can also define state provider for different paths app.config(function ($stateProvider, $urlRouterProvider) {});
Define each component specific module/controller in a specific clientlib(js) file.
example (html): <div ng-controller="LoginCtrl" />
example (client lib(js)) - app.controller('LoginCtrl',
function ($scope) {});
I have an application based on e.g. the Northwind database, in which I have built views for each of the different objects to maintain them CRUD-ly, using AngularJS views and the in typical file structure adopted by most devs.
I have an issue I would like to improve, firstly from all examples I have seen, you need to declare your controller on an index.html file. If one module that a user uses does not require, all the other controllers, is it necessary to load all controllers on the client side. Is there a better way to only declare controllers that are need per view?
Is this the normal behaivor of a Single Page LOB, to preload all necessary dependencies, whether required or not?
No. Don't declare your controllers in your HTML.
The less logic you add in your template, the more flexible your app will be.
The problem with including controllers in your HTML is that if some nested controllers have the same instance var (example foobar), then you don't know which one would be displayed :
<div ng-controller="firstController">
...
<div ng-controller="secondController">
...
{foobar}
Then, the best way is to work with modules and routes. With routes, you can tell AngularJS that your HTML should be controlled by aController.
I you are looking for a good app to start with, take a look at this one.
It has been developped by the AnguarJS team and shows some good practices to follow. You can notice that none of the HTML files contain a reference to a controller.
I am creating a small-to-medium sized data-driven HTML site from developers for developers in our company. The idea is to have a node.js v0.12+ / express v4+ server running which provides some helper functions to access a large database.
I would like to allow other developers with minimum effort to pull the repository from Git, create a custom view (which should be a a partial HTML page-body) and commit back, e.g., something like this:
app/
views/
common.view1/
module.html
module.js
common.view2/
team1.view2/
...
common/
header.html
footer.html
main.html (automatically finds files under views)
What I am looking for is a proven, non-hackish solution or module (e.g., >1k stars on Github) so that with minimal code would allow me to do something like this in my node's app.js:
xxx.templatify('*.html');
xxx.registerFunction('helper', returnString);
expressApp.usetemplateengine(xxx);
And in views/<someview>/module.html:
<% include('common/header'); %>
<h2>Hello <% helper('world'); %> h2>
I wouldn't mind if the include could be defined server-side. The modules.html should however stay vanilla HTML as much as possible.
My question: How can I do this and is there an obvious standard solution I am missing?
I looked a little into ejs, jade and friends, but most seem to impose their own completely new syntax (e.g, Jade), or I would have to register every file individually.
Handlebars is the closest I can think of that closely resembles html, but you will still need to map routes to .handlebars files. Thinking out aloud, you could build a mapping helper method to do that for you, but I have not tried that approach as of to date.
I'm learning AngularJS and in all tutorials and screencasts I always saw to use angular writing code all in a unique file, example directives, controllers, factories etc...
Logically for large applications, you will split out the code, make it maintainable and flexible in multiple files and also we should be careful about how many <script> tags we have to require to let our JavaScript files run correctly.
I would like to know which is the best practice to require files when needed, importing less javascript files possible in my view. I took a look at RequireJs but it seems a bit complicated to use it. Is there some tool more efficient and easy to use? Or any good resource to get started?
A small example can be that I have a sort of plugin that has been built using directives, controllers and factories:
app-|
--Controllers
|_ pluginController.js
--Directives
|_ pluginDirective.js
--Factories
|_ pluginFactory.js
Instead of requiring all three files how do you make it work?
Here' a great example of how to use RequireJS and AngularJS together. It's a fork of the Angular Seed project and it should hopefully point you in the right direction. It comes with RequireJS baked right in. I definitely recommend learning RequireJS!
I would advice you to read up on dependency injection in the Angular documentaion. It all depends on how you set things up to be honest. If you want to use your service/factory in your controller then you would add the factory as a dependency in your controller or directive. See example below :
Angular.module('{YOUR MODULE NAME}').controller('{YOUR CONTORLLER NAME}', ['$scope', '{FACTORY NAME}',
function($scope,{FACTORY NAME}) {
}]
To invoke the directive within your controller, you would simply could simple add the directive to your controller template. This is a basic example, to learn more read about dependancy injectioninvoke
To be clear that I understand - e.g. I want to use "angularFileUpload" module, I need to add it to my module dependency list -
angular
.module('kids', ['angularFileUpload'
])
and load the script?
<script src="angularjs/plugins/angular-file-upload/angular-file-upload.min.js" type="text/javascript"></script>
Thanks for help.
I've just started using angular and javascript and I can't really figure out how to structure my application.
I started writing a Controller and my first reflex is to put what I would call my model into a class in a different file.
I have different option
1 - putting everything (model + controller ) in one file
2 - using requireJS so my controller can 'include' my model. I've managed to do it, put it wasn't straight forward and I still have problem to make the yeoman dist version to work.
3 - use angular module, which seems to be the recommended way, but if choose this solution do I need to load explicitly my model file in the main html file. I understand that not hardcoding the dependency between files can be a good thing, so you can for example swap or change some components, but it seems wrong when for example a subclass need to requires its parent class. If I need to split a module in lots of angular submodules, do I need to load them all explicitly ? That's seem totally wrong.
Am I missing something ? what is the standard way to do so ?
What I found quite useful are the MTV meetup sessions. They give a good overview about how to apply best practices in AngularJS:
Best Practices: http://www.youtube.com/watch?v=ZhfUv0spHCY
Angular+Yeoman: http://www.youtube.com/watch?v=XOmwZopzcTA
There are many more videos on youtube. I hope this helps giving a first idea.