everything you need to know about angularjs
TRANSCRIPT
Everything You Need To Know About
By Sina Mirhejazi
WHAT IS ?➤ It’s not a JavaScript Library. There is no
function which we can directly call and use. ➤ It’s 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 <html> 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 It’s child of course.
ANGULAR DIRECTIVES
➤ ng-repeat
➤ ng-repeat iterate between items of a given object/array. Just like for…in.
➤ ng-show/ng-hide
➤ These twins get an expression and show/hide whether it’s 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 it’s 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
➤ Don’t forget to check Youtube for so many good workshop and tutorials