Developing Web Application with "MEAN" technology stack (i) ANGULARJS front-end architecture

Preface does not know when suddenly out "mean technology stack" This new word, sounds very good appearance, in fact, we have been familiar with the front-end of the past two years in the popular technology, MongoDB, Express, Angularjs, Nodejs, Because these technologies cover from front-end to back-end to the database, you can use them to complete the development of a Web application, so it became a very good combination, quite the momentum of the year lamp. The front-end from transduction Aberdeen to the full stack of the road, these technologies must be covered. This series is an introductory introduction to developing Web applications using the mean technology stack, using one of your own fictional small projects as an example.  angularjs's controversial angular, referred to as NG, is the excellent framework of Google's production, in 2013-2014 years rounds, but the domestic seems to slow a shot, I have seen a lot of projects using NG since 2015. Ng has been criticized since the beginning of the very difficult to get started, completely different development methods, team development is not know how to organize the code. But as the big brother of jquery was gradually abandoned, people began to accept programming thinking like MVVM. However, a bad news is that the NG team intends to refactor the angular2.0 version of a major change, and 1.0 can not be the same, although the official 1.0 to 2.0 migration plan, but the extra work is always not good, and the use of 2.0 will have to pay more learning costs. Plus this year, there are react this strength male, Ng's thunder immediately was robbed, people began to study react under the programming method. But I reckon react's real utility will have to wait a year or two. Now angular1.x is still a good choice. Despite 2.0 of changes, 1.4 is a stable version, and we certainly won't have a problem with a stable version. So my conclusion is, but with no harm, there will be no white learning this kind of thing, even if the future angular1.x abandoned, you learn the programming thinking is still in. This article discusses how to use the AngularJs for the front-end architecture, no explanation for the basics of NG, and the students who need to know can see a series I've written before http://www.cnblogs.com/lvdabao/tag/angularjs/  Practiced hand project introduction in order to learn the system of "MEAN" technology stack, I invented a small project, first to do an introduction. Questionmaker, a system used to generate questionnaires, allows users to edit questions (select questions, fill in blanks) and preview edits in real time. You can then edit a test paper, add a question to the test paper, and then save it as a complete questionnaire. It's kind of like an investigative pie. Let's go first: The function of the project is mainly crud operation, so it is very suitable for AngulAR application scenario, two-way binding for real-time preview such a function is simply handy. The front and back ends of the project are completely detached, the backend does not render the page, only the data interface is provided, the front end uses Ng's dynamic template to render the page, and the required data is obtained through the AJAX request. Project I have open source to GitHub, interested classmates can view the:https://github.com/double-lv/questionmaker  front-end directory structure with NG to build a project how should the directory structure be organized? In order not to artificially increase the complexity, I do not use Bower to manage the dependent library, and no other article described in the Yeoman to build the project, but simply manually to create the directory, so that we can focus on the core of the project, The directory structure is this: the front-end code is in the SRC directory, including the import file index.html, so that we can follow up on the merge compression and other compile work, the compiled file will be placed in the Dist directory.   Home Index.html This is the entry page of the project, is actually a large container, here to load all the JS and CSS files, and then provide a view container is enough, because from this page, we will no longer have a jump, all through the front-end route to do local refresh, home code is very concise:

<!DOCTYPE HTML><HTMLNg-app= "Qmaker"><Head>    <MetaCharSet= "Utf-8">    <title>Question Maker</title>    <Linkrel= "stylesheet"href= "/src/lib/bootstrap-3.3.5/css/bootstrap.min.css">    <Scriptsrc= "/src/lib/jquery-1.9.1.min.js"></Script>    <Scriptsrc= "/src/lib/angular-1.4.1.min.js"></Script>    <Scriptsrc= "/src/lib/angular-ui-router.min.js"></Script>    <Linkrel= "stylesheet"href= "/src/css/base.css">    <!--{main} -    <Scriptsrc= "/src/js/app.js"></Script>    <Scriptsrc= "/src/js/controllers.js"></Script>    <Scriptsrc= "/src/js/directives.js"></Script>    <Scriptsrc= "/src/js/filters.js"></Script>    <Scriptsrc= "/src/js/routes.js"></Script>    <Scriptsrc= "/src/js/services.js"></Script>    <!--{Endmain} -</Head><Body>    <Divclass= "NavBar Navbar-default">        <Divclass= "Container-fluid">            <Divclass= "Navbar-header">                <ahref="#/"class= "Navbar-brand">Question Maker</a>            </Div>        </Div>    </Div>    <Divclass= "MainContent container-fluid"Ui-view>        </Div></Body></HTML>

View CodeEntrance file app.js with the entrance page, there must be a JS start-up portal, this is the app.js, here it only does two things: 1. Start the angular with only one line of code:

var app = Angular.module (' Qmaker ', [' ui.router ']);

We have a global module called app. The ui.router is injected here, because our entire application is routed using Ui-router, which is described in detail later. 2. Hang the Ui-router $state and $stateparams services on the $rootscope so that we can access the routing parameters in all the subsequent modules, without having to inject them in every place. The code is fairly simple:

App.run (function($rootScope, $state, $stateParams) {    = $state;     = $stateParams;});

Controller Collection Controllers.jsController.js inside is all controller definition, because this project is relatively small, and anyway eventually to merge, so it is placed in a file, so you can use the chain style App.controller (' A ', ...). Controller (' B ', ...) to define all controllers in a breath. If the project is larger, more controllers, you can build controllers as a folder, and then put the controller inside. Controller inside is a number of business-related code, such as the initialization of test data, add answers, delete options and other operations. However, when we need to initiate an AJAX request, such as saving the test, it is not appropriate to write directly in the controller, which will cause the confusion of the logic mixed code. All operations that require the service side can be abstracted as a service, layered, and invoked through the service mechanism provided by NG. Service Collection Services.jsThen, all the service-side requests related to the question, we can encapsulate into a questionservice, this service provides: Submit questions, delete questions, update questions and other services, so the level is very clear. So, in services.js, we define everything that is relevant to the service, and in this project, all of our services are AJAX requests that can be easily done with the $http service provided by NG. In fact, the service does not have to write Ajax requests, anything that can be abstracted as "public service" can be defined here, can be arbitrarily called by other modules. Instruction Collection Directives.jsThe students who know NG should not be unfamiliar with the instructions, we can easily implement some UI effects by means of extending HTML tags, which is easy to use and can be used by many local public, just like we used to write jquery plugins. All instructions are defined in this file and can also be used in chained notation, which is cool. In our project, some functions are generic, such as the pagination of the list, then the paging function can be made into a directive. I have defined a directive called Pagenav, which can then be called where all the paging is needed, and the code is as follows:

<pageobj= "PageObject"  pagefunc= "PageFunction"></  pagenav>

Just one label, and then specify the paging data and the page turn function through the properties. Filter Collection Filters.jsOur project uses the dynamic template that NG provides, the server does not render the page, only provides the data interface. Some of the data we need to format after the output, this is used to filter, all the filter is placed here. The definition and use of filter is very simple, and this is not a lot to be said. front-end routing definition routes.jsThis project uses Ui-router to do front-end routing, and this visual inspection is now the most popular practice. Ui-router is a third-party plug-in, because Ng built-in ngrouter function is weak, can not implement nested and multi-view routing, and Ui-router introduced the concept of "state" to control the view, to achieve these functions, so ui-router is the best choice. It is a module in the Angular-ui Project (http://angular-ui.github.io/), which also provides a lot of NG-based UIs, like date selectors or something. Ui-router seems to be the most popular one. Ui-router can be used to achieve nested and the same page multi-view, the specific use of the method can refer to my blog several articles reproduced: http://www.cnblogs.com/lvdabao/articles/4657235.html this project, Because the whole station does not refresh, so the level of the path will be deep, nested routines from the useful. In the portal page index.html, using a div to do the parent container, plus the Ui-view property, you can load other templates inside. The switch from the question list to the question edit page is loaded in the parent container. And in the question editing page, there are corresponding question-sheet editing and test Preview view, by giving Ui-view name, you can load their corresponding template, here is the application of multi-view. The code snippet is as follows:

 <!--  question edit view  -->  <  div  ui-view  = "Editarea"  ></ Span style= "color: #800000;" >div  >  <!--  question Preview view  -->  <  div  ui-view  = "Previewarea"  Span style= "color: #0000ff;" >></ div  >  

In the Test Paper preview page, we also need to show the question, just on the page in the definition of a ui-view, and then in the route configuration, you can load the question preview template, it is easy to implement the reuse of the templates. There is no logic in the page, just configure the routing rules in Route.js, the whole station no refresh jump is so easy to implement. TPL DirectoryAfter using Ui-router to do the front-end routing, all the other pages are changed into templates (dynamically loaded by Ui-router) except for the index.html of the portal page. All templates are placed under the TPL directory. If the business module is more, you can create a new folder in this directory, the project is relatively simple, so there is only one layer. No matter how many layers you have, it's OK to configure it in Routers.js. Ui-router can be used to inject a template corresponding to the controller, so in the code we do not have to add Ng-controller, template file is very clean ng template. Lib directoryThe external libraries required for the project are placed here. There are angular, ui-router, jquery, Bootstrap. You can see I just put the code file directly inside, not with the current popular bower to manage. Because I don't want to artificially add complexity, it can be frustrating if someone's machine fails to install bower or if there is a problem with the GIT environment, or if GitHub can't access it. Anyway, this is a few stable versions, it is better to download directly. If you need to compress I'll do it later with Gulp. SummaryThis is how the front-end structure of this small project looks. From the above we can see that using NG to do the front-end architecture is still very organized. The concepts of controller, service, directive are essentially "modules", so we can write the code very readily in the form of module development, without any coupling or dependency between files and files. module requires that we inject it through the injection mechanism of NG. Therefore, when these files are introduced in the index.html, they are not ordered and can be introduced in any order. By the way, the front-end code of post-processing, I have written a script with Gulp, with NPM to install the required package, the execution of Gulp can be compiled to build dist directory. This article only introduces the entry level of the angular front-end architecture, and for some specific technical details mentioned in the article, you can check out the angular series I wrote http://www.cnblogs.com/lvdabao/tag/AngularJs/ This example project I have open source to GitHub (Https://github.com/Double-Lv/QuestionMaker), has now implemented the basic functionality. Later on I will expand more features, and then it will inevitably involve more technical issues, angular the road to the front-end architecture has just begun.

Developing Web Application with "MEAN" technology stack (i) ANGULARJS front-end architecture