Tips and Tricks in a world of Mix

Lecture Summary

Dan Wahlin



Demos :




   With the spa the content is loaded from begging and then only refreshes itself with data on the fly by the demand of the user.

   Spa by yourself is hard to connect all the components



but it’s built in Angular.js rather than using different libraries.

In the Angular framework we have :



Angularjs – directives , filters and data binding


ng-app – directive  <html ng-app>  ( better to write data-ng-app=”” – it’ll be accepted better)

ng-model – <input type=”text” ng-model=”name”>  {{ name }}

property is added to a scope , making an empty viewmodel and filling it with this  property .

{{ name }} – binded data of the model property will be shown on the page


<body data-ng-init=”myList=[‘one’, ‘two’]”> – just primitively initiates some list

<li data-ng-repeat=”instance in myList”> {{instance }}</li> loop through all myList





{{ | uppercase}}










Controller serves the View without knowing anything about the view.






ng-controller =”SimpleController” connects us.

$scope sent in is the one that carries the data inside.


tip- to be explicit with the names of vars and funcs





Each Module has some config to define its route.


            we’ll define view and controller for each route

Factory – will crud data  , not to place in controller  – services , providers , values , resources – access to data

Directives/filters will be placed in View





maybe views are divided by device – mobile or desktop

Module is an object container that can hold of : <html ng-app=”moduleName”>




var demoApp = angular.module(‘demoApp’,[]);

(tips – also through angular can get jqLite functionality , jquery Dom manipulation )

Dependency Injection – your module can rely other module to get some data




It’s like a require.js – it’s automatically include the needed modules .


Controller in AngularJs = ViewModel

So you can connect your module to a controller and wirte the name of the module in the view

with the ng-app tag naming the module .

You can initialize controller with anonymous function




or you can send an initiated controller



or you can create a namespace for all controllers , send it in , and the ng-controller attribute will find it in the list of other controllers by the name (this is good way for prototyping) :





after that you should put the connection to the controller into the html with a data-ng-controller=”SimpleController” attribute.






angular only loads the peaces we want by hash

doesn’t reload the whole shell

script template in the shell set / or partials on server





root:                         .when(‘/’ , ..  {controller: .. , templateUrl:View1.html})

                                 .when (‘partial2’ …



templateUrl – it is better to set a folder for templates



it also handles the history and navigation accordingly




Reuse – Incapsulating code

Get Customers in multiple controllers

Factory – creates object inside the factory and returns it

Service – standard function that uses “this” keyword to define the functions

Provider – $get function that returns the data

Value – getting simple config function. Like  version  and it’s value will be 1.4


*Defined Factory can be injected inside some controller -  provides:

               dependency injection

               centralized place for functionality






Getting data from server by ajax or web sockets

We’ll define the factory/ service/ provider in demoApp

demoApp.factory(‘simpleFactory, function($http){



we can inject the http angular ajax call request and to perform get , post , put , delete type of calls for restfull type of calls.

in factory you can define a function where you return the object  . that can happen by ajax requst where you shall return a promiss and work in async mode


in controller best practice is to init from zero




in controller you can see we’ve sent simpleFactory in .

Than by private function we init the data through the factory.

Custom Directive – animated-view – animation will be activated when you are in the enabled browser.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Tag Cloud

%d bloggers like this: