Use ControllerAs pattern in angularjs archetype

archetypes/struts2-archetype-angularjs/src/main/resources/archetype-resources/src/main/webapp/WEB-INF/content/application.jsp

@@ -16,7 +16,7 @@
     <a href="/home">Home</a> - <a href="/projects">Projects</a>
 </div>
 
-<div ng-controller="AppController">
+<div ng-controller="AppController as app">
     <div ng-view></div>
 </div>
 

archetypes/struts2-archetype-angularjs/src/main/resources/archetype-resources/src/main/webapp/js/config.js

@@ -30,10 +30,10 @@
 
                 $routeProvider.when('/projects', {
                     templateUrl: 'partials/projects.html',
-                    controller: 'ApacheProjectsController'
+                    controller: 'ApacheProjectsController as vm'
                 }).when('/home', {
                     templateUrl: 'partials/home.html',
-                    controller: 'HomeController'
+                    controller: 'HomeController as vm'
                 }).otherwise({ redirectTo: '/home' });
             }
         ]);

archetypes/struts2-archetype-angularjs/src/main/resources/archetype-resources/src/main/webapp/js/controllers/ApacheProjectsController.js

@@ -1,6 +1,4 @@
 /*
- * $Id$
- *
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
  * distributed with this work for additional information
@@ -25,15 +23,18 @@
         .module('app')
         .controller('ApacheProjectsController', ApacheProjectsController);
 
-    function ApacheProjectsController($scope, $log, DataService) {
-        this.init = function() {
-            DataService.getProjects().then(function(data) {
-                $scope.projects = data.projectNames;
+    function ApacheProjectsController($log, DataService) {
+        var vm = this;
+
+        init();
+
+        function init() {
+            return DataService.getProjects().then(function(data) {
+                vm.projects = data.projectNames;
+                return vm.projects;
             }, function() {
                 $log.error('Could not receive project names.');
             });
-        };
-
-        this.init();
+        }
     }
 })();

archetypes/struts2-archetype-angularjs/src/main/resources/archetype-resources/src/main/webapp/js/controllers/AppController.js

@@ -1,6 +1,4 @@
 /*
- * $Id$
- *
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
  * distributed with this work for additional information
@@ -22,8 +20,8 @@
     'use strict';
 
     angular
-    .module('app')
-    .controller('AppController', AppController);
+        .module('app')
+        .controller('AppController', AppController);
 
     function AppController() {
 

archetypes/struts2-archetype-angularjs/src/main/resources/archetype-resources/src/main/webapp/js/controllers/HomeController.js

@@ -1,6 +1,4 @@
 /*
- * $Id$
- *
  * Licensed to the Apache Software Foundation (ASF) under one
  * or more contributor license agreements.  See the NOTICE file
  * distributed with this work for additional information
@@ -25,7 +23,8 @@
         .module('app')
         .controller('HomeController', HomeController);
 
-    function HomeController($scope) {
-        $scope.name = "Sunshine";
+    function HomeController() {
+        var vm = this;
+        vm.name = "Sunshine";
     }
 })();

archetypes/struts2-archetype-angularjs/src/main/resources/archetype-resources/src/main/webapp/partials/home.html

@@ -1,6 +1,6 @@
-<h1>Hello, {{name}}.</h1>
+<h1>Hello, {{vm.name}}.</h1>
 
 <p>
     Not your name?
-    <input type="text" ng-model="name" />
+    <input type="text" ng-model="vm.name" />
 </p>

archetypes/struts2-archetype-angularjs/src/main/resources/archetype-resources/src/main/webapp/partials/projects.html

@@ -1,3 +1,3 @@
 <ul>
-    <li ng-repeat="project in projects">{{project}}</li>
+    <li ng-repeat="project in vm.projects">{{project}}</li>
 </ul>