跳至主要内容

Replace ng-annotate with babel-plugin-angularjs-annotate

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 ngInject via ng-annotate in webpack.conf file, it is no use and can be removed now.
Remove ng-annotate-loader.
npm uninstall ng-annotate-loader --save-dev
And remove it from webpack configuration.
//webpack.conf
 { test: /\.js$/, exclude: [/app\/lib/, /node_modules/], loader: 'babel' },
 ...
Run the codes, it should work as before.
$ npm run start                                                                      
                                                                                        
> ng6-starter@0.0.1 start E:\hantsylabs\angular-es6-sample                           
> gulp serve                                                                         
                     
[22:51:58] Requiring external module babel-register                                  
[22:52:02] Using gulpfile E:\hantsylabs\angular-es6-sample\gulpfile.babel.js         
[22:52:02] Starting 'serve'...                                                       
[22:52:04] Finished 'serve' after 1.36 s                                             
[BS] Access URLs:                                                                    
-------------------------------------                                               
   Local: http://localhost:3000                                                  
   External: http://192.168.56.1:3000                                               
-------------------------------------                                               
   UI: http://localhost:3001                                                  
UI External: http://192.168.56.1:3001                                               
-------------------------------------                                               
[BS] Serving files from: client                                                      
webpack: wait until bundle finished: /index.html                                     
webpack built a539378083e795ec5876 in 39091ms                                        
Hash: a539378083e795ec5876                                                           
Version: webpack 1.14.0                                                              
Time: 39091ms                                                                        
         Asset     Size  Chunks             Chunk Names        
674f50d287a8c48dc19ba404d20fe713.eot   166 kB          [emitted]                     
b06871f281fee6b241d60582ae9369b9.ttf   166 kB          [emitted]                     
912ec66d7572ff821749319396470bde.svg   444 kB          [emitted]                     
       app.bundle.js   102 kB       0  [emitted]  app                
       vendor.bundle.js   4.5 MB       1  [emitted]  vendor             
      app.bundle.js.map   117 kB       0  [emitted]  app                
      vendor.bundle.js.map  5.29 MB       1  [emitted]  vendor             
       index.html  1.28 kB          [emitted]                     
webpack: bundle is now VALID.
标签：

评论

发表评论

此博客中的热门博文

Create a restful application with AngularJS and Zend 2 framework

Create a restful application with AngularJS and Zend 2 framework This example application uses AngularJS/Bootstrap as frontend and Zend2 Framework as REST API producer. The backend code This backend code reuses the database scheme and codes of the official Zend Tutorial, and REST API support is also from the Zend community. Getting Started with Zend Framework 2 Getting Started with REST and Zend Framework 2 Zend2 provides a   AbstractRestfulController   for RESR API producing. class AlbumController extends AbstractRestfulController { public function getList() { $results = $this->getAlbumTable()->fetchAll(); $data = array(); foreach ($results as $result) { $data[] = $result; } return new JsonModel(array( 'data' => $data) ); } public function get($id) { $album = $this->getAlbumTable()->getAlbum($id); return new JsonModel(array("data" =...
发表评论
阅读全文

JPA 2.1: Attribute Converter

JPA 2.1: Attribute Converter If you are using Hibernate, and want a customized type is supported in your Entity class, you could have to write a custom Hibernate Type. JPA 2.1 brings a new feature named attribute converter, which can help you convert your custom class type to JPA supported type. Create an Entity Reuse the   Post   entity class as example. @Entity @Table(name="POSTS") public class Post implements Serializable { private static final long serialVersionUID = 1L; @Id @GeneratedValue(strategy = GenerationType.AUTO) @Column(name="ID") private Long id; @Column(name="TITLE") private String title; @Column(name="BODY") private String body; @Temporal(javax.persistence.TemporalType.DATE) @Column(name="CREATED") private Date created; @Column(name="TAGS") private List<String> tags=new ArrayList<>(); } Create an attribute convert...
发表评论
阅读全文

Auditing with Hibernate Envers

Auditing with Hibernate Envers The approaches provided in JPA lifecyle hook and Spring Data auditing only track the creation and last modification info of an Entity, but all the modification history are not tracked. Hibernate Envers fills the blank table. Since Hibernate 3.5, Envers is part of Hibernate core project. Configuration Configure Hibernate Envers in your project is very simple, just need to add   hibernate-envers   as project dependency. <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-envers</artifactId> </dependency> Done. No need extra Event listeners configuration as the early version. Basic Usage Hibernate Envers provides a simple   @Audited   annotation, you can place it on an Entity class or property of an Entity. @Audited private String description; If   @Audited   annotation is placed on a property, this property can be tracked. @Entity @Audited public clas...
1 条评论
阅读全文