跳至主要内容

帖子

目前显示的是 2016的博文

Getting started with Angular 1.5 and ES6: part 6

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.
constrequires= [ 'pascalprecht.translate', //... Configure $translateProvider in app.config.js file.
importenfrom'./i18n.en.json'; importzhfrom'./i18n.zh.json'; functionAppConfig(/.../, $translateProvider){ //...// Adding a translation table for the English language$translateProvider.translations('en', en); // Adding a translation table for the Chinese language$translateProvider.translations(…

Getting started with Angular 1.5 and ES6: part 5

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 detailsComment list of this postA Comment form used for adding new comment We can create three components for this page.
PostDetailCardPostCommentListPostCommentForm Replace post detail template with the following:
<post-detail-cardpost="$ctrl.post"></post-detail-card> <post-comment-listcomments="$ctrl.comments"></post-comment-list> <post-comment-formon-save-comment="$ctr…

Getting started with Angular 1.5 and ES6: part 4

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.
classJWT { constructor(AppConstants, $window) { 'ngInject'; this._AppConstants= AppConstants; this._$window= $window; } save(token) { this._$window.localStorage[this._AppConstants.jwtKey] = token; } get() { returnthis._$window.localStorage[this._AppConstants.jwtKey]; } destroy() { this._$window.localStorage.removeItem(this._AppConstants.jwtKey); } } exportdefaultJWT; The backend…