I recently spent my spare time studying the front end of the three musketeers, Angular. Angular is a development platform. It helps you build Web applications more easily. Angular is a combination of declarative templates, dependency injection, end-to-end tools, and best practices to solve your development challenges. Angular improves the ability for developers to build Web, mobile, or desktop applications. Ok, then combine the process of doing their own DEMO to say.

Making > > github.com/Hancoson/ng… Star Star Star ~~

start

  • Scaffolding: This demo is built using the Angular CLI tools. If you are not familiar with this demo, go to the Angular CLI website.
  • Technology stack:
    • Angular 6, Chinese version
    • element-angular

run

The installation

Install the Angular CLI globally

npm install -g @angular/cliCopy the code

New project

ng new {my-app}Copy the code

Start the

cd my-app
ng serve --openCopy the code

Or you can just clone the instance

git clone https://github.com/Hancoson/ng-zhihuDaily.git

# 1
npm i

# 2
npm startCopy the code

Presents the CLI using

Add functionality

Ng g cl my-new-class # new class ng g c my-new-component # new component ng g d my-new-directive # new directive ng g e my-new-enum # new enum ng g M my-new-module # new module ng g p my-new-pipe # new pipe ng g s my-new-service # new service ng g m route --routing # new routeCopy the code

Description:

  • g – generate
  • cl – class
  • c – component
  • d – directive
  • e – enum
  • m – module
  • p – pipe
  • s – service

note

Unit test files are not generated

 --spec=falsesCopy the code

Setting the default style

What if you want your project to use Scss or Less? Check it out below:

New project:

ng new {project-name} --style=scss  Copy the code

Set in an existing project:

Manually modify the angular.json file by adding the following:

"schematics": {  
  "@schematics/angular:component": {  
       "styleext": "scss"  
   }  
 },Copy the code

structure

└ ─ Readme.md └ ─ Angular. json # Angular CLI configuration file. ├ ─ ─ dist # build directory ├ ─ ─ e2e # under the e2e/is end-to-end (end - to - end) test ├ ─ ─ node_modules # rely on ├ ─ ─ package. The json ├ ─ ─ the SRC │ ├ ─ ─ app │ │ ├ ─ ─ App.com ponent. CSS # root component style │ │ ├ ─ ─ app.com ponent. HTML # root component template │ │ ├ ─ ─ app.com ponent. Spec. Ts # root component unit test │ │ ├ ─ ─ App.component.ts # │ ├─ ├─ App.module. Root application module for presents to describe how to assemble │ │ ├ ─ ─ components # component set │ │ │ └ ─ ─ home │ │ │ ├ ─ ─ home.com ponent. HTML # component template │ │ │ ├ ─ ─ Home.com ponent. SCSS # component style │ │ │ ├ ─ ─ home.com ponent. Spec. Ts # component unit test │ │ │ └ ─ ─ home.com ponent. Ts # component logic │ │ ├ ─ ─ Constants # Project │ ├─ Route # Route │ ├─ Assets # ├─ Browserslist # Used to share target browser │ ├─ Environments # All Environment Configuration files │ ├─ index.html # Main HTML file │ ├─ Karmap.conf. Js # Unit Test configuration │ for Karma │ ├─ Heavy Metal Guitar School - │ ├─ Heavy metal School - │ ├─ heavy metal School - │ ├─ heavy metal School - │ ├─ heavy metal School - │ ├─ heavy metal School - │ ├─ heavy metal School - │ ├─ heavy metal School ├── ├.app.json │ ├─ ├─ ├─ ├─ ├─ ├── ├.json # ├── ├.json ├ ─ garbage # TypeScript compiler config ─ tslint.json # Config info for tslint and CodelyzerCopy the code

Key Technical points

The module

Angular applications are modular and have their own modular system called NgModules. An NgModule is a container for cohesive blocks of code that focus on an application domain, a workflow, or a set of closely related functions. It can contain components, service providers, or other code files whose scope is defined by the NgModule that contains them. It can also import functionality exported by other modules and export specific functionality for use by other NgModules.

NgModule is a class with an @NgModule decorator. The @NgModule decorator is a function that takes a metadata object whose properties describe the module. The most important attributes are as follows.

  • Declarations (list of declarations) – components, directives, pipes that belong to this NgModule.
  • Exports — a subset of declarable objects that can be used in component templates of other modules.
  • Imports — Other modules that export the required classes for the component templates in this module.
  • Providers – Creators of services that this module contributes to global services. These services can be used by any part of the application. (You can also specify service providers at the component level, which is usually preferred.)
  • Bootstrap – The main view of the application, called the root component. It hosts all the other views in the application. Only the root module should set the bootstrap property.
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }Copy the code

component

Components control a small area of the screen called a view.

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: './home.component.html', styleUrls: ['./home.component.scss']}) export class HomeComponent implements OnInit {/*...... * /}Copy the code
  • Selector: A CSS selector that tells Angular to create and insert an instance of the component once it finds the corresponding tag in the template HTML.
  • TemplateUrl: The address of the component’s HTML template file relative to the component file.
  • Providers: An array of dependency injection providers required by the current component.
  • StyleUrls: Style resources required by the component.

routing

The route definition tells the router which view to display when the user clicks on a link or enters a URL in the browser address bar.

import { Routes, RouterModule } from '@angular/router'; import { HomeComponent } from './.. /components/home/home.component'; const myRoute: Routes = [ { path: '', component: HomeComponent } ]; export const appRoutes = RouterModule.forRoot( myRoute, { enableTracing: true } )Copy the code

A typical Angular Route has two attributes:

  • Path: A string that matches the URL in the browser’s address bar.
  • Component: Which component the router should create when navigating to this route.

Routermodule.forroot () : Initializes the router and starts listening for address changes in the browser

The pipe

Cut string

  • New pipe file

    import { Pipe, PipeTransform } from '@angular/core' @Pipe({ name: 'SliceStr'}) export class SliceStrPipe implements PipeTransform {// Start and end are followed by extraStr The // function to indicate that this is optional rather than mandatory is to give a hint of the screenshot and then concatenate your custom strings (...). Such as transform (value: a string, start? : number, end? : number, extraStr? : string): string { if (value) { if (typeof (start) === 'number' && typeof (end) === 'number') { if (value.length > end && extraStr  && typeof (extraStr) === 'string') { return value.slice(start, end) + extraStr.toString(); } else { return value.slice(start, end); } } else { return value; } } else { return value; }}}Copy the code

  • The introduction of

    import { SliceStrPipe } from '.. /pipe/slicestr.pipe' // ... @NgModule({ declarations: [ SliceStrPipe ], // ... })Copy the code

  • use

    <p class="title">{{item.title|SliceStr: 0:20:'... '}}</p>Copy the code

Related project Reference

  • React- Redux (Zhihu Daily)
  • React- Mobx (Zhihu Daily)
  • Vue (Zhihu Daily)
  • Mini Program (Zhihu Daily)

References:

  • angular.io/
  • cli.angular.io/