Tips and Tricks in a world of Mix



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.


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.


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.


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.



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


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



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


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.




Testing definitions :



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


Adding the routing


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



Heroku Demo online


Download Demo at – Github repository with explanations in Readme


Seeder of all levels to work with Node.js Express with MongoDb and Angular2 – each branch different stage. Connecting Angularjs with nodejs

Demo Heroku Deployed

Demo AWS Deployed

Both use as a source for MongoDB database


Download node.js Now we can use npm – node package manager –

First Command Line run to run node.js server

npm run build  

Second Command Line to run the angular client ( views of node for now)

npm start


Download MongoDB And install

To use MongoDB after installation add packages

    Ø npm install --save mongoose
    Ø npm install mongoose-unique-validator   (--this one is for unique fields)

For running MongoDB server for me it worked specificly with –dbpath “e:\data\db” only

cd E:\MongoDB\Server\3.2\bin
E:\MongoDB\Server\3.2\bin>mongod.exe --dbpath "e:\data\db"

More there – Github repository with explanations in Readme




The project based on this course


I’ve created some time ago a local MDF file with a bunch of tables for use. So now I want to get back to it and implement it through the edmx Ado.Net template


After I’ve added the mdf local db file to the App_DATA folder I can now connect it to the automatic created scheme like this –

untitled-picture2I will go through the wizard and choose the objects of tables to recreate at the edmx model

At the end I will have the objects created with C# from DB for me by this automatic process.


Rebuild your solution to make everything checked and ready to go!

I am adding a controller


By description I want the scaffold to build everything for me – including the view representation of my objects.


Choosing the entity to render


After a lot of thinking on his part I am getting new files in the solution folders structure


That’s it.

Modell .edmx 
Modell .Context.cs 
Modell Designer.cs 
Modell .edmx.diagram 
Modell .tt 
A dress.cs 
Events EventDetaiIs.cs 
Users UserDetaiIs.cs 

This slideshow requires JavaScript.

You can downgrade to Django 1.8

pip uninstall django # just for explicity
pip install django==1.8


python runserver


So , people that know me , know that I am no big follower for SharePoint tech. It’s always to slow and buggy.

From today’s review I got a few insights and a summary that will get you started if you’d choose it.

Read the rest of this entry »

AWS getting logs

This slideshow requires JavaScript.


Go to applications – see comething is wrong


See warning or error inside


See details of the warning/error


If not enough – go to logs, set logs per request, get 100 first and download it

Install the Elastic Beanstalk Command Line Interface (EB CLI)

to be sure (if used long time ago )-  upgrading it all over

 pip install --upgrade --user awsebcli

C:\Dev\MyProj>eb –version
EB CLI 3.7.3 (Python 3.5.1)

C:\Dev\MyProj>eb init

Select a default region
1) us-east-1 : US East (N. Virginia)
2) us-west-1 : US West (N. California)
3) us-west-2 : US West (Oregon)
4) eu-west-1 : EU (Ireland)
5) eu-central-1 : EU (Frankfurt)
6) ap-southeast-1 : Asia Pacific (Singapore)
7) ap-southeast-2 : Asia Pacific (Sydney)
8) ap-northeast-1 : Asia Pacific (Tokyo)
9) ap-northeast-2 : Asia Pacific (Seoul)
10) sa-east-1 : South America (Sao Paulo)
11) cn-north-1 : China (Beijing)
(default is 3):
ERROR: AttributeError :: ‘NoneType’ object has no attribute ‘get_frozen_credentials’


C:\Dev\MyProj>aws configure
AWS Access Key ID [None]:…

ERROR: Elastic Beanstalk could not find any platforms. Ensure you have the necessary permissions to access Elastic Beanstalk.

Added my user in AWS to AWSElasticBeanstalkFullAccess

And now getting the applications I have or want to create

Select an application to use
1) kaidanov-angular2-mean
2) [ Create new Application ]
(default is 2):

Deploying to AWS

C:\Dev\angular2-nodejs-udemy-seed-project\01 Seed>eb deploy
Creating application version archive “app-cd57-161205_112803”.
Uploading kaidanov-angular2-mean/ to S3. This may take a while.
Upload Complete.
INFO: Environment update is starting.
INFO: Deploying new version to instance(s).
— Events — (safe to Ctrl+C) Use “eb abort” to cancel the command.

Useful links

EB CLI Command Reference

Install the Elastic Beanstalk Command Line Interface (EB CLI)

Most important are the LOGS – Instance Logs



Tag Cloud

%d bloggers like this: