From 724bfc3d453fef4d389d039a254c32a9858d9758 Mon Sep 17 00:00:00 2001
From: Liran Tal
- Reorganizing the project this way helped us create bigger projects that are more maintainable in the long term. For a while we had fun using this but lately we found out that wasn’t enough. Now instead of bloating a single JavaScript file, we had pretty big folders containing ~20 controllers, and even more views in the partials folder.
+ Reorganizing the project this way helped us create bigger projects that are more maintainable in the long term. For a while we had fun using this but lately we found out that wasn't enough. Now instead of bloating a single JavaScript file, we had pretty big folders containing ~20 controllers, and even more views in the partials folder.
Luckily, when the original MEAN.IO boilerplate gained some traction, we got a chance to talk to some great AngularJS developers writing blogs and working on some popular libraries. One of the greatest topics in our conversations was Angular’s modularity.
@@ -165,7 +165,7 @@
- Using vertical modules only solves half the problem because we still use horizontal approach in our folder structure. This means that all your application controllers will reside in the same folder, as are all the services, directives, filters, and views. In this case you wouldn’t be able to associate a file with its module until you open it.
+ Using vertical modules only solves half the problem because we still use horizontal approach in our folder structure. This means that all your application controllers will reside in the same folder, as are all the services, directives, filters, and views. In this case you wouldn't be able to associate a file with its module until you open it.
So we converted our application structure to a vertical structure to fit the vertical modular approach:
@@ -207,10 +207,10 @@ AngularJS Modules
index.html
Vertical Modules Are Better
New Folder Structure
New Folder Structure
This structure allow clear separation of functionality and concerns, so just by looking at the folder structure you can start asking questions about your modules, for example why does the users module have no tests? (hint: Its our fault and we plan to add those :)).
- But we didn’t want to stop at this point! + But we didn't want to stop at this point!
- Because we are building a full-stack solution, won’t it be great if module files could be automatically included in the backend view HTML, eliminating common import mistakes? We do two things to help with this issue: + Because we are building a full-stack solution, won't it be great if module files could be automatically included in the backend view HTML, eliminating common import mistakes? We do two things to help with this issue:
- While the angular module system is quite robust it lacks a few options, mainly the abiliy to add dependencies to the main module after it was already created. Because of that we use the ApplicationConfiguration object to maintain a list of modules, which the main module will use as depenedencies. If it weren't for the ApplicationConfiguration, you would have to register your module in two place: + While the angular module system is quite robust it lacks a few options, mainly the ability to add dependencies to the main module after it was already created. Because of that we use the ApplicationConfiguration object to maintain a list of modules, which the main module will use as dependencies. If it weren't for the ApplicationConfiguration, you would have to register your module in two place:
- This can become an annoying pitfull, so we added the ApplicationConfiguration that is loaded before all the modules file. The ApplicationConfiguration global object expose a method named registerModule, this method will create the new angular module and add it to list of dependencies of the main application module. + This can become an annoying pitfall, so we added the ApplicationConfiguration that is loaded before all the modules file. The ApplicationConfiguration global object expose a method named registerModule, this method will create the new angular module and add it to list of dependencies of the main application module.
We recommend that you take a look at the code that is placed inside the /public/config.js file. @@ -279,7 +279,7 @@
- To add a new module, you’ll have to create a new folder in the public/modules folder. The directory structure should look something like this: + To add a new module, you'll have to create a new folder in the public/modules folder. The directory structure should look something like this:
|-module @@ -303,7 +303,7 @@Module Structure
'use strict'; -// Use Applicaion configuration module to register a new module +// Use Application configuration module to register a new module ApplicationConfiguration.registerModule('moduleName');@@ -316,7 +316,7 @@Module Tests
Adding Karma tests is a simple task, and you can follow the Article Example to learn all about it.- But here is another neat feature: loading your module tests is also done automatically! Karam config file will iterate through the module folder and add your new module tests as well. Don't worry! if you haven't written any tests karma will skip your module and just run the tests you already have. + But here is another neat feature: loading your module tests is also done automatically! Karma config file will iterate through the module folder and add your new module tests as well. Don't worry! if you haven't written any tests karma will skip your module and just run the tests you already have.
Notice: Your test files should be placed in the module/tests folder or else MEAN won't ignore them and add them in the HTML as script files. diff --git a/_includes/docs/0.3.x/configuration.html b/_includes/docs/0.3.x/configuration.html index fdd5777162..7881597aeb 100644 --- a/_includes/docs/0.3.x/configuration.html +++ b/_includes/docs/0.3.x/configuration.html @@ -83,23 +83,23 @@
Assets Configuration
A list of glob patterns idicating the project packages files. We seperate those from other files so you could use CDN assets in your production configuration.
+A list of glob patterns indicating the project packages files. We separate those from other files so you could use CDN assets in your production configuration.
- To configure your social application oauth keys there's a property object for each platform: + To configure your social application OAuth keys there's a property object for each platform:
When to use: Whenever you want to add, change, or remove a Passport Strategy. @@ -100,7 +100,7 @@
- Although you don't have to, it is highly recommended that you use registerModule method to reigster your module as a dependency for the main application module. To understand this better please visit the AngularJS Modules section. + Although you don't have to, it is highly recommended that you use registerModule method to register your module as a dependency for the main application module. To understand this better please visit the AngularJS Modules section.
The CRUD module sub-generator will help you create a new CRUD module, similar to the article sample provided with the project. To create a new CRUD module you will need to use yo again:
$ yo meanjs:crud-module <module-name>
This will create both AngularJS and Express files supporting full CRUD functionality, and add the Karma and Mocha tests.
-Note: Don’t forget to use your module name as an argument when calling the CRUD module sub-generator.
+Note: don't forget to use your module name as an argument when calling the CRUD module sub-generator.
To construct your module you will often need to create a new route. The AngularJS route sub-generator will help you create a view, controller and a proper route in your module routes.js file. If it can’t find the module routes file the sub-generator will create one for you. Creating a new AngularJS route will involve executing this command:
To construct your module you will often need to create a new route. The AngularJS route sub-generator will help you create a view, controller and a proper route in your module routes.js file. If it can't find the module routes file the sub-generator will create one for you. Creating a new AngularJS route will involve executing this command:
$ yo meanjs:angular-route <route-name>
The sub-generator will ask for more information about your controller, view and routing URL, and will generate the appropriate files for you.
The AngularJS Controller sub-generator will create a new AngularJS controller in the specified module's controllers folder. To create a new AngularJS controller run yo again by using this command:
$ yo meanjs:angular-controller <controller-name>
The sub-generator will ask you for the module name under which you would like to create your new controller, and will create a new AngularJS controller file in that module controllers folder and a controller test in the module tests folder.
-Don’t forget! This time you pass the controller name as an argument.
+Don't forget! This time you pass the controller name as an argument.
Once you have your controller file ready, you may want to add a view that makes use of this controller. The AngularJS view sub-generator will create a new AngularJS view in thr specified module's views folder, and will allow you to add a route definition for it. To create a new AngularJS view you will need to execute this command:
Once you have your controller file ready, you may want to add a view that makes use of this controller. The AngularJS view sub-generator will create a new AngularJS view in the specified module's views folder, and will allow you to add a route definition for it. To create a new AngularJS view you will need to execute this command:
$ yo meanjs:angular-view <view-name>
The sub-generator will ask you for the module name under which you would like to create your new view, and some additional routing information. It will then create a new view file in that module's views folder and add a routing state to the module routes.js file. If it can’t find the module routes file it will create one for you.
+The sub-generator will ask you for the module name under which you would like to create your new view, and some additional routing information. It will then create a new view file in that module's views folder and add a routing state to the module routes.js file. If it can't find the module routes file it will create one for you.
Your MEAN application comes pre-bundled with the Karma test runner and Jasmine testing framework. To test your AngularJS controllers you’ll need to create a test file, which Karma will later use to run the tests. For this purpose we provided you with the AngularJS test sub-generator. Creating a new AngularJS test is effortless, just execute this command:
Your MEAN application comes pre-bundled with the Karma test runner and Jasmine testing framework. To test your AngularJS controllers you'll need to create a test file, which Karma will later use to run the tests. For this purpose we provided you with the AngularJS test sub-generator. Creating a new AngularJS test is effortless, just execute this command:
$ yo meanjs:angular-test <controller-name>
This will create a test file for your controller, and if the sub-generator doesn’t find the specified controller file, it will create one for you.
-Don’t forget! You're suppose to pass the controller name as an argument.
+This will create a test file for your controller, and if the sub-generator doesn't find the specified controller file, it will create one for you.
+Don't forget! You're suppose to pass the controller name as an argument.
Your MEAN application comes pre-bundled with the Mocha testing framework. To test your Express models you’ll need to create a new test file, which Mocha will use while running tests. For this purpose we provided you with the Express test sub-generator. Creating a new Express test is easy, just execute this command:
Your MEAN application comes pre-bundled with the Mocha testing framework. To test your Express models you'll need to create a new test file, which Mocha will use while running tests. For this purpose we provided you with the Express test sub-generator. Creating a new Express test is easy, just execute this command:
$ yo meanjs:express-test <model-name>
This will create a test file for your Express model, and if the sub-generator doesn’t find the specified model, it will create one for you.
-Don’t forget! You're suppose to pass the model name as an argument.
+This will create a test file for your Express model, and if the sub-generator doesn't find the specified model, it will create one for you.
+Don't forget! You're suppose to pass the model name as an argument.