preface

Believe that everyone at the time of shopping technology BBS or blog, you will find some good articles we want to save so that you can repeat reading and viewing, in some relatively large sites, such as the Denver nuggets or SegmentFault such features can provide similar collection to help us do this saved work, we can come back after repeated checking, But we must be more than one usually browse sites, and sometimes some technology of the personal blog no such function, we can only save the browser bookmarks do, so we usually preserved some of the articles will be scattered, no single place to help us manage, if there is such an application, As long as we input the URL address of an article we want to save, it can help us generate the body content of this article, and can support the classification and search of tags and other functions. It is based on this demand and my personal experience to develop this application. You can go to this address and try it out. Your account number is Test and your password is 123456. This application is developed using Angular4 and koA2 provides the data interface. As a beginner of Angular, I made this application while reading the official Angular documentation and encountered some problems. Here I will briefly describe the development process and the solutions to some problems. The technical scheme selection is as follows

  • Angular front-end Framework
  • The Angular Cli front end is packaged and built
  • Koa2 provides the data interface
  • MongoDB provides data storage
  • Phantom and Node-readability provide text extraction

I. Initialization of the project

Angular is a front-end framework released in September 2016. Unlike Vue and React, Angular is not just a library for the view layer. It provides a complete solution and ecosystem. Itself is built in modular solutions, modular, testing, form validation, routing, internationalization and HTTP service, etc., these things developers don’t need to wonder how we choose to directly according to the official suggested that it is good to go, choose difficult patients must be very like it, but it has not been vue and react so flexible, How we look at it depends on our individual project needs. Since Angular is so complete, it must also have a CLI tool, the Angular CLI, which is a command-line interface tool that creates projects, adds files, and performs a host of development tasks, such as testing, packaging, and publishing. To install the Angular CLI globally, run the following command

npm install -g @angular/cli

Then execute ng new [ProjectName] to initialize a project.

Modularization and componentization

Angular applications are modular, and Angular has its own system of modules, called NgModules. Our application consists of one or more modules and must have a root module, which we usually call AppModule. Each module has a decorator function called @NgModule, which receives a metadata object describing the module’s properties. This is where we configure the components, routes, directives, pipes, services, and so on that our application needs. Angular then boots the root module to launch the application, with the following code

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule);Copy the code

Angular apps are componentialized. Components control a small area of the screen called a view. Each Component also has a decorator function called @Component, which also receives a metadata object on which we can configure the Component’s template file, Component template style file, and so on, as shown in the following code

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']})Copy the code

So we can combine different components and put together our entire application. The overall architecture is shown below

3. Route configuration

Angular routes are configured using a module called RouterModule. RouterModule is in the @Angular/Router package, so the RouterModule needs to be exported from the @Angular/Router package. Call the RouterModule’s forRoot method and pass it an array configuration object. Note that we also need a route that matches the fact that none of our routes are configured. Its path should be a double asterisk **

import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
  {
    path: 'index',
    component: IndexComponent
  },
  {
    path: '* *',
    redirectTo: 'index',
    pathMatch: 'full'
  }
])
@NgModule({
  imports: [RouterModule.forRoot(routes)]
    ...
})Copy the code

Once the route is configured, add its return value to the Imports array of the AppModule. Then add
to the template of our root appComponent as our route rendering outlet, and the basic route configuration is complete. Of course, there are many other aspects of Angular routing, such as routing guards, routing module partition, routing values, etc. For more details, see the Angular Documentation in Chinese

Four, directory structure division

I divide the directory according to my personal development habits. Most of our business logic development is carried out under the APP folder. I generally create a Pages file under the APP folder to store page-level components. Then, we will create the folders of Directive, PIP, Service, animation and Interceptor respectively to store the directives, pipes, services, animations and interceptors of our application. Because I do not use some third-party UI component libraries for this application, some common components are packaged by myself. We also need a Component folder to hold common UI components for the entire application, so we can clearly divide the entire application. The final table of contents is roughly as follows

│ ├─ ├─ ├─ ├─ ├─ ├─ ├─ │ ├─ ├─ ├─ ├─ ├─ ├─ ├─ ├─ ├─ ├─ ├─ ├─ ├─ ├─ ├─ ├.app.class.html // The root component template file ├ ─ ─ app.com ponent. SCSS / / the style of the root component files ├ ─ ─ app.com ponent. Spec. The ts / / root component test file ├ ─ ─ app.com ponent. Ts / / root component ├ ─ ─ App. The module. Ts / / root module ├ ─ ─ component / / general UI components ├ ─ ─ button │ └ ─ ─ dropdown can ├ ─ ─ directives / / instruction │ └ ─ ─ markdown - editor ├ ─ ─ Interceptor / / interceptor │ └ ─ ─ global - response - interceptor. Ts ├ ─ ─ page / / page level component │ ├ ─ ─ the add - link - note │ ├ ─ ─ the add - note │ ├ ─ ─ Classification │ ├ ─ ─ edit - note │ ├ ─ ─ index │ ├ ─ ─ search │ ├ ─ ─ the tag │ └ ─ ─ the view - note └ ─ services / / service ├ ─ ─ loading - bar ├ ─ ─ ├─ note exercises ─ tagCopy the code

5. Cross-domain issues

Cross-domain issues are common in modern front-end projects, such as Vue and React, which can be solved with webpack-dev-server proxy configuration. Angular CLI-created projects also use Webpack to package and compile applications. But the Angular CLI hides the webPack configuration in the wrapper. We can expose the webpack configuration file by executing ng eject, but it is not necessary to expose the WebPack configuration in order to configure cross-domain problems. To do this, create a proxy.config.json configuration file in the project root directory and write the following code in that file to tell Angular that all HTTP requests in the application that start with API are forwarded to port 3002 of localhost.

{
  "/api": {"target":"http://localhost:3002"}}Copy the code

After writing this configuration file we also need to add this configuration to the package.json start command

"start" : "ng serve --proxy-config proxy.config.json"Copy the code

Then execute NPM run start to restart the service, and our cross-domain problem is easily resolved.

Six, unresolved problems

As mentioned before, this application does not use some third-party UI component libraries. Some UI components used in the project are encapsulated by myself, including a LoadingBar component and a Message prompt component, which should be called in the form of services, similar to the following code

this.loadingBar.start()
this.msg.info('This is a message.')Copy the code

In Angular, services don’t come with templates. Only components have templates, so components need to dynamically load a component with a template via a service. I didn’t find the implementation, but I looked at the ng-Zorro source code and didn’t understand 😭. In the end, I implemented the DOM directly in the service through the least elegant solution. Take my LoadingBar service

import { Injectable } from '@angular/core';

@Injectable()
export class LoadingBarService {
  constructor() { }

  public $Loading = {
    start: function(){
      const myLoadingBar = document.querySelector('.my-loading-bar');
      if(myLoadingBar ! == null && myLoadingBar instanceof HTMLElement) {let LoadingBarDivWidth = 0;
        this.timer = setInterval(() => {
          LoadingBarDivWidth++;
          myLoadingBar.style.width = LoadingBarDivWidth + 'vw';
          if(LoadingBarDivWidth >= 100) { clearInterval(this.timer); }}, 25); }else {
        const LoadingBarDiv = document.createElement('div');
        LoadingBarDiv.className = 'my-loading-bar';
        const bodyEl = document.querySelector('body');
        bodyEl.appendChild(LoadingBarDiv);
        let LoadingBarDivWidth = 0;
        this.timer = setInterval(() => {
          LoadingBarDivWidth++;
          LoadingBarDiv.style.width = LoadingBarDivWidth + 'vw';
          if(LoadingBarDivWidth >= 100) { clearInterval(this.timer); }}, 25); } }, finish:function(){
      const myLoadingBar = document.querySelector('.my-loading-bar');
      if(myLoadingBar ! == null && myLoadingBar instanceof HTMLElement) { clearInterval(this.timer); myLoadingBar.style.width = 0 +'vw'; }}}; }Copy the code

Seven, packaging,

After our entire application is developed we need to build static files for Node to deploy. Here are a few things to note. In the compilation and configuration command of the project generated by CLI, the –prod configuration is not enabled, so we need to manually add the command to enable it. After adding –prod, the packaged resources will no longer have resource map, which will reduce the file size. If the Angular Cli is 1.3.0 or higher, you can add — build-Optimizer to make the file size even smaller. I used 1.2.7 for this project. Finally, the build command configuration is as follows

"build" : "ng build --prod --build-optimizer"Copy the code

Eight, summary

This article is just a rundown of an Angular newbie’s first project, and doesn’t say anything new or deep. Angular is a great framework. The barrier to entry is not as high as most people think. As long as you have a solid JavaScript foundation and a basic understanding of ES6 syntax, you can learn to develop Angular differently. Finally, basic information about the project

  • Experience address weiweinote.cn/index
  • GitHub source address github.com/linguowei/m…

In fact, if you have your own personal server, you can deploy it for your own use. If not, you can also deploy it to some foreign free service providers such as Heroku. Well, if you have any questions or suggestions about this project, please leave a comment.