Forward Everyday

Docker multi-stage builds Docker 17.06 introduced a new feature, Multi-stage builds, check the Docker blog entry multi stage builds or new multistage builds section in the docker official documentation for more details. I tried to add a multi-stage Dockefile to build my sample project angularjs-springmvc-sample-boot into Docker images and run it in Docker container. FROM node:latest AS ui WORKDIR /usr/src/ui COPY package.json . # Setup NPM mirror, optionally for China users. # RUN npm config set registry https://registry.npm.taobao.org/ RUN npm install COPY . . RUN node_modules/.bin/bower install --allow-root RUN node_modules/.bin/gulp FROM maven:latest AS boot WORKDIR /usr/src/app COPY pom.xml . # COPY settings.xml /usr/share/maven/ref/settings-docker.xml RUN mvn -B -f pom.xml -s /usr/share/maven/ref/settings-docker.xml dependency:resolve COPY . . RUN mvn -B -s /usr/share/maven/ref/settings-docker.xml clean package -DskipTests FROM java:8-jdk-alpine WORKDIR /static CO...

Replace ng-annotate with babel-plugin-angularjs-annotate ng-annotate was deprecated, the successor is babel-plugin-angularjs-annotate . More details, please read this post . babel-plugin-angularjs-annotate is a standard Babel plugin. Install babel-plugin-angularjs-annotate . npm install babel-plugin-angularjs-annotate --save-dev It is easy to configure it in the babel configuration file, there is a .babelrc file located in the project root folder. { "plugins": ["transform-runtime", ["angularjs-annotate", { "explicitOnly" : true}]], "presets": ["es2015", "stage-0"] } The explicitOnly option force you to use ngInject or /*@ngInject*/ to handle the dependency injection. I have used ngInject in all of the smaple codes to process dependency injection explicitly, there is no need to change the codes. In the former codes, I configured a webpack loader named ng-annotate-loader to process ngInjec...

I18n with Angular Translate Your application could be required to support multi-languages. There are a few solutions to support i18n in Angular applications. Angular translate is one of the most populars. Install angular translate packages. npm install --save angular-translate angular-translate-storage-cookie angular-translate-storage-local Next import these files in app.js : //... import ' angular-translate ' ; import ' angular-translate-storage-cookie ' ; import ' angular-translate-storage-local ' ; //... And register angular-translate module. const requires = [ ' pascalprecht.translate ' , //... Configure $translateProvider in app.config.js file. import en from ' ./i18n.en.json ' ; import zh from ' ./i18n.zh.json ' ; function AppConfig ( / ... / , $translateProvider ){ //... // Adding a translation table for the English language $translateProvider . translations ( ' en ' ,...

Apply Container/Presenter pattern If you have used React, you could be fimilar with Container/Presenter pattern. The presenter component is responsive for rendering view and notifying event handlers to handle events. The container component handles events, interacts with external resources, eg, in a React application, the container is the glue codes with Redux. In this post, I just try to split component into small components by different responsibilities. Go back to post detail component as an example. The post details view includes three sections: Post details Comment list of this post A Comment form used for adding new comment We can create three components for this page. PostDetailCard PostCommentList PostCommentForm Replace post detail template with the following: < post -detail-card post = " $ctrl.post " ></ post -detail-card > < post -comment-list comments = " $ctrl.comments " ></ post -comment-lis...

Authentication In a real world application, it should provide login, registration and logout features for users, and also can identify if a user has the roles or permissions to access the protected resources. I have set adding post and editing post requires authentication in backend APIs. And it uses a JWT token based authentication to authorize users. In this client, we use window.localStorage to store the JWT token, it is easy to read and restore authentication without new login. Create a JWT service to wrap read and write localStorage actions. class JWT { constructor ( AppConstants , $window ) { ' ngInject ' ; this . _AppConstants = AppConstants; this . _$window = $window; } save ( token ) { this . _$window . localStorage [ this . _AppConstants . jwtKey ] = token; } get () { return this . _$window . localStorage [ this . _AppConstants . jwtKey ]; } destroy () { this . _$window . localStorage . removeItem...