AngularJS Tutorial Part 1 - Creating a Hello World App

aashnisshah · Aug 20, 2016 · 14dc5a4 · 14dc5a4
1 parent 20d6e94
commit 14dc5a4
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -1,2 +1,6 @@
 # lsh_angularjs_tutorial
 LSH: AngularJS tutorial
+
+These codes are part of an introduction to AngularJS tutorial by [Aashni Shah](http://www.aashni.me).
+
+You can access the complete tutorial [here](http://blog.aashni.me/2016/08/angularjs-an-introduction/)
diff --git a/app.js b/app.js
@@ -0,0 +1,13 @@
+var angularApp = angular.module('AngularApp', ['ngRoute']);
+
+angularApp.config(['$routeProvider',
+  function($routeProvider){
+    $routeProvider
+    .when('/', {
+      templateUrl : 'views/main.html',
+      controller : 'MainCtrl',
+      controllerAs : 'main'
+    })
+    .otherwise('/');
+  }
+]);
diff --git a/controllers/main.js b/controllers/main.js
@@ -0,0 +1,7 @@
+angularApp.controller('MainCtrl', [ 
+  '$scope',
+  function($scope){
+    $scope.heading = "Hello World";
+    $scope.message = "This is me";
+  }
+]);
diff --git a/index.html b/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html ng-app="AngularApp">
+<head>
+  <title>Star Wars App</title>
+
+  <!-- include AngualrJS js -->
+  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
+  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-route.min.js"></script>
+
+  <!-- our files -->
+  <script type="text/javascript" src="app.js"></script>
+
+  <!-- Controllers -->
+  <script type="text/javascript" src="controllers/main.js"></script>
+
+</head>
+<body>
+
+  <div ng-view></div>
+
+</body>
+</html>
diff --git a/views/main.html b/views/main.html
@@ -0,0 +1,2 @@
+<h1>{{ heading }}</h1>
+<p>{{ message }}</h1>