FII Practic AngularJS - Lesson one

67 %
33 %
Information about FII Practic AngularJS - Lesson one

Published on March 10, 2014

Author: vladzelinschi

Source: slideshare.net

ANGULAR JS the super heroic JS MVW framework

TODAY’S WEB ENVIRONMENT • We are surrounded by a lot of different devices, emphasis on the mobile landscape ! • We are being pushed to create better and faster web apps ! • We love delivering quality products, unified and memorable experiences ! • We code in a very challenging environment, where things change daily, and we must do something to survive and stay on top of the wave ! • “Doing something” often means adopting the best tools for one’s workflow and include in your personal development toolkit modern frameworks and/or libraries that help you produce amazing experiences ! • Angular is one such example, because of its nice features, mature codebase and robustness

ANGULAR IN SHORT • MVW framework ! • It’s not the only one - there are other frameworks as well like Ember, Meteor, or libraries such as Backbone, CanJS, etc. ! • There’s a difference between a library and a framework (the latter offers a clear structure for creating an architecture) ! • Why chose Angular? (short comparison vs the other frameworks/ libraries and list Angular’s features like double-way binding/existence of controllers/directives/services/filters/routing module/etc.) ! • Great for developing SPAs

WHAT IS MVC • Model, View, Controller ! • An architectural decision, a way of organizing your code ! • Separates different pieces of functionality and scales very well

WHY MVC,WHY ANGULAR • When building amazing apps, a lot of code logic transfers to the client side ! • Increase emphasis on the presentation, which increases the amount of JS code ! • We need to keep things organized and structured on the client (jQuery is actually not an option) ! • We need an MVC/MV* client-side framework that can help with the base architecture and provide us with a solid foundation that also scales well or risk dealing with spaghetti code ! • Angular can do all that!

INSTALLING ANGULAR • Option one - directly reference it from Google CDNs ! • Option two - download the file and include it in our index.html ! • Install Angular alongside some other tools that were build with the idea of speeding the client-side workflow (Yeoman - Grunt, Bower, Yo)

INSTALLING ANGULAR - 3 • Install Node - http://nodejs.org/ ! • Install Git - http://git-scm.com/downloads ! • Install Yo (this automatically installs Bower and Grunt CLI) - npm install -g yo (http://yeoman.io/) ! • Install the angular generator - npm install generator-angular —save- dev ! • Generate the project - yo angular ! • Run the server - grunt server

PEEK INTO ANGULAR double way binding (ng-model)

Add a comment