Merge pull request #1692 from angular-fullstack/angular-1.5

Angular 1.5

Author: Awk34

Diff for: app/templates/_bower.json

@@ -2,16 +2,16 @@
   "name": "<%= lodash.slugify(lodash.humanize(appname)) %>",
   "version": "0.0.0",
   "dependencies": {
-    "angular": "~1.4.0",
+    "angular": "~1.5.0",
     "json3": "~3.3.1",
     "es5-shim": "~3.0.1",<% if(filters.bootstrap) { if (filters.sass) { %>
     "bootstrap-sass-official": "~3.1.1",<% } %>
     "bootstrap": "~3.1.1",<% if(filters.oauth) { %>
     "bootstrap-social": "~4.9.1",<% }} %>
-    "angular-resource": "~1.4.0",
-    "angular-cookies": "~1.4.0",
-    "angular-sanitize": "~1.4.0",<% if (filters.ngroute) { %>
-    "angular-route": "~1.4.0",<% } if (filters.uibootstrap) { %>
+    "angular-resource": "~1.5.0",
+    "angular-cookies": "~1.5.0",
+    "angular-sanitize": "~1.5.0",<% if (filters.ngroute) { %>
+    "angular-route": "~1.5.0",<% } if (filters.uibootstrap) { %>
     "angular-bootstrap": "~1.1.2",<% } %>
     "font-awesome": ">=4.1.0",
     "lodash": "~2.4.1"<% if(filters.socketio) { %>,
@@ -20,6 +20,6 @@
     "angular-validation-match": "~1.5.2"<% } %>
   },
   "devDependencies": {
-    "angular-mocks": "~1.4.0"
+    "angular-mocks": "~1.5.0"
   }
 }

Diff for: app/templates/_package.json

@@ -146,7 +146,7 @@
     "karma-chrome-launcher": "~0.2.0",
     "karma-requirejs": "~0.2.2",
     "karma-jade-preprocessor": "0.0.11",
-    "karma-phantomjs-launcher": "~0.2.0",<% if (filters.jade) { %>
+    "karma-phantomjs-launcher": "~1.0.0",<% if (filters.jade) { %>
     "karma-ng-jade2js-preprocessor": "^0.2.0",<% } else { %>
     "karma-ng-html2js-preprocessor": "~0.2.0",<% } %>
     "karma-spec-reporter": "~0.0.20",
@@ -159,7 +159,7 @@
     "jasmine-spec-reporter": "^2.4.0",<% } if(filters.babel) { %>
     "karma-babel-preprocessor": "^5.2.1",<% } %>
     "requirejs": "~2.1.11",
-    "phantomjs": "^1.9.18",
+    "phantomjs-prebuilt": "^2.1.4",
     "proxyquire": "^1.0.1",
     "supertest": "^1.1.0"
   },

Diff for: app/templates/client/app/main/main(html).html

@@ -10,18 +10,18 @@ <h1>'Allo, 'Allo!</h1>
   <div class="row">
     <div class="col-lg-12">
       <h1 class="page-header">Features:</h1>
-      <ul class="nav nav-tabs nav-stacked col-md-4 col-lg-4 col-sm-6" ng-repeat="thing in main.awesomeThings">
-        <li><a href="#" uib-tooltip="{{thing.info}}">{{thing.name}}<% if (filters.socketio) { %><button type="button" class="close" ng-click="main.deleteThing(thing)">&times;</button><% } %></a></li>
+      <ul class="nav nav-tabs nav-stacked col-md-4 col-lg-4 col-sm-6" ng-repeat="thing in $ctrl.awesomeThings">
+        <li><a href="#" uib-tooltip="{{thing.info}}">{{thing.name}}<% if (filters.socketio) { %><button type="button" class="close" ng-click="$ctrl.deleteThing(thing)">&times;</button><% } %></a></li>
       </ul>
     </div>
   </div><% if (filters.socketio) { %>
 
   <form class="thing-form">
     <label>Syncs in realtime across clients</label>
     <p class="input-group">
-      <input type="text" class="form-control" placeholder="Add a new thing here." ng-model="main.newThing">
+      <input type="text" class="form-control" placeholder="Add a new thing here." ng-model="$ctrl.newThing">
       <span class="input-group-btn">
-        <button type="submit" class="btn btn-primary" ng-click="main.addThing()">Add New</button>
+        <button type="submit" class="btn btn-primary" ng-click="$ctrl.addThing()">Add New</button>
       </span>
     </p>
   </form><% } %>

Diff for: app/templates/client/app/main/main(jade).jade

@@ -8,15 +8,15 @@ header#banner.hero-unit
   .row
     .col-lg-12
       h1.page-header Features:
-      ul.nav.nav-tabs.nav-stacked.col-md-4.col-lg-4.col-sm-6(ng-repeat='thing in main.awesomeThings')
+      ul.nav.nav-tabs.nav-stacked.col-md-4.col-lg-4.col-sm-6(ng-repeat='thing in $ctrl.awesomeThings')
         li
           a(href='#', uib-tooltip='{{thing.info}}')
             | {{thing.name}}<% if (filters.socketio) { %>
-            button.close(type='button', ng-click='main.deleteThing(thing)') &times;<% } %><% if (filters.socketio) { %>
+            button.close(type='button', ng-click='$ctrl.deleteThing(thing)') &times;<% } %><% if (filters.socketio) { %>
 
   form.thing-form
     label Syncs in realtime across clients
     p.input-group
-      input.form-control(type='text', placeholder='Add a new thing here.', ng-model='main.newThing')
+      input.form-control(type='text', placeholder='Add a new thing here.', ng-model='$ctrl.newThing')
       span.input-group-btn
-        button.btn.btn-primary(type='submit', ng-click='main.addThing()') Add New<% } %>
+        button.btn.btn-primary(type='submit', ng-click='$ctrl.addThing()') Add New<% } %>

Diff for: app/templates/client/app/main/main.controller.js

@@ -5,17 +5,20 @@
 class MainController {
 
   constructor($http<% if (filters.socketio) { %>, $scope, socket<% } %>) {
-    this.$http = $http;
-    this.awesomeThings = [];
-
-    $http.get('/api/things').then(response => {
-      this.awesomeThings = response.data;<% if (filters.socketio) { %>
-      socket.syncUpdates('thing', this.awesomeThings);<% } %>
-    });<% if (filters.socketio) { %>
+    this.$http = $http;<% if (filters.socketio) { %>
+    this.socket = socket;<% } %>
+    this.awesomeThings = [];<% if (filters.socketio) { %>
 
     $scope.$on('$destroy', function() {
       socket.unsyncUpdates('thing');
     });<% } %>
+  }
+
+  $onInit() {
+    this.$http.get('/api/things').then(response => {
+      this.awesomeThings = response.data;<% if (filters.socketio) { %>
+      this.socket.syncUpdates('thing', this.awesomeThings);<% } %>
+    });
   }<% if (filters.models) { %>
 
   addThing() {
@@ -31,6 +34,9 @@ class MainController {
 }
 
 angular.module('<%= scriptAppName %>')
-  .controller('MainController', MainController);
+  .component('main', {
+    templateUrl: 'app/main/main.html',
+    controller: MainController
+  });
 
 })();

Diff for: app/templates/client/app/main/main.controller.spec.js

@@ -1,33 +1,42 @@
 'use strict';
 
-describe('Controller: MainController', function() {
+describe('Component: mainComponent', function() {
 
   // load the controller's module
   beforeEach(module('<%= scriptAppName %>'));<% if (filters.uirouter) {%>
   beforeEach(module('stateMock'));<% } %><% if (filters.socketio) {%>
   beforeEach(module('socketMock'));<% } %>
 
   var scope;
-  var MainController;<% if (filters.uirouter) {%>
+  var mainComponent;<% if (filters.uirouter) {%>
   var state;<% } %>
   var $httpBackend;
 
   // Initialize the controller and a mock scope
-  beforeEach(inject(function(_$httpBackend_, $controller, $rootScope<% if (filters.uirouter) {%>, $state<% } %>) {
-    $httpBackend = _$httpBackend_;
-    $httpBackend.expectGET('/api/things')
-      .respond(['HTML5 Boilerplate', 'AngularJS', 'Karma', 'Express']);
+  beforeEach(inject(function(
+    _$httpBackend_,
+    $http,
+    $componentController,
+    $rootScope<% if (filters.uirouter) {%>,
+    $state<% } %><% if (filters.socketio) {%>,
+    socket<% } %>) {
+      $httpBackend = _$httpBackend_;
+      $httpBackend.expectGET('/api/things')
+        .respond(['HTML5 Boilerplate', 'AngularJS', 'Karma', 'Express']);
 
-    scope = $rootScope.$new();<% if (filters.uirouter) {%>
-    state = $state;<% } %>
-    MainController = $controller('MainController', {
-      $scope: scope
-    });
+      scope = $rootScope.$new();<% if (filters.uirouter) {%>
+      state = $state;<% } %>
+      mainComponent = $componentController('main', {
+        $http: $http,
+        $scope: scope<% if (filters.socketio) {%>,
+        socket: socket<% } %>
+      });
   }));
 
   it('should attach a list of things to the controller', function() {
+    mainComponent.$onInit();
     $httpBackend.flush();<% if (filters.jasmine) { %>
-    expect(MainController.awesomeThings.length).toBe(4);<% } if (filters.mocha) { %>
-    <%= expect() %>MainController.awesomeThings.length<%= to() %>.equal(4);<% } %>
+    expect(mainComponent.awesomeThings.length).toBe(4);<% } if (filters.mocha) { %>
+    <%= expect() %>mainComponent.awesomeThings.length<%= to() %>.equal(4);<% } %>
   });
 });

Diff for: app/templates/client/app/main/main.js

@@ -4,16 +4,12 @@ angular.module('<%= scriptAppName %>')
   <% if (filters.ngroute) { %>.config(function($routeProvider) {
     $routeProvider
       .when('/', {
-        templateUrl: 'app/main/main.html',
-        controller: 'MainController',
-        controllerAs: 'main'
+        template: '<main></main>'
       });
   });<% } %><% if (filters.uirouter) { %>.config(function($stateProvider) {
     $stateProvider
       .state('main', {
         url: '/',
-        templateUrl: 'app/main/main.html',
-        controller: 'MainController',
-        controllerAs: 'main'
+        template: '<main></main>'
       });
   });<% } %>