AngularJS Tutorial for Designers
Although Misko Hevery, creator of AngularJS mentioned that the goal of AngularJS is “to enable web-designers (non-programmers) to build simple app like websites” in various interviews, but the current homepage and documents of AngularJS seems to written only for developers and make designers not only hard to understand but also can’t get interested in it.
With this alternative tutorial, I will show what web designer cares about and demonstrate what AngularJS can help designers on writing an interaction website, with only very basic JavaScript knowledge is required.
If you can understand the following code, you are good to go.
foo = true
foo = !foo
foo = { 'bar': false }
bar = fooSetup
So lets get started. To setup AngularJS to work is quite simple. Use <script> tag to link to angular.js and add an ng-app attribute to <html>. The ng-app attribute, also named “directive” in AngularJS, will bootstrap the html document compile to an AngularJS app.
<!doctype html>
<html ng-app>
<head>
<script src="angular.js"></script>
</head>
<body>
I can add: 1 + 2 = {{ 1+2 }}
</body>
</html>AngularJS will process expressions between the double curly brace notation {{ }}.
I can add: 1 + 2 = 3If the ng-app directive were not placed on the html element then the document would not be compiled and the {{ 1+2 }} would not be resolved to 3.
ng-show
The first directive your will love is ng-show. With ng-show you can set an expectation on when a element will show or not.
<!doctype html>
<html ng-app>
<head><script src="angular.js"></script></head>
<body>
<p ng-show="true">This paragraph is visible.</p>
<p ng-show="false">This paragraph is hidden.</p>
</body>
</html>The code is quite straight forward. The paragraph that has ng-show=“true” will show, the one has ng-show=“false” will not.
This paragraph is visible.ng-click
It is useless with only ng-show, so you need ng-click to add interactions. Add ng-click directive to the element (mostly a button) you want to add interaction. The value of ng-click will “execute” when the element is clicked.
<!doctype html>
<html ng-app>
<head><script src="angular.js"></script></head>
<body ng-init="count=0">
<button ng-click="count = count + 1">Click Me</button>
count: {{ count }}
</body>
</html>The value of count will increase by 1 each time the button is clicked. And the initial value 0 of count is set by ng-init.
ng-click + ng-show
Combine ng-click and ng-show, you can now start to do a lot of interactions.
For example, a toggle button.
<!doctype html>
<html ng-app>
<head><script src="angular.js"></script></head>
<body>
<button ng-click="display = !display">Toggle</button>
<p ng-show="display">Toggle Me!</p>
</body>
</html>When the button is clicked, the value of display will change between true and false, and the paragraph will show and hide depend on the value of display.
Or, control a slide manually.
<!doctype html>
<html ng-app>
<head><script src="angular.js"></script></head>
<body ng-init="index=0">
<p>
<a href="#" ng-click=" index=1 ">001</a>
<a href="#" ng-click=" index=2 ">002</a>
<a href="#" ng-click=" index=3 ">003</a>
<a href="#" ng-click=" index=4 ">004</a>
</p>
<div ng-show=" index==1 "><img src="image1.jpg" /></div>
<div ng-show=" index==2 "><img src="image2.jpg" /></div>
<div ng-show=" index==3 "><img src="image3.jpg" /></div>
<div ng-show=" index==4 "><img src="image4.jpg" /></div>
</body>
</html>And there is more interactions you can create with ng-click and ng-show.
ng-class
Other then show and hide elements, you will also want elements’ style response to interactions. You can use ng-class to dynamically set CSS classes on an HTML element. You have to give ng-class a map of class names to boolean values, like this:
ng-class="{'strike': foo, 'bold': bar}"If the value (foo / bar) is truthy (true, number other then 0, text thats not empty) , the key (strike, bold) will be added as css classes to the element.
For example:
<!doctype html>
<html ng-app>
<head><script src="angular.js"></script></head>
<body>
<p ng-class="{'strike': true, 'bold': false, 'red': 1, 'i': 0}">
Map Syntax Example
</p>
</body>
</html>The above code will render as:
<p class="strike red">Map Syntax Example</p>However, it’s not practical to use static value in ng-class, see the real world use case in next section.
ng-click + ng-class
With ng-class and ng-click, you can create a button that can be “pressed”. (styled with bootstrap.css)
<!doctype html>
<html ng-app>
<head><script src="angular.js"></script></head>
<body> <a class="btn btn-primary"
ng-click="show=!show"
ng-class="{'active': show}">
Click Me
</a>
</body>
</html>
Or create a tab set. (styled with bootstrap.css)
<!doctype html>
<html ng-app>
<head><script src="angular.js"></script></head>
<body> <ul class="nav nav-tabs">
<li ng-class="{active: i==1}" ng-click="i=1">
<a href="#">Home</a>
</li>
<li ng-class="{active: i==2}" ng-click="i=2">
<a href="#">Profile</a>
</li>
<li ng-class="{active: i==3}" ng-click="i=3">
<a href="#">Messages</a>
</li>
</ul>
</body>
</html>
Thats it! We just covered only three directives: ng-click, ng-show, ng-class. But now you can start design interactions with AngularJS. Pretty easy, huh?
If you want to learn more, currently there is no site such as AngularJS for Designer like jQuery has jQuery for Designer. But some video tutorial might help.
Go a head and check them out, and good luck!
