Everything You Need To Know About AngularJS

Download Everything You Need To Know About AngularJS

Post on 16-Apr-2017

97 views

Category:

Technology

1 download

Embed Size (px)

TRANSCRIPT

  • Everything You Need To Know About

    By Sina Mirhejazi

  • WHAT IS ? Its not a JavaScript Library. There is no

    function which we can directly call and use. Its not a DOM manipulation library like

    jQuery. But it uses subset of jQuery to manipulation (Called jqLite).

    Focus more on HTML side of web apps. For MVC/MVVM design patterns.

  • PHILOSOPHY Angular is what HTML could have been if it

    had been designed for applications.

    HTML is a great declarative language for static documents. It does not contain much in the way of creating application.

    Building web-applications is an exercise in what do I have to do, so that I trick the browser in to do what I want.

    Thats why we have frameworks - set of utility functions and libraries for DOM manipulation.

    Angular takes another approach.

    Angular teaches the browser new syntax.

  • One way data binding means creating View once and leave Model behind. Whenever we want to change something, we have to change Model and render View again.

    Two way data binding link View and Model together and every changes to each one affect another continuously.

    How?

  • WHERE THINGS START?

    It all starts when you add angular script to your code. THAT SIMPLE!

  • ANGULAR MODULES

    Angular works with modules.

    Module for main App.

    Module for components.

    Muddle for everything.

  • ANGULAR CONTROLLERS

    We use a Controller to provide data for our Views.

    We should not use Controllers to manipulate DOM.

  • DEPENDENCY INJECTION

    DI is a way to tell angular which service needs what.

    There are several ways to do this.

  • SCOPE

    Scope is a link between controller and view.

    We can add properties to our $scope object in controllers and get them on view.

    More on Scopes later.

  • ANGULAR DIRECTIVES

    Directives are out only chance to manipulate DOM.

    Directives can teach HTML new stuff.

    They can be attributes, classes(!), comments(!) and even tag elements!!!

    We seen a couple of them earlier like:

    ng-app

    ng-controller

    ng-repeat

    ng-show

  • ANGULAR DIRECTIVES

    ng-app

    ng-app specify out main module to run the application.

    IT goes on tag.

    ng-controller

    ng-controller link a controller to part of our DOM.

    $scope of controller affect the part of DOM that ng-controller linked to. And Its child of course.

  • ANGULAR DIRECTIVES

    ng-repeat

    ng-repeat iterate between items of a given object/array. Just like forin.

    ng-show/ng-hide

    These twins get an expression and show/hide whether its true or false.

    ng-if

    This one gets an expression and comment/uncomment the element that contains it.

  • ANGULAR DIRECTIVES

    ng-click

    ng-click get an expression(usually a function) and fire that expression in case of click.

    ng-bind

    This one is all awesomeness of AngularJS

    ng-bind replace text content of its tag with a given expression.

    AND change it whenever expression change!

    It has a little brother named {{expression}}

  • ANGULAR EXPRESSIONS

    What is this expression we keep talking about?

    Expression is a snippet of JavaScript code, inside HTML tags and attributes.

    They live inside HTML tags under the shield of {{}} and in attributes.

  • ANGULAR FILTERS

    A filter formats the value of an expression for display to the user.

    There are 5 built-in filters and we can write our own filters.

    Built-in filters are:

    uppercase: Format a string to upper case.

    lowercase: Format a string to lower case.

    currency: Format a number to a currency format.

    orderBy: Orders an array by an expression.

    filter: Select a subset of items from an array.

  • SERVICES, FACTORIES AND PROVIDERS

    Services, Factories and Providers are for providing data to our application.

    They are singletons(unlike controllers that instantiate every time we call them). Which means there is only one instance of specific Factory in whole application. So we can share data between controllers.

    There is a slight difference between them. Providers and be configured before application start(some kind of constructor for whole app called config phase).

    There are two other type of recipe to define data in AngularJS named Value and Constant. Just to mention.

  • FACTORY

  • ROUTING AND TEMPLATES

    AngularJS can handle routes by using ngRoute module.

    We just need to add angular-route script and add ngRoute as a dependency to our app module.

    Also some configuration need to be done.

  • JUST A LITTLE BIT MORE ABOUT SCOPES

  • $BROADCAST, $EMIT, $ON

    AngularJS has a great way to communicate between different scopes.

    A scope can talk to its child through $broadcast.

    It can talk to its parents through $emit.

    And everyone can listen to their family using $on.

  • ANGULAR RESOURCE

    AngularJS needs ngResource module to communicate with server.

    Dont forget to add ngResource to app dependencies

  • AngularJS has some great friends to help him grow.

  • RESOURCES

    AngularJS Documentation: http://docs.angularjs.org

    Some Good Slides:

    Everything you need to know to get started http://goo.gl/sqHKdU

    AngularJS Basics with Example http://goo.gl/Bh6D9K

    Introduction to AngularJS http://goo.gl/524fTR

    Angular Style Guide, John Papa https://goo.gl/ft7Vec

    Dont forget to check Youtube for so many good workshop and tutorials

    http://docs.angularjs.orghttp://goo.gl/Bh6D9Khttp://goo.gl/524fTRhttps://goo.gl/ft7Vec