Tips and Tricks in a world of Mix

Lecture Summary

http://weblogs.asp.net/dwahlin/archive/2013/04/12/video-tutorial-angularjs-fundamentals-in-60-ish-minutes.aspx

Dan Wahlin

@danwahlin

http://weblogs.asp.net/dwahlin 

 

Demos :

http://tinyurl.com/angularjsdemos

 

http://angularjs.org/

 

image

 

   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

image

 

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

In the Angular framework we have :

image

 

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

 

Filters

 

 

{{cust.name | uppercase}}

 

 

 

MVVM

 

image

 

 

 

Controller serves the View without knowing anything about the view.

 

image

 

 

 

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.

Routing

            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

 

image

 

 

maybe views are divided by device – mobile or desktop

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

 

image

 

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

 

image

 

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

 

image

 

or you can send an initiated controller

image

 

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) :

 

image

 

 

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

 

Routes

 

/view1

/view2

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

 

 

demoApp.config(function($routeProvider){

               $routeProvider

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

                                 .when (‘partial2’ …

                               

 

templateUrl – it is better to set a folder for templates

 

image

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

 

              

image

 

 

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

 

image

 

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.

image

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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: