Tips and Tricks in a world of Mix

Archive for the ‘Angular.js’ Category

Init type instance in Typescript 2.1 automatically – loved it !

So simple and elegant :

Found in this post

 

Typescript 2.1 introduces Mapped Types and provides Partial<T>, which allows you to do this….

class Person {
    public name: string = "default"
    public address: string = "default"
    public age: number = 0;

    public constructor(init?:Partial<Person>) {
        Object.assign(this, init);
    }
}

let persons = [
    new Person(),
    new Person({}),
    new Person({name:"John"}),
    new Person({address:"Earth"}),    
    new Person({age:20, address:"Earth", name:"John"}),
];
 
Advertisements

Angular 1 – usage of components

ang1_1.png

 

Working with components allow us to use the life cycle hooks .

Enables separating instantiating and initialization to build a model steps.

Instantiating not interact with services for instance.

 

 

So now we can use the $onInit hook to get the data using the $http service after separating the controller logic to a private function.

ang1_2.png

We divide the logic from the controller and just use the function of fetching the movies by usage of $http.

 

Pay attention –

import the annotation of dependencies to the controller definition of the component using array.

initialize the movies as empty array at the controller.- thus , nullifying the previous values. 

 

Now at the template we can create a relevant table with some actions buttons.

ang1_3.png

Using emmet plugin we are creating the bootstrap pattern for table with buttons using the glyphicons to up vote and down vote the movies.

 

Now we add the logic of up and down voting to the controller.

ang1_4.png

We are setting conditions to be more than 1 and less than 5. Simple logic to be improved if needed.

 

In component we always build an element with isolated scope. It is less dynamic then building the directives but it is a best practice and does answer 95% of scenarios needed for business app.

ang1_5.png

 

If we want to change our rating to component we can create it separately (instead of directive as we would do it in the past).

SO we create the files for it – component and html for it.

We’ll add the glyphicons to show the stars at the html of the component of the ratings

ang1_6.png

We’ll create a transclude content for the stars with astrix , this way if none defined from external source the astrix will be shown.

ang1_7.png

 

and inside the component we will define the transclude as true to enable the injection of the glyphicons into the component.

ang1_9.png

the binding “<” says that we will get the data from external source from outside world.

controllerAs changes the $ctrl to model name using isolated scope.

the transclude = true says that if no data will be entered from outside we will use inner data to init the visuals.

 

ang1_8.png

 

Testing definitions :

 

ang1_10.png

So now we create the karma test using the controller initialization to movieList and use it to initialize the controller getting back the controller from the component

ang1_11.png

Adding the routing

ang1_12.png

Adding ngRoute to the module and creating extra component and adding the routingang1_13.png

 

 

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();

Tag Cloud

%d bloggers like this: