practical course: web development angular js – part i · concept of angular • 2-way data...

PracticalCourse:WebDevelopment

AngularJS– PartIWinterSemester2016/17

JulianeFranze

Ludwig-Maximilians-UniversitätMünchen PracticalCourseWebDevelopmentWS16/17- 01- 1

Today’sAgenda

• WhatisAngular?– Origin– Architecture– BestPractices

• ...Inbetween…Handson1st AngularApp


Angularis..• AJavaScriptFramework

– Built for SinglePageapplication (SPA)

– For big scale applications– Distributedas aJS-File– Frontendpart of MEANStack

• Created by– Miško Hevery (former Google

Employee)– Started in2007– V1.0released in2009– V2.0announced in2014

- finalsince September2016

• Used by


https://www.madewithangular.com

Concept of Angular

• 2-waydata binding• Eases data handling by tight coupling between input and values• Automatic synchroniziation of models and views• Taken from OOlanguages to JSworld

• Dirty Checking• Checksfor changes inmodel and updates view

• Decouple DOMManipulationfrom application logic• Safeboiler plate code• Increase testability and performance

• Dependency injection• Bringstraditionalserver-side services to client

• Scopes• Glues data between view and controller

• Followseveral DesignPatterns• Singleton• MVC• MVVM


Advantages

• OpenSourceframework• Maintained by Googleand abig community• TheCode:

– Angularanalyses the DOMdirectly– Builds bindings based onangularattributes or elements– Less boilerplate code thanks to 2-waydata binding– Therefore code is cleaner,easier to understand,less error prone– Extendedfeatures: dependency injection,deep-routing,build infilter– Good ErrorFeedbackfrom Angularviabrowser console


Disadvantages

• Angularis big– Multipleways to doone thing– Hardto tell which way is the best for aparticular task– Differentpeople take differentcoding styles– Might complicate group codingà try to stickwith one!

• Blackboxes– You don‘t know at the beginning how angularworks internally– Once your application grows and your skills improve it is likely that you

change used approaches– If you reach more than 3.000watchers your app willlagin

responsivness– ThirdPartymodules might be programmed sloppy


Structure of anapplication


Settingup anAngularProject

1. Createindex.html– Contain placeholder for view elements– Addfirst dummy data /structure

2. Createfolder structure– 2ways possible semantic or syntactic– Justamatterover easier understanding and maintenance

3. Include Angular&AddModules– Decide onstructure– Createafolder hierarchy

4. Createbi-directional data binding– Add$scope


Let‘s get started!


You should have

• Node– https://nodejs.org/en/– Check:node –v

• Bowerfor FrontendLibraries– npm install –g bower


CreateAngularvianpm inWebstorm

• File|NewProject– select „AngularJS“– name project– Thisis askeleton only– Needfor installing components

• OpenTerminal– Install npm locally

• npm install• à bower willbe installed with it• à angularwillbe installed as well

– Seeif angularworks...

– Install Bootstrapcss locally• bower install bootstrap-css-only• Addcss linksto index.html

– Updateallpackages locally• bower update


2.CreateFolderStructure

• Startwith:– Theflattest structure that makes sense– Designfor what you know sofar– Thisdoes notparalyze to make the wrong choice– You can adjust as needed

• CreateONEfeature perfile– Each controller,service,factory,view has its own file

• 2options– Structure and name Folderby type(css,images,controllers)– Structure and name Folderby content (dashboard,loginpage,...)


StructurePerTypeApp/

app.module.jsapp.config.jsapp.routes.jsdirectives.jscontrollers/

topnav.jscontent.jsdashboard.js

views/tovnap.htmlcontent.htmldashboard.html

factories/localstorage.jsrest-requests.js

PerContentApp/

app.module.jsapp.config.jsapp.routes.jsdirectives.jstopnav/

tovnap.htmltopnav.controller.js

dashboard/content.htmldashboard.htmlcontent.controller.jsdashboard.controller.js

misc/localstorage.factory.jsrest-requests.factory.js


LIFTGuidelines

L Locating your code is easy• Findthe code you fastwant is superimportant

I Identify code at aglance• When you look at afile you should know what it contains• No files with multiplecontrollers of even mixed code

F Flatstructure as long as you can• Tryto make the way as short ar possible (no 7levels)

T Try(!)to stay DRY(Don‘t repeat yourself)• Important butnotcrucial• Tryto findagood way for you to avoid redundantinformation butkeepthe code readable


2.Naming Conventions

• Namemodules as precise as possible!• CONSISTENCYwithin aproject and ateam is important

àprovides efficiency and more maintainablecode• Writeconventions downor at leasttalk about it &remind

yourself and your team mates– Dashvs.camelCase– Germanvs.English– Abbreviationvs.Full words– Dots for seperation of category of features vs.Nothing like that


2.Naming Convention

• InAngularthere are 2names for most assets:1. Thefile name:2. Theasset name with Angular

• Themain module is always named:app.js• Allother dependents are named what they represent:

– Admin.module.js– Admin.controller.js


AngularModules

• EveryAngularApplication has at leastONEModule– File:App.js– Startmodule:ng-app

• Additionally there are– Ng-conroller– Ng-model– Ng-view– Filter– Services– Directives


Structure +Modules

AddModule• Addnew file:controller.js• Addscript-Tagfor controller.js into index.html• Fill controller.js with life

• Addattribute to html


Structure

Controller

• AJSconstructor function• Used to augment the AngularScope• When controller attached:

– Angularinstatiates anew Controllerobject– Anew child scope is created

• Any object assigned to the scope become model properties– Any methods can be invoked viaangularexpression „ng“

• Should notdotoo much• Keepthem slim

– Encapsulate work that does notbelong to controllers into services– Use these services incontrollers viadependency injection

$scope

• Concept of $scope is crucial inAngular• $scope is asimpleJSobject• Available for view and controller• Allows to exchange information• Inherit from their parent scopes – allup until root scope• RootScope is visible inentire application• Donotuse rootScope for communication among scopes

$scopes


UI-router

• Install UIrouter inWebstorm– Bowerinstall angular-ui-router

• Addscript tagto index• Createnew ui-viewinhtml• Addlinkswith ui-sref directive• AddTemplates(html)that willplug into the ui-view• Createconfig &set up states

à Advantageof UI-Router– views can be nested!


MEANStack

• helpsinthecreationofacompleteJavaScriptwebapps• 2options

– http://mean.io– https://meanjs.org/

• Differences:https://medium.com/@chrisbateson80/mean-js-vs-mean-io-723123051d14#.aqa0p32l7

• Challenges:– DependencyProblems– onlytestedonnode0.10extensively

Mean.io

1. Install mean-clipackage &modules– npm install <module>[options]– npm install –g mean-cli bower gulp

2. Init– mean init myFirstApp– àClones mean –repo from github– Followthe instructions given interminal

3. Install npm inproject folder– go into project folder– npm install

Learn more..

• W3CSchoolintro:http://www.w3schools.com/angular/

• Codeaproject:https://docs.angularjs.org/tutorial

• Concepts and Techniques:http://fdietz.github.io/recipes-with-angular-js/index.html

• Helpfor Webstorm– https://www.jetbrains.com/help/webstorm/2016.3/how-

to.html• Checkoutcode from other websites built with Angular

– e.g.https://www2.sixt.jobs/de/en/#


Nextweek...

• Moreabout $scopes• Startwith nesting controllers• Extend controllers• Informationexchange among controllers• Own filters• Answer your questions that you may sent me viaslac (until

Thursday 5pmCET)


practical course: web development angular js – part i · concept of angular • 2-way data...

Documents