Tips and Tricks in a world of Mix

Posts tagged ‘Angular.js’

Get scope from element

// Access whole scope
angular.element(myDomElement).scope();

// Access and change variable in scope
angular.element(myDomElement).scope().myVar = 5;
angular.element(myDomElement).scope().myArray.push(newItem);

// Update page to reflect changed variables
angular.element(myDomElement).scope().$apply();

Or if you’re using jQuery, this does the same thing…

$('#elementId').scope();
$('#elementId').scope().$apply();

Another easy way to access a DOM element from the console (as jm mentioned) is to click on it in the ‘elements’ tab, and it automatically gets stored as $0.

angular.element($0).scope();
Advertisements

AngularJS Fundamentals in 60-ish Minutes

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

Tag Cloud

%d bloggers like this: