Frontend on Time Friend

Angular Path Alias Configuration

Thu, 27 Dec 2018 22:17:36 +0000

Angular CLI has webpack built-in, so path aliases can be configured. The configuration method is almost the same.

Configure Path Alias

Find the tsconfig.json file in your project root directory.

Note: If your configuration doesn’t take effect, check if your baseUrl is configured correctly.

{
 "compilerOptions": {
 "baseUrl": "./src/", 
 "paths": {
 "@app/*": ["app/*"],
 "@services/*": ["app/services/*"]
 }
 }
}

Before Configuration

import { Api } from '../../../../../services/api.service';
import { xxx } from '../../../../../services/api.xxx';

After Configuration

import { Api } from '@services/api.service';
import { xxx } from '@services/api.xxx';

Some development tips, hope this helps you.

Recommended: An Angular Electron Project Template Ready to Use

Thu, 20 Dec 2018 19:02:36 +0000

The official Angular website does provide an official Angular template for Electron. But the version is 2.0, which is really too old. I doubt anyone will maintain it anymore. Yet it’s still listed on the official site. This misleads many beginners — at least it made me think there wasn’t a newer, usable Electron template for quickly creating projects.

Angular-electron

Here I recommend a highly complete template that’s ready to use out of the box:

Angular 7 + Electron Main Process and Renderer Process Communication

Wed, 19 Dec 2018 19:02:36 +0000

Process Types in Electron

In Electron, there are two types of processes: the main process and the renderer process.

The renderer process can be understood as the view layer — the process that displays pages, which we’re very familiar with. Here you can use Node.js API capabilities as well as perform browser operations we’re already used to. But when you need to invoke operations that only the main process can handle, you need a communication mechanism to tell the main process what you want to do.

Building an Angular 7 + Electron Desktop App from Scratch

Tue, 18 Dec 2018 19:02:36 +0000

What is Electron?

Electron is a library for building desktop applications with JavaScript, HTML, and CSS. These applications can be packaged to run on Mac, Windows, and Linux, and can also be published to the Mac and Windows App Stores. This means that as long as you have front-end development skills, you can easily build cross-platform desktop applications.

Electron’s Main Process and Renderer Process

Electron has two types of processes: the main process and the renderer process. Some modules can only run on one or the other, while others have no restrictions. The main process acts more as a behind-the-scenes role, while renderer processes are the individual windows of the application.

Angular Template Safe Navigation Operator ( ?. )

Sun, 25 Nov 2018 22:17:36 +0000

This is very practical and frequently used operator in Angular development. React and Vue don’t have this feature natively.

In our daily development, when accessing property paths.

If for some reason the path contains null or undefined, and we continue to access properties, the entire program will crash, preventing the program from continuing to run.

Here’s an example:

var obj ={
 a:1,
 b:{ // Sometimes, this property might not exist
 c:2,
 d:3 
 }
}
obj.a // Normal access
obj.b // If this property sometimes doesn't exist, accessing it will only return undefined, won't cause an error
obj.b.c // When property b doesn't exist, accessing properties on undefined will definitely cause the program to crash

Safe navigation solves the above problem. We just need to change the . before uncertain properties to ?. to avoid errors. When no value is found, it will default to empty.

Make Visual Studio Code Format Your Code with ESLint Rules

Sun, 05 Nov 2017 19:33:33 +0000

After adding ESLint to the project, everyone’s code became much cleaner. But because we weren’t familiar with ESLint rules at first, we spent a lot of time counting spaces and toggling between double and single quotes.

This severely impacted development efficiency and mood!!!! This severely impacted development efficiency and mood!!!! This severely impacted development efficiency and mood!!!!

Important things must be said three times!!!

Below is a method using the Visual Studio Code ESLint plugin. After configuration, your code will be automatically formatted according to ESLint rules.

Put Redux Aside, Try MobX

Sat, 04 Nov 2017 19:33:33 +0000

Mobx

Mobx is a simple, highly scalable state management tool. Like Redux, Mobx is a tool for managing state in React. However, the development experience is better than Redux.

Installation

npm install mobx --save

//For React: 
npm install mobx-react --save

A Simple Counter

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { observer } from 'mobx-react'
import { observable, computed, action } from 'MobX'

class Store {
 @observable
 count = 0;

 @action
 add() {
 this.count ++
 }
 minus() {
 this.count --
 }
}

let countStore = new Store()

@observer
class CountComponent extends Component {
 render() {
 return (
 <div>
 <h2>{ countStore.count }</h2>
 <button key="add" onClick={countStore.add}>+</button>
 <button key="minus" onClick={countStore.minus}>-</button>
 </div>
 )
 }
}

ReactDOM.render(
 <CountComponent/>,
 document.getElementById('root')
)

Using Decorators in Your React Project

Wed, 01 Nov 2017 19:33:33 +0000

Using Decorators

Currently only supports Babel/TypeScript preprocessors

Babel:

npm install babel-plugin-transform-decorators-legacy --save-dev

Add it to your .babelrc configuration file. If you don’t have a .babelrc file, create one.

{
 "presets": [
 "es2015",
 "stage-1"
 ],
 "plugins": ["transform-decorators-legacy"]
}

The plugin order is very important: transform-decorators-legacy should be the first plugin.

When using React Native, the following preset can replace transform-decorators-legacy:

{
 "presets": ["stage-2", "react-native-stage-0/decorator-support"]
}

Using Decorators in create-react-app

npm run eject

Install the related plugins:

React Series: How Parent Components Pass Props to this.props.children

Fri, 08 Sep 2017 19:33:33 +0000

Problem

When using React Router, the following pattern appears frequently:

this.props.children

But how does the parent component pass props to a component rendered this way?

Solution

We can pass props to child components like this:

{ 
 React.cloneElement(this.props.children,{A:xxx,B:xxx2,C:xxx3}) 
 
 }

React Series: Create React Native Apps with create-react-native-app

Sun, 30 Jul 2017 19:33:33 +0000

Earlier when introducing create-react-app, I briefly mentioned create-react-native-app.

This tool is actually quite fun to use. The biggest advantage is that you can debug React Native apps on your computer without installing Xcode or Android Studio.

By computer, I mean Mac, Windows, and Linux!!!!

create-react-native-app

Create React Native App Installation

$ npm install -g create-react-native-app
$ create-react-native-app my-app
$ cd my-app/
$ npm start

Install the Expo app on your iPhone or Android phone. After running npm start, a QR code will appear in the console. Scan it with the Expo app, and you can start remote debugging on your phone right away. It’s very convenient, though a bit slower than desktop simulator debugging.

React Series: An Auto-Height iframe Component

Mon, 17 Jul 2017 19:33:33 +0000

When embedding iframes in a webpage, you always need to deal with the iframe height problem.

How do we do it in React?

class FullheightIframe extends Component {
 constructor() {
 super();
 this.state = {
 iFrameHeight: "0px"
 };
 }

 render() {
 return (
 <iframe
 style={ {
 width: "100%",
 height: this.state.iFrameHeight,
 overflow: "visible"
 }}
 onLoad={() => {
 const obj = ReactDOM.findDOMNode(this);
 this.setState({
 iFrameHeight: obj.contentWindow.document.body.scrollHeight + "px"
 });
 }}
 ref="iframe"
 src={this.props.src}
 width="100%"
 height={this.state.iFrameHeight}
 scrolling="no"
 frameBorder="0"
 />
 );
 }
}

React Series: Make create-react-app Support LESS Imports

Fri, 14 Jul 2017 19:33:33 +0000

Currently, create-react-app does not support importing LESS directly. Here I’ll show you how to make it support LESS imports.

create-react-app is based on webpack, but it doesn’t expose the webpack.config files. To support LESS, you need to modify the webpack configuration. The following command exposes the configuration files:

npm run eject

After running it, you’ll see a new config folder. Inside are files like webpack.config.dev.js and webpack.config.prod.js.

Next, install less-loader

npm install less-loader less --save-dev

Then modify the webpack.config.dev.js file.

React Series - JSX

Thu, 13 Jul 2017 19:33:33 +0000

JSX is an interesting thing. It looks like a template language, but has all the capabilities of JavaScript.

In React, JSX is used to generate React elements.

After we create an APP using create-react-app:

A Piece of JSX Code

import React, { Component } from 'react';

import ReactDOM from 'react-dom';

class App extends Component {
 render() {
 return (
 <div className="App">
 I am an APP
 </div>
 );
 }
}

ReactDOM.render(<App />, document.getElementById('root'));

We Can Embed Expressions in JSX

 //Insert data 
 const data = {name:"Xiaoming"}
 const ele = <div>My name is: {data.name} </div>;

 //Calculate
 const ele1 = <div> {1+1} </div>;

 //Ternary expression
 const ele2 = <div> {true?"I am Xiaoming":"I am not Xiaoming"} </div>;

 //In attributes
 const ele3 = <img src={date.xxx} />;

Because JSX is compiled by Babel, it itself is an object.

React Series: Starting from a Scaffold - create-react-app

Wed, 12 Jul 2017 19:33:33 +0000

The React ecosystem is incredibly vast. If beginners want to directly experience the charm of React, here is an official scaffold. The usage is very simple.

create-react-app

Basic Usage

Install

npm install -g create-react-app

Create an app

create-react-app my-app
cd my-app/

File structure:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ └── favicon.ico
│ └── index.html
│ └── manifest.json
└── src
 └── App.css
 └── App.js
 └── App.test.js
 └── index.css
 └── index.js
 └── logo.svg
 └── registerServiceWorker.js

Start the app:

A WeChat SPA Page Webview Cache Issue

Wed, 22 Feb 2017 16:14:25 +0000

A Low-Level Problem

Because the company’s WeChat project uses Angular routing for single-page applications. So page switching is done based on hash values.

We encountered a problem: every time we deploy new web code to the server. On Android WeChat client, it always takes many days. Even requires uninstalling WeChat. After reopening the page, the page will update. (But there’s no such problem on iPhone)

If a critical bug is encountered after the version is officially released. That would be a disaster.

AngularJS Lazy Loading (3)

Wed, 01 Jun 2016 23:55:35 +0000

The previous article roughly described Angular’s startup process,

If you want to asynchronously load third-party modules in your own project, you need to run through the main logic from the previous article again.

This way, all methods of third-party modules can be loaded into Angular.

app.config([
 '$controllerProvider',
 '$compileProvider',
 '$filterProvider',
 '$provide',
 '$injector',
 function($controllerProvider, $compileProvider, $filterProvider, $provide, $injector) {

 //As mentioned in the first article, expose internal methods
 app.controller = $controllerProvider.register;
 app.directive = $compileProvider.directive;
 app.filter = $filterProvider.register;
 app.factory = $provide.factory;
 app.service = $provide.service;
 app.provider = $provide.provider;
 app.value = $provide.value;
 app.constant = $provide.constant;
 app.decorator = $provide.decorator;


 //And define a global function for easy future calls
 //Code for loading third-party modules,
 window.addModule=function(moduleName){
 var module = angular.module(moduleName);
 var ngProviders = {
 '$controllerProvider': $controllerProvider,
 '$compileProvider': $compileProvider,
 '$filterProvider': $filterProvider,
 '$provide': $provide
 };

 if (module.requires) {
 for (var i = 0; i < module.requires.length; i++) {
 addModule(module.requires[i]);
 }
 }
 angular.forEach(module._invokeQueue, function(args) {
 var provider = ngProviders[args[0]] || $injector.get(args[0]);
 provider[args[1]].apply(provider, args[2]);
 });
 angular.forEach(module._configBlocks, function(args) {
 var provider = ngProviders.$injector.get(args[0]);
 provider[args[1]].apply(provider, args[2]);
 });
 angular.forEach(module._runBlocks, function(args) {
 $injector.invoke(args);
 });
 }

 }
]);

AngularJS Lazy Loading (2)

Tue, 31 May 2016 20:34:35 +0000

In the previous article, we implemented the simplest AngularJS lazy loading,

by replacing Angular’s internal methods and using require.js with $q to complete lazy loading.

Today let’s talk about how Angular lazy loads third-party modules;

Before that, we need to understand how Angular starts.

setupModuleLoader Method

In the above figure, we need to pay attention to a very important method;

setupModuleLoader method, as the name suggests - module loader;

AngularJS Lazy Loading (1)

Mon, 30 May 2016 16:14:25 +0000

Today let’s talk about a problem that has been bothering me for a long time. AngularJS lazy loading.

The benefits of Angular don’t need to be mentioned here, but after using it for a while, you’ll find that all Controllers, Services, Directives, etc. of a website are loaded completely, before the page starts running.

For small projects with little code, this doesn’t feel like a big problem.

But when there are more pages, the main page becomes increasingly bloated. Useful and useless code are all loaded. Although loading everything means the first page load will be much slower, subsequent pages will be extremely fast. But this is not Smart at all.

Source Code Analysis - Small Differences Between Providers in AngularJS

Mon, 22 Feb 2016 16:14:25 +0000

AngularJS Providers

Angular has the following methods to create providers:

provider()
service()
factory()

Provider Usage

angular.module("app", [])
.provider("HelloAngular", function() {
 return {
 $get: function() {
 var name = "Xiaoming";
 function getName() {
 return name;
 }
 return {
 getName: getName
 }
 }
 }
})
.controller('MyCtrl', ['$scope', 'HelloAngular',
 function($scope, helloAngular) {
 $scope.gameName = helloAngular.getName();
 }
]);

Service Usage

angular.module("app", [])
.service("HelloAngular", function() {
 this.name = "Xiaoming";
 this.getName=function(){
 return this.name;
 }
})
.controller('MyCtrl', ['$scope', 'HelloAngular',
 function($scope, helloAngular) {
 $scope.gameName = helloAngular.getName();
 }
]);

Factory Usage

angular.module("app", [])
.factory("HelloAngular", function() {
 var name = "Xiaoming";
 function getName(){
 return name;
 }
 return {
 	getName:getName
 };
})
.controller('MyCtrl', ['$scope', 'HelloAngular',
 function($scope, helloAngular) {
 $scope.gameName = helloAngular.getName();
 }
]);

The implementation methods differ, but the usage is exactly the same

Annoying AngularJS Annotations - Using grunt-ng-annotate

Fri, 12 Jun 2015 23:15:00 +0000

Angular added dependency injection

When writing code, roughly written as follows

 app.controller('tempController', function($scope, $http, $state, $timeout) {

 ...

 })

But such code, after compression will cause a problem. Function parameters: $scope, $http, $state, $timeout will become: a,b,c,d

Causing this function cannot find services to inject, because each parameter’s naming is strictly required.

As follows:

 app.controller('tempController', function(a,b,c,d) {

 ...

 })

To solve this problem, angular supports the following writing:

AngularJS Directive Template

Thu, 21 May 2015 22:17:36 +0000

myModule.directive('namespaceDirectiveName', function factory(injectables) {

 var directiveDefinitionObject = {
 restrict: string,// Directive usage method, including tag, attribute, class, comment
 priority: number,// Directive execution priority
 template: string,// Template used by directive, expressed as HTML string
 templateUrl: string,// Load template from specified url address
 replace: bool,// Whether to replace current element with template, if false, append to current element
 transclude: bool,// Whether to transfer current element's content to template
 scope: bool or object,// Specify directive's scope
 controller: function controllerConstructor($scope, $element, $attrs, $transclude){...},// Define interface function for interacting with other directives
 require: string,// Specify other directives that need to be depended on
 link: function postLink(scope, iElement, iAttrs) {...},// Programmatically manipulate DOM, including adding listeners, etc.
 compile: function compile(tElement, tAttrs, transclude){
 return: {

 pre: function preLink(scope, iElement, iAttrs, controller){...},
 post: function postLink(scope, iElement, iAttrs, controller){...}
 }

 }// Programmatically modify DOM template copy, can return link function
 };

 return directiveDefinitionObject;

});