Forward Everyday

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...