Notes CodeInstitute Demo

NotesCodeInstituteDemo.md

Introduction to angular.js

Clear ideas about ANGULAR

• structural framework (made by Google)
• extend HTML syntax (template language)
• implementation of MVC design pattern (MVVM)
• allow us to separate out components (pieces) of an app -> controllers, services, directives, constants, filters, templates
• framework (angular) handles the initialization and interaction of these pieces
• Modules

Lesson 27 Introduction to AngularJS

1. Framework Vs Library

• Library (jQuery, underscore, lodash,... ) vs Framework (Angular, Backbone,...)

2. The MVC / MVVM Design Patterns

MVC pattern

• clean separation between: view (UI), controller (intermediary) and model (data)
• separate data management and presentation.

MVVM pattern

Two way binding pattern (VM)

• The view is a projection of the model at all times.
• VM in AngularJS -> $scope object

3. Angular application structure

An angular application consists of

• controllers: interlayer between model (service) and view (template)
• templates: view
• directives: UI components or custom tag attributes
• services: retrieve data from servers (dependency injection to controllers)

Angular application structure (MVVM)

Directory Structure

project root/
        index.html      // entry point for our application
        javascript/
            app.js    // defines our application and configuration
            controller.js // our controllers
            directive.js  // our directives
            service.js    // our services
        templates/
            // our application views or html files
        css/
            // our css files
        vendor/
            // any external libraries we wish to use e.g. bootstrap
            // angular, jquery etc

4. Creating an Angular Application

Most simple app

• Adding angular.js and check the magic (two way binding) of ng-model

https://github.com/juanmaguitar/angular-demo-app/tree/step-1

Application module

An Angular application is made up of modules (Application Module, Controller Module, Service Module, Directive Module)

• Add application module in app.js and add proper references in index.html

https://github.com/juanmaguitar/angular-demo-app/tree/step-2

Controller Module

Add controller module in controller.js, add some controllers in it and add proper references in index.html

https://github.com/juanmaguitar/angular-demo-app/tree/step-3

5. $scope object and built-in directives

Use of $scope

• the $scope object is the ViewModel (is shared by the view and the controller)
• every controller has its own $scope

Add some properties to the controllers in controller.js and show them in index.html

https://github.com/juanmaguitar/angular-demo-app/tree/step-4

ng-controller and ng-model

• ng-controller sets a controller for a piece of html (view)
• ng-model sets a two-way-binding data between the view and the controller

http://jsfiddle.net/lillylangtree/jja3fjt6/1/

Adding methods to the $scope

https://github.com/juanmaguitar/angular-demo-app/tree/step-5

ng-repeat

• ng-repeat sets a controller for a piece of html (view)

https://github.com/juanmaguitar/angular-demo-app/tree/step-6

ng-hide/ ng-show

• will hide or show those elements that fullfill some condition

https://github.com/juanmaguitar/angular-demo-app/tree/step-7

ng-click

• will execute some function defined in the scope when clicking the element

https://github.com/juanmaguitar/angular-demo-app/tree/step-8 https://github.com/juanmaguitar/angular-demo-app/tree/step-9

6. Angular Filters

• filters select a subset of elements displayed w/ ng-repeat
• the 'alias' object (subject in ng-repeat="subject in student.subjects) gets passed to the filter function by default.

https://github.com/juanmaguitar/angular-demo-app/tree/step-10

• we can order the results of the ng-repeat iteration by adding an orderByfilter component

https://github.com/juanmaguitar/angular-demo-app/tree/step-11

More Filter components: https://docs.angularjs.org/api/ng/filter

## Examples

AngularJS_template

VERY BASIC Angular app (routes, controllers, views...)
Repository: https://github.com/xxMShipmanxx/AngularJS_template

simple-app-angular

BASIC Angular app done w/ Google design (Materialize) and backend connection (Firebase) to store data
Repository: https://github.com/thompsonemerson/simple-app-angular
Demo: http://thompsonemerson.github.io/simple-app-angular/#/

order-of-executions

JSFiddle example that shows that the order of executions in angular is:

1. app.config()
2. app.run()
3. directive's compile functions (if they are found in the dom)
4. app.controller()
5. directive's link functions (again, if found)

Explanation: http://stackoverflow.com/a/20664122/1526811
Example: http://jsfiddle.net/ysq3m/

angularjs-starter-app

Very well structured app but a more complexed one
Calls to API in services, CRUD app
Bootstrap, unit tests, E2E tests

Repository: https://github.com/DBProductions/angularjs-starter-app

angular-phonecat

Step by Step build of an app

git checkout step-?

Tutorial: https://docs.angularjs.org/tutorial
Repository: https://github.com/juanmaguitar/angular-phonecat

## Docs

• https://docs.google.com/document/d/1jw8f5Nc75eYotZAiPdKIX-wldaDVKJLcuOU6EyV4SDE/
• https://docs.angularjs.org/tutorial

## Extra info

• https://github.com/jmcunningham/AngularJS-Learning
• https://github.com/johnpapa/angular-styleguide

z__angular-app-structure-mvvm.png

z__angular-app-structure.png

z__MVC.png

z__MVVM.png

z__two-way-binding.png