<!--Keywords:
- Directives, Filters, and Data Binding;
- View, Controller and Scope;
- Modules, Routes and Factories; (modules are containers)
-->
<html ng-app="flapperNews" ng-controller="MainCtrl">
<head>
<!--Webpage titile-->
<title>My Angular App!</title>
<!--Load the angularJS framework-->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
<!--Load the javascript file app.js-->
<script src="app.js"></script>
</head>
<body>
<h3>Test, test, test</h3>
<h2>Test, test, test</h2>
<p>Paragraph one</p>
<p>Paragraph two</p>
<!--empty html form-->
<input type="text" />
<!--New line here-->
<br/>
<!--create a html form with default content-->
<input type="text" value="Please type here">
<br>
<!--create an empty html form, and assign the input to be content-->
<!--exercise of angularJS directives, model-->
<input type="text" ng-model="content" /><article class="single row gutters">
<time class="published" datetime="2015-05-20">20 May 2015</time>
<h2>Head First in the "A" in "MEAN" full JS stack (1)</h2>
<blockquote>
<p>This blog is only used to takes some notes while reading Pawel Kozlowski’s AngularJS book
“Mastering Web Application Development with AngularJS (2013)” and Andrew Grantk’s book “Beginning
AngularJS (2014)”. All contents of this articial
are copies from this two books.</p>
</blockquote>
<h2 id="what-is-angularjs">What is AngularJS?</h2>
<p>AngularJS is a client-side MVC framework written in JavaScript. It runs in a web
browser and greatly helps us (developers) to write modern, single-page, AJAX-style
web applications. It is a general purpose framework, but it shines when used to write
CRUD (Create Read Update Delete) type web applications.</p>
<h2 id="hello-world--the-angularjs-example">Hello World – the AngularJS example</h2>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"</span><span class="nt">></script></span>
<span class="nt"></head></span>
<span class="nt"><body</span> <span class="na">ng-app</span> <span class="na">ng-init=</span><span class="s">"name = 'World'"</span><span class="nt">></span>
<span class="nt"><h1></span>Hello, !<span class="nt"></h1></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<p>In the AngularJS, all the special HTML tags and attributes that the framework can
understand and interpret are referred to as directives.</p>
<h2 id="javascript-primer">JavaScript Primer</h2>
<p><strong>Including Scripts on a Page</strong></p>
<ul>
<li>Referencing an External Script</li>
</ul>
<p>we need some way to tell the web browser that it has to process our JavaScript. To do this,
we use the <code class="highlighter-rouge">script</code> tag.</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><title></span>JavaScript Primer<span class="nt"></title></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="c"><!-- reference the myScript.js script file --></span>
<span class="nt"><script </span><span class="na">src=</span><span class="s">"scripts/myScript.js"</span><span class="nt">></script></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<ul>
<li>Using an Inline Script</li>
</ul>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code><script>console.log("Hello");</script>
</code></pre></div></div>
<p><strong>Function</strong></p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="cp"><!DOCTYPE html></span>
<span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><title></span>JavaScript Primer<span class="nt"></title></span>
<span class="nt"><script></span>
<span class="kd">function</span> <span class="nx">mySimpleFunction</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">"Hello"</span><span class="p">);</span>
<span class="p">}</span> <span class="c1">// self-defined function</span>
<span class="nx">mySimpleFunction</span><span class="p">();</span> <span class="c1">// call the above function</span>
<span class="nt"></script></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<p><strong>Objects</strong></p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><html></span>
<span class="nt"><head></span>
<span class="nt"><title></span>javascript Object<span class="nt"></title></span>
<span class="nt"></head></span>
<span class="nt"><body></span>
<span class="nt"><script></span>
<span class="c1">//there are several ways to create a js object, here is one option</span>
<span class="kd">var</span> <span class="nx">myobject</span><span class="p">{</span>
<span class="nx">name</span> <span class="o">=</span> <span class="s2">"Alice"</span><span class="p">;</span> <span class="c1">// fields</span>
<span class="nx">Gender</span> <span class="o">=</span> <span class="s2">"female"</span><span class="p">;</span>
<span class="nx">age</span> <span class="o">=</span> <span class="s2">"20"</span><span class="p">;</span>
<span class="nl">myInfo</span><span class="p">:</span> <span class="kd">function</span><span class="p">(){</span> <span class="c1">// function with no arguments</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">Gender</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">myobject</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
<span class="nx">myobject</span><span class="p">.</span><span class="nx">myInfo</span><span class="p">();</span> <span class="c1">//use object name to call the method directly.</span>
<span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">info</span> <span class="k">in</span> <span class="nx">myobject</span><span class="p">){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">myobject</span><span class="p">[</span><span class="nx">info</span><span class="p">]);</span> <span class="c1">//Enumerating object fields</span>
<span class="p">}</span>
<span class="nt"></script></span>
<span class="nt"></body></span>
<span class="nt"></html></span>
</code></pre></div></div>
<p><strong>Control flow</strong></p>
<blockquote>
<p>The control flow and condition statement are exactly the same as Java syntax.</p>
</blockquote>
<h2 id="callbacks">Callbacks</h2>
<p>In functional programming, functions are objects that can be passed around just
like any other value in JavaScript.</p>
<p>Here, the “callback function” in this section is diferent from the the “function” section above.</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><script></span>
<span class="kd">var</span> <span class="nx">mycallback</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(){</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'hello.world!'</span><span class="p">);</span>
<span class="p">}</span>
<span class="c1">//use call back function</span>
<span class="kd">function</span> <span class="nx">showme</span><span class="p">(</span><span class="nx">mycallback</span><span class="p">){</span>
<span class="nx">mycallback</span><span class="p">();</span>
<span class="p">}</span>
<span class="nt"></script></span>
</code></pre></div></div>
<p>In the above snippet, we store the nameless function into a variable “mycallback”.
So we could just regard the variable “mycallback” is the “reference” to this nameless
function.</p>
<p>Then we pass the variable (or function reference) to another function directly, and
call the function by reference via “call operator” <code class="highlighter-rouge">( )</code>.</p>
<p>Actually, in real pratice, a common technique is to write the nameless call back function
right there in the method call instead bothering to store it in some variable first, like this:x:</p>
<div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt"><script></span>
<span class="kd">function</span> <span class="nx">showme</span><span class="p">(</span>
<span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'hello.world'</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">);</span>
<span class="nt"></script></span>
</code></pre></div></div>
<h2 id="json">JSON</h2>
<p>JavaScript Object Notation, or JSON, is a lightweight data-interchange format. Essentially, it is way of representing
data in a way that is much more compact than XML yet still relatively human and totally machine-readable. If you
need to send data from place to place, or even store it somewhere, JSON is often a good choice.</p>
</article>
<br/>
<!--Build a button, and display the valuem but there is no response-->
<input type="submit" value="I want to submit now">
<!--An HTML form with two input fields and one submit button, no http response is provided.-->
<form action="XXX.asp" method="get">
First name: <input type="text" name="fname"> <br>
Last name: <input type="text" name="lname"> <br>
<input type="submit" value="Submit it now">
</form>
<!--exercise of angularJS directives, ng-init and ng-repeat-->
<!--ng-repeat usage: <div ng-repeat="(key, value) in myObj"> ... </div> -->
<!--https://docs.angularjs.org/api/ng/directive/ngRepeat-->
<div ng-init="names = ['Tom', 'Alice', 'Bob', 'longsheng']">
<ul>
<li ng-repeat="NAME in names"> </li>
</ul>
</div>
<div ng-init="Gender=['male','female']">
<div ng-repeat="myGender in Gender">
</div>
</div>
<!--Using filte and AngularJs View and Controller-->
<!--This piece of code does not actually work!-->
<div ng-controller="mycontroller">
<br/>
<input type="text" ng-model="name" />
<br/>
<ul>
<li ng-repeat="mycustomer in customers | filter:name| orderBy: 'city' "> - </li>
</ul>
</div>
<script>
function mycontroller($scope) {
$scope.customers = [
{name: 'Tom', city = 'Phoenix'},
{name: 'Alice', city = 'New York'},
{name: 'Bob', city = 'Orlando'}
];
}
</script>
<!--AngularJS module
==============Creating a Module==========
var mymodule = angular.module('mymodule', []); //The empty array is where the so called "dependency injection" comes in
i.e,
var mymodule = angular.module('mymodule', ['helpModule']);
=====Creating a controller in a Module====
var mymodule = angular.module('mymodule', []); // create a module
function mycontroller($scope){
$scope.customers = [
...
];
}
mymodule.controller('mycontroller', mycontroller); // create a controller
===============DEfining Routes===========
var mymodule = angular.module('mymodule', []); // create a module
mymodule.config (function($routeProvider){
$routeProvider
.when('/',
{
controller: 'mycontroller',
templateUrl: 'View1.html'
})
.when('/partial2',
{
})
.otherwise({redirectTo: '/'});
});
-->
</body>
</html>