Skip to content

Commit

Permalink
week 5 commit
Browse files Browse the repository at this point in the history
  • Loading branch information
Ayaskant Sahu committed Feb 22, 2015
1 parent 71f2cde commit b18400e
Show file tree
Hide file tree
Showing 18 changed files with 784 additions and 35 deletions.
23 changes: 23 additions & 0 deletions blog_entries/entry5.htm
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<h3>AngularJS experiments</h3>

<p>
AngularJS can be a complete framework on the UI side with features like routing, services and dependency injection integrated into it
</p>

<ol>
<li>
AngularSJ Routing
</li>
<li>
A sample service and dependency injection was done to demonstrate login feature
</li>
<li>
Login feature was improved by using $cookieStorage module
</li>
<li>
More features were added and data sharing was achived betweendifferent controllers. Child controllers were spawned under a parent controller as well.
</li>
<li>
AngularJS-UI google maps
</li>
</ol>
5 changes: 4 additions & 1 deletion experiments/story.txt
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,5 @@
week1/week1.html?week1.txt Week 1 - HTML5
week2/week2.html?week2.txt Week 2 - CSS and Bootstrap
week2/week2.html?week2.txt Week 2 - CSS and Bootstrap
week3/week3.html?week3.txt Week 3 - Jquery
week4/week4.html?week4.txt Week 4 - AngularJS
week5/week5.html?week5.txt Week 5 - AngularJS - Routing, Services
10 changes: 5 additions & 5 deletions experiments/week4/Experiment1.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,11 +85,11 @@ <h3>Code Snippets</h3>
<br/>
This chunk of code is responsible for iterating over an array names games in $scope and printing values of each object inside it.
<pre>
<tr ng-repeat="gamer in gamers">
<td>{{ gamer.firstName }}</td>
<td>{{ gamer.lastName }}</td>
<td>{{ gamer.favouriteGame }}</td>
</tr>
&lt;tr ng-repeat="gamer in gamers"&gt;
&lt;td&gt;{{ gamer.firstName }}&lt;/td&gt;
&lt;td&gt;{{ gamer.lastName }}&lt;/td&gt;
&lt;td&gt;{{ gamer.favouriteGame }}&lt;/td&gt;
&lt;/tr&gt;
</pre>
<br />
<br />
Expand Down
47 changes: 18 additions & 29 deletions experiments/week4/Experiment2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,47 +84,36 @@
<fieldset>
<h3>About the experiment</h3>
<div>
Data-binding in Angular apps is the automatic synchronization of data between the model and view components. The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa. Angular templates work differently. First the template (which is the uncompiled HTML along with any additional markup or directives) is compiled on the browser. The compilation step produces a live view. Any changes to the view are immediately reflected in the model, and any changes in the model are propagated to the view. The model is the single-source-of-truth for the application state, greatly simplifying the programming model for the developer. You can think of the view as simply an instant projection of your model.
Filters can be added to expressions and directives using a pipe character. In this case instead of using the default filters, I have created a custom filter which will search the JSON array for a specific term and return the sentences which has it.
</div>
</fieldset>
<br />
<br />
<fieldset>
<h3>Code Snippets</h3>
This attribute in an input tag binds its value to gamer.firstName inside $scope.
This code basically calls the filter 'searchFor' with the model searchString value.
<pre>
ng-model="gamer.firstName"
&lt;li ng-repeat="i in items | searchFor:searchString"&gt;
</pre>
<br />
<br />
This chunk of code is responsible for iterating over an array names games in $scope and printing values of each object inside it.
This chunk of code is the actual implementation of the filter. It contains all the logic required to perform matching.
<pre>
<tr ng-repeat="gamer in gamers">
<td>{{ gamer.firstName }}</td>
<td>{{ gamer.lastName }}</td>
<td>{{ gamer.favouriteGame }}</td>
</tr>
</pre>
<br />
<br />
This chunk of code is the controller which decribes all logic in javascript. this automatically binds itself to the component based on its name.
<pre>
function gamerController($scope) {
$scope.gamers = [];
$scope.gamers.push({
firstName: "Ayaskant",
lastName: "Sahu",
favouriteGame: "DOTA 2"
});
$scope.addGamer = function(){
$scope.gamers.push({
firstName: $scope.gamer.firstName,
lastName: $scope.gamer.lastName,
favouriteGame: $scope.gamer.favouriteGame
app.filter('searchFor', function () {
return function (arr, searchString) {
if (!searchString) {
return arr;
}
var result = [];
searchString = searchString.toLowerCase();
angular.forEach(arr, function (item) {
if (item.title.toLowerCase().indexOf(searchString) !== -1) {
result.push(item);
}
});
$scope.gamer = {};
}
}
return result;
};
});
</pre>
</fieldset>
<br />
Expand Down
81 changes: 81 additions & 0 deletions experiments/week5/Experiment1.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">

<title>Starter Node and Angular</title>

<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/style5.css"> <!-- custom styles -->
<!-- JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-route.min.js"></script>

<!-- ANGULAR CUSTOM -->
<script src="js/app1.js"></script>
</head>
<body ng-app="RestCentralApp" ng-controller="parentController" class="container">
<fieldset>
<div>
<!-- HEADER -->
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<a class="navbar-brand" href="#">Rest Central</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#/addApp">Add Application</a></li>
<li><a href="#/login">Login</a></li>
</ul>
</nav>

<!-- ANGULAR DYNAMIC CONTENT -->
<div ng-view></div>

</div>
</fieldset>
<br />
<br />
<fieldset>
<h3>About the experiment</h3>
<div>
The magic of Routing is taken care by a service provider that Angular provides out of the box called $routeProvider. An Angular service is a singleton object created by a service factory. These service factories are functions which, in turn, are created by a service provider. The service providers are constructor functions. When instantiated they must contain a property called $get, which holds the service factory function.

When we use AngularJS’s dependency injection and inject a service object in our Controller, Angular uses $injector to find corresponding service injector. Once it get a hold on service injector, it uses $get method of it to get an instance of service object. Sometime the service provider needs certain info in order to instantiate service object.

In this case, clicking on the links loads the partian wab pages by making internal ajax calls.
</div>
</fieldset>
<br />
<br />
<fieldset>
<h3>Code Snippets</h3>
This line gets the app and injects the route service into it. Thus it can be used to define all the routes for the application.
<pre>
angular.module('RestCentralApp').config(['$routeProvider', function($routeProvider)
</pre>
<br />
<br />
This chunk of code is responsible for routing all requests with addApp to the path provided. Thus it loads the partial internally.
<pre>
$routeProvider.when('/addApp', {
templateUrl: 'views/AddApp.html'
})
</pre>
</fieldset>
<br />
<br />
<fieldset>
<h3>Source Code</h3>
<a href="../../fileview/Default.aspx?~/experiments/week5/Experiment1.html" target="_blank">html</a>
<a href="../../fileview/Default.aspx?~/experiments/week5/js/app1.js" target="_blank">js</a>
</fieldset>
<br />
<br />
<fieldset>
<h3>References</h3>
<a href="http://www.w3schools.com/" target="_blank">W3 Schools</a>
</fieldset>
</body>
</html>
78 changes: 78 additions & 0 deletions experiments/week5/Experiment2.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">

<title>Starter Node and Angular</title>

<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/style5.css"> <!-- custom styles -->
<!-- JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-route.min.js"></script>

<!-- ANGULAR CUSTOM -->
<script src="js/app2.js"></script>
</head>
<body ng-app="RestCentralApp" ng-controller="parentController" class="container">
<fieldset>
<div>
<a href="#" ng-click="logOut()" class="btn btn-danger" style="margin-left: 93.2%;" ng-show="loggedIn">Log Out</a>
<!-- HEADER -->
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<a class="navbar-brand" href="#">Rest Central</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#/addApp">Add Application</a></li>
<li><a href="#/login">Login</a></li>
</ul>
</nav>

<!-- ANGULAR DYNAMIC CONTENT -->
<div ng-view></div>

</div>
</fieldset>
<br />
<br />
<fieldset>
<h3>About the experiment</h3>
<div>
In Angular a service is a function or an object and is used to share data and/or behavior across controllers, directives, filters, other services etc. A service is treated as a singleton, that is there is only one instance of a specific service available during the whole lifetime of the Angular application. This is different from e.g. a controller of which many instances can be created.

In this case, logging in using the credentials "user" and "password" maintains a session for the user and shows the log out button
</div>
</fieldset>
<br />
<br />
<fieldset>
<h3>Code Snippets</h3>
This line creates the service in the scope of the application.
<pre>
angular.module('RestCentralApp').service("RestCentralService", function ($http, $q) {}
</pre>
<br />
<br />
This line injects the serviec into the desired controller for usage
<pre>
app.controller('parentController', function ($scope, RestCentralService, $window)
</pre>
</fieldset>
<br />
<br />
<fieldset>
<h3>Source Code</h3>
<a href="../../fileview/Default.aspx?~/experiments/week5/Experiment2.html" target="_blank">html</a>
<a href="../../fileview/Default.aspx?~/experiments/week5/js/app2.js" target="_blank">js</a>
</fieldset>
<br />
<br />
<fieldset>
<h3>References</h3>
<a href="http://www.w3schools.com/" target="_blank">W3 Schools</a>
</fieldset>
</body>
</html>
81 changes: 81 additions & 0 deletions experiments/week5/Experiment3.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">

<title>Starter Node and Angular</title>

<!-- CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/style5.css"> <!-- custom styles -->
<!-- JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-route.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-cookies.js"></script>

<!-- ANGULAR CUSTOM -->
<script src="js/app3.js"></script>
</head>
<body ng-app="RestCentralApp" ng-controller="parentController" class="container">
<fieldset>
<div>
<a href="#" ng-click="logOut()" class="btn btn-danger" style="margin-left: 93.2%;" ng-show="loggedIn">Log Out</a>
<!-- HEADER -->
<nav class="navbar navbar-inverse">
<div class="navbar-header">
<a class="navbar-brand" href="#">Rest Central</a>
</div>
<ul class="nav navbar-nav">
<li><a href="#/addApp">Add Application</a></li>
<li><a href="#/login">Login</a></li>
</ul>
</nav>

<!-- ANGULAR DYNAMIC CONTENT -->
<div ng-view></div>

</div>
</fieldset>
<br />
<br />
<fieldset>
<h3>About the experiment</h3>
<div>
As an improvement over the normal way of storing user session, $cookieStorage was used. In general the normal js session is wiped out when the broweser is refreshed, but <b>cookie storage ensures persistent session storage in this case.</b>
$cookieStrorage Provides a key-value (string-object) storage, that is backed by session cookies. Objects put or retrieved from this storage are automatically serialized or deserialized by angular's toJson/fromJson.
<br/>
In this case, logging in using the credentials "user" and "password" maintains a session for the user and shows the log out button
</div>
</fieldset>
<br />
<br />
<fieldset>
<h3>Code Snippets</h3>
This line includes the cookies dependency into the module
<pre>
angular.module('RestCentralApp', ['ngRoute', 'ngCookies']);
</pre>
<br />
<br />
These lines show how the user session is stored into cookies and fetched from cookies to ensure consistency even on page refresh.
<pre>
$cookieStore.put('loggedIn', true);
$cookieStore.get('loggedIn');
</pre>
</fieldset>
<br />
<br />
<fieldset>
<h3>Source Code</h3>
<a href="../../fileview/Default.aspx?~/experiments/week5/Experiment3.html" target="_blank">html</a>
<a href="../../fileview/Default.aspx?~/experiments/week5/js/app3.js" target="_blank">js</a>
</fieldset>
<br />
<br />
<fieldset>
<h3>References</h3>
<a href="http://www.w3schools.com/" target="_blank">W3 Schools</a>
</fieldset>
</body>
</html>
Loading

0 comments on commit b18400e

Please sign in to comment.