AngularJS 1.x

Small intro to AngularJS - a client-side JS Framework for adding interactivity to HTML

by Julia Dizhak

moneypark

Example using Jquery and Angular

edit

Agenda

  1. Small intro
  2. AngularJS 1.x
    1. Why AngularJS?
    2. MVC, Two way Data Binding, Scope
    3. Expressions, Directives, Modules, Controllers, Filters
  3. Building tools
    1. Gulp
    2. Node.js, npm
    3. Bower
  4. Demo
  5. Few words about reactJS and what is difference between Angular and ReactJS

AngularJS 1.x

AngularJS is a Javascript MVC framework, written entirely in JavaScript.

It was created by Google, they put a lot of attention to build nice/properly architecture and maintainable web applications

Why angular?

AngularJS works with the long-established technologies of the web (HTML, CSS, and JavaScript) to make the development of web apps easier and faster than ever before

MVC

Model View Controller is a software design pattern that separates representation from user interaction. Model consists of application data and functions that interact with it, while the view presents this data to the user; the controller operates between the two.

Directives

Directives could be custom HTML elements and attributes, and class names, as well as comments in AngularJS.

This is a method of creating new HTML elements that they have own custom functionality.

				<html ng-app>

Only one ng-app directive can be used per HTML document

Built-in directives

Docs https://docs.angularjs.org/api/ng/directive

The most common and widely used are

ng-model

With the ng-model directive you can bind the value of an input field to a variable created in AngularJS

https://docs.angularjs.org/api/ng/directive/ngModel

				<input ng-model="name" placeholder="Your name”>
				<h1>Hello {{ name }}</h1>

As soon as we changed the model called name expression in html will be also changed

Edit in Plunker

Two-way Data Binding

Ng-model is a key to a concept named as Two-way data binding

2 way in this context means that if the view changes the value, the model observes the change. And if the model changes the value, the view update with the change.

Expressions

Expressions which allow to insert dynamic values into HTML

				<html ng-app>
				  <body>
				    <div> {{ 4 + 6 }} </div>
				    <div> {{ “Angular” + “JS” }} </div>
				    <div> {{ numberOfRooms() }} </div>
				  </body>
				</html>

Edit in Plunker

Modules and ng-app

In AngularJS, applications are structured in modules

You can define a new module very easily thanks to the function “module’ and then assign inside html template

				var app = angular.module(’myApp’,  [ ] );
				<html ng-app=“myApp">

Controllers

Declaring the ng-controller attribute on a DOM element says that all of the elements inside of it belong to the controller and will be managed

The controller function takes one or more arguments. $scope object is available on the element and the controller

				{{ name }}  - not managed by controller 
				<div ng-controller=‘MyController'>
				  <input ng-model="name" placeholder="Your name">
				  <h1>Hello {{ name }}</h1>
				</div>

Edit

Scope

The $scope object is simply a JavaScript object whose properties are all available to the view and with which the controller can interact.

$scope will be the bridge by which we’ll communicate from the controller to the view.

Custom directives

Directive is a HTML annotations that trigger JS behaviors

Typically HTML only tells you about structure, it doesn’t tell you what you application does.

Directives can also be used for:

How to define directive?

Directives allow you to write better HTML

				<product-title></product-title>
				app.directive('productTitle', function() {
				return {
				  restrict: 'E',
				  templateUrl: 'includes/product_title.html'
				};
				});

Filters

change the way your expressions are displayed

Usage: {{ expression | filter }}

Angular comes with a collection of filters that can change the way your data are displayed https://docs.angularjs.org/api/ng/filter

You can create you own filter

Filter date

https://docs.angularjs.org/api/ng/filter/date

Formats date to a string based on the requested format.

				<span>{{1288323623006 | date:"MM/dd/yyyy 'at' h:mma"}}</span>
				10/29/2010 @ 5:40AM
Edit in Plunker

Filter uppercase / lowercase

https://docs.angularjs.org/api/ng/filter/uppercase

Converts string to uppercase.

				user.name = 'Julia Dizhak';
				<div>{{user.name | uppercase}}</div>
				<div>JULIA DIZHAK</div>

SPA

Single Page Application is a webpage that always keeps you on the same page.

On most websites whenever you click a link, the page reloads.

In a single page application, clicking a link keeps you on the same page, but replaces a part of it with the new content.

Examples are things like Mailing systems where you stay on the same page but it just grabs data from pre-loaded stuff.

Everything you need to build SPA by AngularJS

ngRoute

The ngRoute module helps your application to become a Single Page Application.

If you want to navigate to different pages in your application, but you also want the application to be a SPA, with no page reloading, you can use the ngRoute module.

example

What do we need?

To make your applications ready for routing, you must include the AngularJS Route module:

				<script src="//apis.com/angular/angular-route.js"></script>

Then you must add the ngRoute as a dependency in the application module:

				var app = angular.module("myApp", ["ngRoute”]);

$routeProvider

Now your application has access to the route module, which provides the $routeProvider

Use the $routeProvider to configure different routes in your application:

				app.config(function($routeProvider) {
				$routeProvider
				.when("/", {
				templateUrl : "main.htm"
				})
				.when("/red", {
				templateUrl : "red.htm"
				})
full example

Where does it go?

Your application needs a container to put the content provided by the routing.

This container is the ng-view directive

				<div ng-view> </div>
				<ng-view> </ng-view>
				<div class="ng-view"> </div>

Applications can only have one ng-view directive, and this will be the placeholder for all views provided by the route.

Gulp

Gulp A JavaScript task runner, designed to automate (run) common tasks

What you can do with gulp?

				gulp.task('css-compile', function () {
				return gulp.src('mmp/static/sass/**/*.scss')
				  .pipe(debug({title: ‘unicorn:'}))
				  .pipe(autoprefixer({ browsers: ['last 5 versions', 'IE 9', 'iOS >= 8'] }))
				  .pipe(cleanCss({ compatibility: 'i18'}))
				  .pipe(rename(function (path) { path.basename += ".min”; }))
				  .pipe(gulp.dest(config.paths.css));
				});

Node.js

Node.js a JavaScript runtime environment.

NPM

Node Package Manager is a package manager that allows you to install JavaScript libraries that run on node.js

More technically ...

Node Package Manager is a package manager that allows you to install JavaScript libraries that run on node.js

				npm init . -> create package.json
				npm install gulp (-g) - installs gulp into node_modules or globally

Bower

Bower is a package manager for JavaScript and CSS libraries that run in the browser

Package manager for the front-end

More technically ...

				bower init . -> create bower.json
				bower install jquery --save
				bower install angular --save

Interactive Classes

codeschool.com

Additional resources

Meetup in Zurich

Books