MEAN framework learning notes, mean learning notes
MEAN framework learning notes
There is very little information about the MEAN development framework. The main information is from the introduction on the learn. mean. io website. Therefore, with a zero-basic learning mentality, the MEAN framework is digested and absorbed through translation and understanding, step by step, I learned the MEAN Point and point slowly.
1. MEAN can manage users
Use MEAN-cli to manage users. Command:
$ mean user <email>$ mean user <email> --addRole <role>;$ mean user <email> --removeRole <role>;
2. MEAN can be used to list, install, and uninstall modules.
After the MEAN module is installed, it is placed in the/node_modules folder.
$ mean list$ mean install <module>$ mean uninstall <module>
3. The custom package should be placed in
/Package/custom
Folder, and the package to be contributed is placed in
/Package/contrib
Folder.
4. The core package includes:
System: Basic page, overall page layout, rendering engine, static file, route from client to server, etc.
User: provides the user registration database model and logon and registration verification.
Access: permission management and middleware. It contains many authorization Methods dependent on the user package.
Theme: CSS, images, and background resources.
Articles: it can be seen as a starting point for blog and CMS management content. It includes the complete add, delete, modify, query (GRUD) operation on the client and server ).
5. All packages have their corresponding client and server. The client part is in the public folder, where:
Asset: Javascript code, CSS, and images;
Controllers: the Angular controller of the front-end framework.
Config: contains the route file.
Services: Angular service (as well as the directives and filter folders)
Views: Angular View
The Server part is in the Server folder, where:
Config: Configuration File
Controllers: Angular Controller
Models: database Schema model
Routes: rest api router end
Views: SWIG-based html Rendering
6. Dependency Injection)
The dependency injection of MEAN can automatically resolve the packages owned by the system when you declare the dependencies you need to resolve all dependencies for you. Any registered package will become available when you declare dependencies.
For example, there is an app. js file under the root directory of a package, and dependency injection is used in the registration method contained in it.
Here, MyPackage depends on the package named Tokens during registration.
// Example of registering the tokens packageMyPackage.register(function(app, auth, database, Tokens) { // I can make use of the tokens within my module MyPackage.someExampleFunction('some parameter'); // I can override functions MyPackage.someExampleFunction = function(param) { //my custom logic goes here };});
7. Angular modules and dependencies
When registering each package, an Angular module such as mean. [package_name] is automatically created.
At the same time, you can declare the Angular dependency required by your Angular module. For example:
// Example of adding an angular dependency of the ngDragDrop to theMyPackage.angularDependencies(['ngDragDrop']);
8. Assets and Aggregation)
All objects (including Javascript scripts, CSS, and images) are stored in the public/assets folder.
Javascript scripts, CSS, and images can be aggregated into global aggregate files. By default, all Javascript scripts are enclosed in anonymous functions unless {global: true} is not placed in the included domain.
<pre name="code" class="javascript">//Adding jquery to the mean projectMyPackage.aggregateAsset('js','jquery.min.js');//Adding another library - global by default is falseMyPackage.aggregateAsset('js','jquery.min.js', {global:true});//Adding some css to the mean projectMyPackage.aggregateAsset('css','default.css');
Javascript files not in the assets folder are aggregated and injected into the mean project. If this is not the case, it should be placed in the public/assets/js folder. The aggregation operation supports controlling the location where the aggregation code is stored. We usually need to add a weight and group variable to determine whether it is in the correct position.
MyPackage.aggregateAsset('js','first.js',{global:true, weight: -4, group: 'header'});
9. Settings object
The Settings object is a persistent object that allows you to save persistent information in each package, such as configuration options or management information.
You can use the settings function to obtain and save persistent information. For example:
MyPackage.settings({'someSetting':'some value'}, function (err, settings) { // You will receive the settings object on success});// Another save settings example this time with no callback// This writes over the last settings.MyPackage.settings({'anotherSettings':'some value'});// Get settings. Retrieves latest saved settingsMyPackage.settings(function (err, settings) { // You now have the settings object});When storing information, the first parameter is in JSON format, and the second parameter is the callback function. The callback function is used to determine whether information is stored. The second parameter is optional. When reading information, you only need one parameter. This parameter is the callback function.
10. Express Route
All routes to the server controller are controlled by Express. The package system will route the object along the package to the route file. Usually/server/routes/myPackages. js.
By default, the routes function has some other parameters:
MyPackage. routes (app, auth, database );
The following is an example of server/routes/myPackage. js:
// The Package is past automatically as first parametermodule.exports = function(MyPackage, app, auth, database) { // example route app.get('/myPackage/example/anyone', function (req,res,next) { res.send('Anyone can access this'); });};
11. Angular Routing
Angular also has a route, which is usually in public/routes/myPackage. js. The latest version of MEAN uses $ stateProvider.
$stateProvider .state('myPackage example page', { url: '/myPackage/example', templateUrl: 'myPackage/views/index.html' });
The Angular view can be made public through templateUrl if it starts with a package name.
12. Menu System
The package can hook the existing menu system and add the link to the menu of MEAN Integration. Each link has a specified title, template, menu, and role. If the specified menu does not exist, a new menu will be created. You can use the menu angular service to query the link information so that the menu object can be accessed on the client.
The following describes how to add a link to a menu in app. js.
//We are adding a link to the main menu for all authenticated usersMyPackage.menus.add({ title: "myPackage example page", link: "myPackage example page", roles: ["authenticated"], menu: "main"});
You can view the public/system/controllers/header. js directory to learn how to implement the menu service.
13. Html view rendering
You can use built-in rendering functions to render html. The default rendering function is swig. The view exists in the server/viewsfolder of the package and ends with .html.
The following is an example of simple html rendering.
app.get('/myPackage/example/render', function (req,res,next) { MyPackage.render('index', {packageName:'myPackage'}, function (err, html) { //Rendering a view from the Package server/views res.send(html); });});
14. overwrite the default Layout
Custom packages can overwrite the default layout.
The following is an example of overwriting the default system layout instead of using the local layout in the package:
MyPackage.register(function(system, app) { app.set('views', __dirname + '/server/views'); // ...
Note that the package must rely on the System package to ensure that it is evaluated after the System package, which overwrites the view folder.
15. Overwrite View
You can overwrite the default public view used by the core package. To create a home page, you must create a package and modify the script in the public folder, as shown in the following figure:
angular.module('mean.mycustompackage', ['mean.system']).config(['$viewPathProvider', function($viewPathProvider) { $viewPathProvider.override('system/views/index.html', 'mycustompackage/views/myhomepage.html');}]);
This will render mycustompackage/views/myhomepage.html as the home page.
16. Create your own package
$ mean package <packageName>
It will create the package under/packages/custom/packageName.
17. delete a package
$ mean uninstall myPackage
18. contribute your own package
If your package has been finalized and there is no problem, you can upload it to the package code library. The method is:
$ mean register # register to the mean network (see below)$ cd <packages/custom/pkgName>$ mean publish
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.
