Usually by default in Ionic Framework there is a single file that all services are stored and a single file that all controllers are stored.
But this on big projects may turn out with hard to maintain and develop code.Is there a way to split the code of controllers and services into smaller easily maintainable files?
I already have this project: https://github.com/pc-magas/faster And I want from the start to set it Into a Mentainable form.
Along with suggestions from above user, you can even bundle all your JS using gulp task and include that single file in index.html. This will ensure you don't miss out any file inclusion in index.html.
Take a look at Angular Best Practices
Yes, there is. I would recommend that you take a look at the angular-seed project. In their code, they have separated their services and controllers into separate files.
Basically, what you have to do is separate the files and then include them in your app.js, like this:
angular.module('myApp', [
'myApp.controller1',
'myApp.controller2'
])
And then above your controller, you have to put something like the following:
angular.module('myApp.controller1', [])
.controller('Controller1Ctrl', [function() {
}]);
Lastly, you need to include the controller, service or directive in your index.html, like this:
<script src="folder/controller1.js"></script>
It is up to you to decide how you want to structure your files. Here is an article, in which the author outlines some ways to structure AngularJS projects.
Related
I've been trying to use the vue-router package for days without figuring out how it works, and it kind of drives me crazy.
My problem: I want to make a Single Page Application using VueJS, and I have taken the vue-router package since it is the routing package officially supported by the VueJS development team.
I've read a lot of "getting started" articles, lots of them start by hard-writing the template like this:
const Foo = { template: '<div>foo</div>' }
But since I'm not really into writing my entire template between those two quotes marks, I searched for a way to write my template into a file, and then load the file's content into a JS variable.
It seems that it's possible to write the templates into .vue files, and then load them into variables using:
import App from './App.vue';
But when I do this that way I get this error: "Unexpected token import".
I'm really frustrated by that, haven't they thought about a really convenient way for the template loading to be compatible on every browser? What did I miss?
I suggest you look into Vue CLI for helping you set up a desired scaffold for your project. Based on the options you choose you can end up with a webpack backed template along with the vue-router included. Webpack will take care of bundling your project so you don't encounter errors like that one.
Generally what you want to do is use vue files. A vue file is divided into three parts, and would look something like this:
<template>
// Your HTML for this component goes here
</template>
<script>
// Your JS for this component goes here
</script>
<style>
// Your CSS for this component goes here
</style>
Once you have your components organized like this, handling routing is pretty straightforward. You designate a file to contain the router object that handles the routing.
These are pretty much basics, so I won't go into details here but you can learn a lot more on the official Vue docs page. Here is also an example project that shows how to construct simple components in vue files and how to properly use the vue-router.
I couldn't find anything about this. basically i want to create a base template, with all the head tag and container in body or menu, etc... so that other templates can extend it.
how would i achieve this with Ionic framework?
The way you have phrased your question leads one to think you have not quite understood how Ionic works...
A typical Ionic app has only one index.html file with a <head>. The rest of the .html files are just content templates to be rendered as the content of that page. So you don't need the "base template" you are asking about, that is all taken care of by Ionic, from the index.html.
I would suggest reading and following http://ionicframework.com/docs/guide/starting.html
I'm trying to build a simple content management system based on the Zend Framework 2. The problem is that I don't know how should the folders structure be like.
Until now I have to solutions in mind:
A. Building a general "Admin" module that has multiple controllers like Login Controller, Pages Controller, Posts Controller, each of this controller with his own actions.
B. Building an module for each component, like: Pages Module that has an adminController an an frontendController.
I'm sure that none of the above solution is the corect one, but couldn't find any solid solution or books to provide one. I've taken a look at gotCMS but noticed that this one i.e, saves all the data like layout views in the database, and this is not a solution.
Though it's a very first alpha solution, I work on ensemble which is what I'd rather call a content management framework.
Ensemble's admin runs on ZfcAdmin. So you can drop in a Blog module which just has a admin controller under ZfcAdmin's route. But you can also manage pages (like texts) with a navigational page structure. All content parts (text, blog, etc) are separate modules.
So I'd suggest you take a look at the sample application and you can check out our blog as well, which just hooks in into ensemble. I know currently the documentation is scarce, but if we reach kinda beta stability we will focus more on docs.
The main benefits for "your system B" is you can drop in modules when needed. They all provide their own config, controllers, models and views. It's easy to install them from a developers perspective (load in composer, enable in application config) and you can easily override any view with your own ones.
TL;DR: choose structure B and have a look at Ensemble.
/edit: seeing you comment on Sam's answer: yes you have to do that. In ensemble, you specify a route config for the frontend and create your admin routes as child routes of ZfcAdmin. For both the frontend as the backend you have separate controllers.
There is no right or wrong when it comes to building something new. Personally I'd go with B. I wouldn't even name the Controllers like you did (I'd break them down a lot more, like NewsAddController, NewsEditController, NewsDetailsController, etc...). Then I'd have an AdminModule that would simply display a new Layout with a specific "AdminNavigation". This AdminNavigation can be filled via the other Modules (i.e. NewsModule would inject it's own administrative Routes into the AdminNavigation via module.config.php)
Right now, I am using <%- assets.js() %> to include all the javascript files on all pages. So, it means all the functions will be initialized on all pages.
I am wondering how can I disable a javascript file on a specific web page? Or, if there is a way to include some of the javascript files on a specific web page but not all the javascript files.
The trouble with the auto-loading is that it's really hard to dictate the ordering of the source files in any meaningful way-- it really comes down to how you've structured the front-end.
In v0.8.x (the version you're working with, from what I can tell), you can use the config/assets.js to control the ordering of folders that get loaded in. This is not ideal, but is a decent workaround that my team used on several projects.
In v0.9, we've removed rigging/asset-rack in favor of tight integration Grunt, which has a large community and some really cool and well maintained packages for most types of asset bundling, etc.
In any case, here are the different approaches you can investigate for serving assets in the new version of Sails.js:
Treat it just like anything else
In your layout.ejs file, create <link /> and <script></script> tags to link in your css and javascript files like you would normally.
Use AMD (Require.JS)
I think lots of folks would say this is actually the best option. Require is a pretty powerful tool. And I'm mostly in agreement-- if you're working with front-end javascript that could be coming from anywhere, and is going to be extended by other developers who may be using a different framework, AMD is a great way to make sure you stay safe. If you're using Require, each js file is its own module, and declares its own dependencies, so asset dependency management becomes a thing of the past. Then in production mode, there are a couple of different options to compile and minify your CSS and JS. You can even dynamically load templates and CSS from JS with Require, which is pretty neat. AMD/RequireJS is a hands-down winner if you're interested in loading some or all of your assets asynchronously. It's also an all-client-side solution, which is pretty cool.
The only downside in my mind is the complexity. If you have control over the framework being used, you really shouldn't have to manually enter dependencies for each file-- it can figure that out itself (see https://github.com/balderdashy/mast/blob/2.x/lib/raise.js)
Use Grunt
When you make a new project with sails new foo in Sails v0.9, a file called Gruntfile.js is created. It has lots of stuff in it, a lot of which isn't being used by default. You can do almost anything with Grunt, but in particular, you'll want to look at how it's set up to copy files from assets/* to .tmp/public/.
sails new foo --linker (Sails v0.9 only)
Linker is a lot like what asset-rack/rigging does currently. It creates the same Gruntfile as #3 above, but utilizes more of the contents. It will auto-link files in the order you specify. Instead of view partials (e.g. <%= %>), the scriptlinker plugin allows you to customize the delimiters where js, css, and templates will be injected. By default, the Gruntfile is set up to use JST precompiled templates, but again, you can set it up however you like.
Hope that helps guys, and best of luck!
-Mike
PS- v0.9 is coming out very very soon, I've just been working through tests and issues to make sure we're 100% there. If you'd like to try it out, check out:
https://gist.github.com/mikermcneil/5930330
The lead for Sailsjs replied to this issue (though it was about selecting CSS files):
"For now, you can (a) bring in all styles all the time and make only the relevant ones apply (b) use another tool (like Grunt) to bundle assets like you would in a vanilla node.js project or (c) link the stylesheets manually (put them in your public folder)."
See: choosing assets sailsjs
Similar, more complex questions have been asked in the Google group:
https://groups.google.com/forum/#!topic/sailsjs/yt9EpJlfzXA
Considering the above, you may want to have a separate layout.ejs for each page. You can specify the layout.ejs you want for each page with
res.view({ layout: "different_layout" })
The layout.ejs would (a) not call assets.js() but have < script > for all the js files needed, or (b) call assets.js() to serve all the common js files in ./assets/js plus < script > to serve the page dependant ones residing elsewhere.
I have a wrapper around assets.js() that allows you to include all assets except for specified files. You can also use it to include only specific assets elsewhere. So you could load your common assets in layout and include other assets only on pages where they are required.
See my answer to How can I include javascript assets selectively in SailsJS?
I am new to Zend Framework. I have a master layout file and I want to add and remove css/js files dynamically. I plan on creating an XML file which contains which controller/actions should have which files added. I was thinking of having the constructor for the controller read the xml file and add the files as required but this seems a bit bad practice. I am thinking it may be better to have this done in the bootstrap class file.
Can anyone tell me if this would be the correct way of doing it and how I may go about doing this please?
The correct way would be to let your views decide which styles/scripts they need. There are view helpers available for this very purpose. This way you separate your representation logic (views, scripts, css) from your application logic (controllers/bootstrap) and your data logic (database,...).
Create your own layout plug-in class . Inside its post-dispatch hook code your own logic .
It is a good idea to load static resources only when you need them!
That said, it seems like a contradiction in your question that you're considering loading these view specific resources during bootstrap. That's much too early, your app has no clue yet about what will be needed.
With the tought of economic lazyness in the background, you should add resources in your views:
if (somecondition)
{
$this->headScript()->addJavascriptFile($this->baseUrl() . '/path/to/your file');
}
else
$this->jQuery()->addOnLoad($someShortjQueryScript);
}
If that's too late for your taste, you can do it in the action too:
$this->view->headLink()->appendStyle($someCSS);
Check out the view helpers, you can do all kinds of things, append, prepend, addOnLoad, add files, scripts, styles, etc.
It doesn't seem like a good idea to me to read a list of files from config. But I may be wrong.