Tips and Tricks in a world of Mix

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

 

 

Heroku Demo online

msgBoard.png

Download Demo at – Github repository with explanations in Readme

angular2_nodejs_connection

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 mlab.com as a source for MongoDB database

Node.js

Download node.js https://nodejs.org/en/download/ Now we can use npm – node package manager –http://blog.npmjs.org/post/85484771375/how-to-install-npm

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

MongoDB

Download MongoDB https://www.mongodb.com/download-center?jmp=nav#community 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

 

 

P.S.

The project based on this course

https://www.udemy.com/angular-2-and-nodejs-the-practical-guide

 

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

untitled-picture1

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.

untitled-picture3

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

I am adding a controller

untitled-picture4

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

untitled-picture5

Choosing the entity to render

untitled-picture6

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

untitled-picture7

That’s it.

Modell .edmx 
Modell Context.tt 
Modell .Context.cs 
Modell Designer.cs 
Modell .edmx.diagram 
Modell .tt 
A dress.cs 
Event.cs 
Events EventDetaiIs.cs 
EventType.cs 
LocationDetaiI.cs 
Modell 
Place.cs 
PlaceForm.cs 
PlaceScope.cs 
SocialNetwork.cs 
sysdiagram.cs 
User.cs 
UserFriend.cs 
Users UserDetaiIs.cs 
Users_UserSecurity.cs 
WorkDetaiI.cs

This slideshow requires JavaScript.

You can downgrade to Django 1.8

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

then

python manage.py runserver

logo_final_kai.gif

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.

1

Go to applications – see comething is wrong

2

See warning or error inside

3

See details of the warning/error

4

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’

AWSCredentials

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/app-cd57-161205_112803.zip 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: