Samstag, 31. Mai 2014
Montag, 26. Mai 2014
Angular JS - Basics
This post is a summary of CodeSchool Angular.JS Course
Directives:
Directives:
- A Directive is a marker on a HTML tag that tells Angular to run or reference some JavaScript code.
index.html:
StoreController is the name of function to call
Modules:
[ ] is for dependencies - Other libraries we might need.
app is another Directive for auto-loading of an application
Expressions:
<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="StoreController">
. . .
</body>
</html>
app.js:
function StoreController() {
alert('Welcome, Gregg!');
}
StoreController is the name of function to call
Modules:
- Where we write pieces of our Angular application.
- Mahes our code more maintainable, testable and readable.
- Where we define dependencies for our application.
var app = angular.module('store', [ ]);
[ ] is for dependencies - Other libraries we might need.
<html ng-app="store">
app is another Directive for auto-loading of an application
Expressions:
- Allow you to insert dynamic values into your HTML
Exampls:
<p>
I am {{4 + 6}} = <p>I am 10</p>
</p>
<p>
{{"hello" + " you"}} = <p>hello you</p>
</p>Controllers:
- Controllers are where we define our app's behavior by defining functions and values.
(function() {
var app = angular.module('store', [ ]);
app.controller('StoreController', function() {
this.product = gem;
});
var gem = {
name: 'Dodecahedron',
price: 2.95,
description: '. . .'
}
})();
we always use the word controller.
<!doctype html>
<html ng-app="store">
<head>
<meta charset="UTF-8">
<title>Example - example-example94-production</title>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
</head>
<body>
<div ng-controller="StoreController as store">
<h1> {{store.product.name}} </h1>
<h2> ${{store.product.price}} </h2>
<p> {{store.product.description}} </p>
</div>
<script src="angular.min.js"></script>
<script src="app02.js"></script>
</body>
</html>
- We have access to the store controller just inside the div element!
Some useful Directives:
ng-show
<button ng-show="store.product.canPurchase"> Add to Cart </button>
var gem = {
name: 'Dodecahedron',
price: 2.95,
description: '. . .',
canPurchase: false
}
ng-hide:
not ng-show
ng-repeat:
<div ng-repeat="product in store.products">
<h1> {{product.name}} </h1>
<h2> ${{product.price}} </h2>
<p> {{product.description}} </p>
<button ng-show="product.canPurchase"> Add to Cart </button>
</div>
var gem = [
{
name: 'Dodecahedron',
price: 2.95,
description: 'description kommt hier',
canPurchase: true,
},
{
name: 'Pentagonal Gem',
price: 5.95,
description: 'description kommt hier',
canPurchase: true,
}
];
Filters:
Filters the output:
date:
{{'1388123412323' | date:'MM/dd/yyyy @ h:mma'}} = 12/27/2013 @ 12:50AM
uppercase:
{{'octagon gem' | uppercase}} = OCTAGON GEM
limitTo:
{{'My Description' | limitTo:8}} = My Descr
limit an array for first 3 products:
<li ng-reapeat="product in store.products | limitTo:3">
orderBy:
<li ng-reapeat="product in store.products | orderBy: '-price'"|> sorts by descending price. Without '-': ascending order
Allow us to sort our products
ng-source:
A Directive for src in img tags (todo)
ng-click:
When ng-click changes the value of tab, the {{tab}} expression automatically gets updated!
Expressions define a 2-way Data Binding.
<ul class="nav nav-pills">
<li><a href ng-click="tab = 1">Description</a></li>
<li><a href ng-click="tab = 2">Description</a></li>
<li><a href ng-click="tab = 3">Description</a></li>
</ul>
{{tab}}
ng-init:
allows us to evaluate an expression in the current scope. (default value)
ng-class:
<li ng-class="{ active:tab === 3 }"> if tab is 3 the do this ...
Donnerstag, 22. Mai 2014
Access to Google Spread Sheet Node.js
Just have read a nice article about writing and reading Google Spread through node.js, using 'edit-google-spreadsheet'
Mittwoch, 21. Mai 2014
Nice remote pair programming tool:
https://c9.io
This tool gives the possibility to remote pair programming. For now, those, who have a GitHub account, can login with that but for checking in and out in terminal, use following git commands:
- Checking out from GitHub is simple: Just in the first page of c9.io the whole projects in GitHub are shown. Just select and ready.
- If you create a new file, for adding this file in GitHub:
for example you have created css/style.css for adding this in GitHub:
This tool gives the possibility to remote pair programming. For now, those, who have a GitHub account, can login with that but for checking in and out in terminal, use following git commands:
- Checking out from GitHub is simple: Just in the first page of c9.io the whole projects in GitHub are shown. Just select and ready.
- If you create a new file, for adding this file in GitHub:
for example you have created css/style.css for adding this in GitHub:
- git add css/style2.css
- For commiting:
- git commit -am 'some descrition'
- git push origin master
- For seeing status of project:
- git status
- git log
How to access to GPS sensor of a Mobile Device in Cordova-Generated Application?
For this purpose we need a plugin from cordova. This plugin is called Cordova Geolocation Plugin and is described here.
Just with executing the following command in cordova CLI, this plugin will be added and it can be used in mobile applications generated with cordova:
cordova plugin add org.apache.cordova.geolocation
Update: Plugins in cordova must be added for every project
Just with executing the following command in cordova CLI, this plugin will be added and it can be used in mobile applications generated with cordova:
cordova plugin add org.apache.cordova.geolocation
Update: Plugins in cordova must be added for every project
Dienstag, 20. Mai 2014
Cordova Apache
Cordova Apache is a Toooools from Apache, with that we can create/convert Web Application, written with HTML, CSS, JavaScript to a Mobile App.
So the programmer has access to the sources of a mobile like GPS,Camera, ...
As a starter, starting with and installing the cordova was the hardest part so far.
For running just a Hello Welt program, the programmer needs to do/install following tools:
( This list is more Android oriented )
- Node.js
- Java JDK 1.5 or greater
- Apache Ant 1.8.0 or greater
- Android SDK [http://developer.android.com](http://developer.android.com)
So the programmer has access to the sources of a mobile like GPS,Camera, ...
For running just a Hello Welt program, the programmer needs to do/install following tools:
( This list is more Android oriented )
- Node.js
- Java JDK 1.5 or greater
- Apache Ant 1.8.0 or greater
- Android SDK [http://developer.android.com](http://developer.android.com)
- adb driver for your device
* After downloading and unzipping cordova, a readme file for every OS is to find. In this file we can find the requirements for an OS.
Some steps for installing tools:
1 - Installing cordova under node.js
- open node.js cmd,
- npm install cordova
2 - After installing java, ant, android sdk, the very important step is adding path in environment variables:
in user variable:
new Variable: ANT_HOME
path: your ant path ( mine: C:\Program Files\Ant )
new Variable: JAVA_HOME
path: your java path ( mine: C:\Program Files\Java\jdk1.7.0_25 )
and in path:
C:\Program Files\Java\jdk1.7.0_25\bin;D:\Software\Android\adt-bundle-windows-x86_64- 20140321\sdk\platform-tools
in system variables: ( add your path )
C:\Program Files\nodejs\;C:\Program Files\Ant\bin;C:\Program Files\Java\jdk1.7.0_25\bin;D:\Software\Android\adt-bundle-windows-x86_64-20140321\sdk\tools
3 - If your eclips doesn't work properly, maybe you should add the sdk path in eclips as follow:
eclips -> window -> preferences -> Android -> SDK location
mine is as follow:
D:\Software\Android\adt-bundle-windows-x86_64-20140321\sdk
4 - Now you have your cordova installed ( I hope ) here are some links an commands:
- You can use the link underneath to build a "Hello World" Project
5 - Some cordova commands:
- Creating a cordova project: cordova create hello com.example.hello "HelloWorld"
- cd hello
- Making project ready for your OS ( here Android ): cordova platform add android
- Building project: cordova build
6 - Testing:
6- 1 - Eclips: New -> Project -> Android -> From existing project ( load the project)
- Select the project and Run as Android Application
6 - 2 - cordova run android
For running this command you need 'adb devices' to get running. If you can't see any adb device, you need to install your device driver.
* Last Hint:
In every step, if you see an error, stay cool and don't forget asking uncle google!
Abonnieren
Posts (Atom)