#172 Template hello-angularjs

Author: paulvi

org.nodeclipse.ui/src/org/nodeclipse/ui/util/Constants.java

@@ -37,6 +37,8 @@ public class Constants {
 	public static final String TEMPLATE_HELLO_COFFEE = "hello-coffee";
 	public static final String TEMPLATE_HELLO_TYPESCRIPT = "hello-typescript";
 	public static final String TEMPLATE_HELLO_HTML = "hello-html";
+	// @since 0.18
+	public static final String TEMPLATE_HELLO_ANGULARJS = "hello-angularjs";	
 	// @since 0.11
 	public static final String TEMPLATE_HELLO_KOA = "hello-koa";
 	public static final String TEMPLATE_HELLO_NASHORN = "hello-nashorn";

org.nodeclipse.ui/src/org/nodeclipse/ui/wizards/NodeProjectWizardPage.java

@@ -44,6 +44,8 @@ public class NodeProjectWizardPage extends WizardPage {
     Button btnHelloCoffee;
     Button btnHelloTypeScript;
     Button btnHelloHtml;
+    // @since 0.18
+    Button btnHelloAngularjs;
     // @since 0.11
     Button btnHelloKoa;
     Button btnHelloNashorn;
@@ -221,6 +223,10 @@ private final void createTemplatesGroup(Composite parent) {
         btnHelloHtml = new Button(templatesGroup, SWT.RADIO);
         btnHelloHtml.setText(Constants.TEMPLATE_HELLO_HTML);
 
+        // @since 0.18
+        btnHelloAngularjs = new Button(templatesGroup, SWT.RADIO);
+        btnHelloAngularjs.setText(Constants.TEMPLATE_HELLO_ANGULARJS);
+        
         // @since 0.11
         btnHelloKoa = new Button(templatesGroup, SWT.RADIO);
         btnHelloKoa.setText(Constants.TEMPLATE_HELLO_KOA);
@@ -244,6 +250,9 @@ public String getSelectedTemplate() {
          if (btnHelloHtml.getSelection()) {
              return Constants.TEMPLATE_HELLO_HTML;
          }
+         if (btnHelloAngularjs.getSelection()) {
+             return Constants.TEMPLATE_HELLO_ANGULARJS;
+         }
          if (btnHelloKoa.getSelection()) {
              return Constants.TEMPLATE_HELLO_KOA;
          }

org.nodeclipse.ui/templates/hello-angularjs/.bowerrc

@@ -0,0 +1,3 @@
+{
+  "directory": "app/bower_components"
+}

org.nodeclipse.ui/templates/hello-angularjs/app/app.js

@@ -0,0 +1 @@
+var app = angular.module('MyTutorialApp',[]);

org.nodeclipse.ui/templates/hello-angularjs/app/index.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<head>
+<title>Learning AngularJS</title>
+	<script src="bower_components/angular/angular.min.js" type="text/javascript"></script>
+	<script src="app.js" type="text/javascript"></script>
+	<script src="maincontroller.js" type="text/javascript"></script>
+<body>
+	<div id='content' ng-app='MyTutorialApp' ng-controller='MainController'>
+		http://www.revillweb.com/tutorials/angularjs-in-30-minutes-angularjs-tutorial/
+		</br>
+		{{understand}}
+		</br>
+		
+		<input type='text' ng-model='inputValue' /></br>
+		{{inputValue}}</br>
+		
+		<select ng-model='selectedPerson' ng-options='obj.name for obj in people'></select>
+		<!--  
+		<select ng-model='selectedGenre'>
+			<option ng-repeat='musicLabel in people[selectedPerson.id].music'>{{musicLabel}}</option>
+		</select>
+		-->
+		<select ng-model='selectedGenre' ng-options='musicLabel for musicLabel in people[selectedPerson.id].music'></select>
+		</br>
+		
+		<input type='text' ng-model='searchText' />
+        <ul>
+            <li ng-repeat='person in people | filter:searchText'>#{{person.id}} {{person.name}}</li>
+        </ul>
+        </br>
+        
+        <input type='text' ng-model='searchText' /></br>
+        Live :
+        <ul>
+            <li ng-repeat='person in people | filter:searchText' ng-show='person.live == true'>#{{person.id}} {{person.name}}</li>
+        </ul>
+        Hide not live :
+        <ul>
+            <li ng-repeat='person in people | filter:searchText' ng-hide='person.live == false'>#{{person.id}} {{person.name}}</li>
+        </ul>
+        </br>
+        
+        Filter <input type='text' ng-model='searchText' />
+        <ul>
+            <li ng-repeat='person in people | filter:searchText' ng-show='person.live == true'>#{{person.id}} {{person.name}}</li>
+        </ul>
+        <input type='text' ng-model='newPerson' />
+        <button ng-click='addNew()'>Add</button>
+        
+	</div>
+</body>
+</html>

org.nodeclipse.ui/templates/hello-angularjs/app/maincontroller.js

@@ -0,0 +1,64 @@
+app.controller("MainController", function($scope){
+	$scope.understand = "I now understand how the scope works!";
+	$scope.inputValue = "";
+	
+	$scope.selectedPerson = 0;
+	$scope.selectedGenre = null;
+	$scope.people = [
+     {
+         id: 0,
+         name: 'Leon',
+         music: [
+             'Rock',
+             'Metal',
+             'Dubstep',
+             'Electro'
+         ],
+         live: true
+     },
+     {
+         id: 1,
+         name: 'Chris',
+         music: [
+             'Indie',
+             'Drumstep',
+             'Dubstep',
+             'Electro'
+         ],
+         live: true
+     },
+     {
+         id: 2,
+         name: 'Harry',
+         music: [
+             'Rock',
+             'Metal',
+             'Thrash Metal',
+             'Heavy Metal'
+         ],
+         live: false
+     },
+     {
+         id: 3,
+         name: 'Allyce',
+         music: [
+             'Pop',
+             'RnB',
+             'Hip Hop'
+         ],
+         live: true
+     }
+	];
+	$scope.newPerson = null;
+	$scope.addNew = function() {
+		alert("new");
+        if ($scope.newPerson != null && $scope.newPerson != "") {
+            $scope.people.push({
+                id: $scope.people.length,
+                name: $scope.newPerson,
+                live: true,
+                music: []
+            });
+        }
+    };
+});

org.nodeclipse.ui/templates/hello-angularjs/bower.json

@@ -0,0 +1,19 @@
+{
+  "name": "angularjs-in-30-minutes",
+  "version": "0.0.0",
+  "authors": [
+    "Paul Verest <nodeclipse.org>"
+  ],
+  "license": "MIT",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "angular": "~1.3.0"
+  }
+}