All posts by webammer_anand

What is Angular 2 or Angular 4? High level overview, feature and fundamentals.

By S Sharif In this article, we will see a high-level overview of Angular 2 or Angular 4. Also, we will see some unique features of Angular 2 and Angular 4. These features make it more powerful and…

The post What is Angular 2 or Angular 4? High level overview, feature and fundamentals. appeared first on Technical Diary.

Visit www.technicaldiary.com to read, full article.

Source:: TECHNICALDIARY

Announcing Angular Master Class in Houston

AMC Houston Event Location

While we just returned from Denmark and announced another upcoming Angular Master Class in Berlin, we know that people want us to run our training all around the world.

It’s been a couple of month since we’ve last run our training in the US so we are very pleased to announce that our Angular Master Class is coming to Houston in August!

We’ve found the perfect, artsy venue to get into the right piece of mind to learn Angular in and out.

The event takes place on the 22nd to 25th August 2017 in the Bisong Art Gallery.

The bulk of the training happens on the first three days whereas day four is optional and covers Redux and ngrx. Join us for a couple of days of learning and fun including things like

  • Components and Modules
  • Fetching data using Http
  • Advanced Dependency Injection
  • Basic Forms
  • Observables deep-dive
  • Architectural patterns
  • ContentChildren and ViewChildren
  • Template-driven Forms
  • Reactive Forms
  • Observables deep-dive
  • Children routes and lazy-loading
  • Redux and ngrx

…and many more!

Tickets on sale now

The early bird round of tickets is on sale now. You can save up to 150,00 USD so you’ll better be fast. Seats are very limited with only 5 early bird tickets available!

Come to our training… have a blast and get the best acceleration into Angular possible. You can find more information on our official event page, or grab your ticket right here!

See you in Houston!

Source:: Thoughtram

Node.js Weekly Update - 23 June

By Ferenc Hamori

Node.js Weekly Update - 23 June

Below you can find RisingStack‘s collection of the most important Node.js updates, projects, tutorials & Node related conferences from this week:

Node.js Will Overtake Java Within a Year

Mikeal Rogers has been with the Node.js Foundation since day one. His job as community manager for the foundation involved hands-on oversight of operations, from communications and marketing to conference planning, to running board meetings

Node.js Weekly Update - 23 June

Rogers spoke with The New Stack to talk about his experience getting started in the open source world, working at the Node.js Foundation and becoming an open source governance principals guru.

Building a Node.js App with TypeScript Tutorial

This tutorial teaches how you can build, structure, test and debug a Node.js application written in TypeScript. To do so, we use an example project which you can access anytime later.

Node.js Weekly Update - 23 June

Managing large-scale JavaScript projects can be challenging, as you need to guarantee that the pieces fit together. You can use unit tests, types (which JavaScript does not really have), or the two in combination to solve this issue.

his is where TypeScript comes into the picture. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

Here’s what you need to know about npm 5

I’m sure you’ve heard the news by now, npm5 is here and it’s faster, stabler, and more secure than ever!

Node.js Weekly Update - 23 June

Testing Node.js Applications (Webinar)

The “Testing Node.js Applications” course takes four weeks, with 2-hour webinars (3 in total) and a 1-on-1 session tailored for your special needs.

Node.js Weekly Update - 23 June

This course is for you if

  • you want to learn how to properly test Node.js applications,
  • you want to ship software with fewer bugs,
  • you want to work on features more instead of fixing bugs.

Creating a project generator with Node

By the end of this tutorial, you’ll be able to type $ generate anywhere on your computer, choose which starter project you want to create and what name you’d like to give it, and it will be created for you.

Node.js Weekly Update - 23 June

In this post, I’ll walk you through how to create a simple project generator built with NodeJS that can be installed globally on your computer and used to create a starter project wherever you want, whenever you want.

Enterprise Conversations Episode 13: Node.js and Intel

Monica Ene-Pietrosanu of Intel discusses how Intel uses Node.js, and the company’s efforts in contributing to open source technologies and diversity.

Gathering weak npm credentials

Or how I obtained direct publish access to 13% of npm packages (including popular ones). The estimated number of packages potentially reachable through dependency chains is 52%.

Node.js Weekly Update - 23 June

In this post, I speak about three ways of gathering credentials — bruteforce attack, known accounts leaks from other sources (not npm), and npm credentials leaks on GitHub (and other places).

Upcoming Node.js & JavaScript Events

Source: The Node Foundation Newsletter

Previously in the Node.js Weekly Update

In the previous Node.js Weekly Update we read about two factor authentication with Node.js, Hacker Habits, the latest Node.js Survey, and much more..

We help you to stay up-to-date with Node.js on a daily basis too. Check out our Node.js news page and its Twitter feed!

Source:: risingstack.com

Announcing Angular Master Class in Berlin

AMC Berlin Event Location

We just returned from Denmark after running yet another Angular Master Class with a very diverse group of attendees from a wide range of different countries.

If you haven’t had the chance to join us in Denmark you really missed out on a fun event! However, here are good news: We are bringing our Angular Master Class to Berlin soon!

We are happy to team up with Westernacher Solutions AG to run the training in a really cool atmosphere with lots of room to teach, learn and have fun!

AMC Berlin Event Location

The event takes place on the 18th to 20th September 2017 in one of the most vibrant parts of the city.

We will have three (3) days of fun and learning the ins and outs of Angular including things like

  • Components and Modules
  • Fetching data using Http
  • Advanced Dependency Injection
  • Basic Forms
  • Observables deep-dive
  • Architectural patterns
  • ContentChildren and ViewChildren
  • Redux and ngrx

…and many more!

Tickets on sale now

The early bird round of tickets is on sale now. You can save up to 125,00 € so you’ll better be fast. Seats are very limited with only 5 early bird tickets available!

Come to our training… have a blast and get the best acceleration into Angular possible. You can find more information on our official event page, or grab your ticket right here!

See you in Berlin!

Source:: Thoughtram

Quick Tip: Snippets to Add Styles to Angular v2+ Templates

By Chris Sevilleja

Angular allows for many different ways to add classes to your templates. We’ll explore the different ways including:

  • class property bindings: [class] and [className]
  • style property bindings: [style]
  • The ngClass directive
  • The ngStyle directive

Using Property Bindings

With property bindings, Angular allows us to grab the HTML attributes directly. This way, don’t have to remember any extra directives. We can just use the HTML attributes we already know.

In this example, we’ll be using [class] and [style] with the Angular property bindings [].

Using the class Property Binding

We can call class and the class name that we want to use. Whatever is on the right side of the = will be evaluated to be truthy or falsy. If truthy, Angular will apply the class.

// using class
<div [class.isActive]="myIsActiveVariable"></div>

// using className
<div [className]="'goBlue'"></div>

<div [className]="myClassVariable"></div>

Using the style Property Binding

In addition to binding to class and className, we can bind to style.

// a simple implementation
[style.color]="'blue'"
// in the class
myColor = 'red';
[style.color]="myColor"

// both of the following work
[style.background-color]="myColor"
[style.backgroundColor]="myColor"

Using ngClass

The ngClass Angular directive provides us many different ways we can bind classes to our elements.

The benefit of using ngClass is that it will be easy to bind multiple classes:

<!-- bind 2 classes directly with an array -->
<div [ngClass]="['firstClass', 'secondClass']"></div>

<!-- same result, bind 2 classes as a full string -->
<div [ngClass]="'firstClass secondClass'"></div>

<!-- evaulate each class to see if it should be applied -->
<div [ngClass]="{ firstClass: isFirstActive, secondClass: isSecondActive }"></div>

Using ngStyle

The ngStyle Angular directive allows us to bind styles directly to an element’s style attribute. Instead of adding a class, we can directly apply the style.

<!-- a simple ngstyle usage -->
<div [ngStyle]="{ color: red }"></div>

<div [ngStyle]="{ color: isDanger }"></div>

<!-- when binding to an attribute with a dash, make sure you use single quotes -->
<div [ngStyle]="{ 'background-color': 'blue', 'font-size': '17px' }"></div>

<!-- bind the width as a specific measurement -->
<div [ngStyle]="{ 'width.%': myVariable }"></div>
<div [ngStyle]="{ 'width.px': myVariable }"></div>

Conclusion

Using the above tactics, it’s easy to add styling to your Angular v2+ templates!

Source:: scotch.io

Integrating Monaca with API.AI

By Khemry Khourn

Import the project into Monaca Cloud IDE

In this article, you will learn how to create a conversational app with Monaca Cloud IDE and api.ai. api.ai is a natural language interactions platform created by Google. We will demonstrate how to integrate Google’s api.ai with Monaca Cloud IDE using Angular 1 and Onsen UI v2. The integration is done based on apiai-cordova-client plugin.

The implemented features of this sample application are:

  • text conversation in a predefined languages: English and Japanese
  • voice conversation in a predefined languages: English and Japanese
  • language settings: currently available languages are English and Japanese

Tested Environments: Android 7.0 & iOS 10.1

Getting Started with api.ai

API.AI is a natural language understanding platform that makes it easy for developers (and non-developers) to design and integrate intelligent and sophisticated conversational user interfaces into mobile apps, web applications, devices, and bots.

An API.AI agent represents a conversational interface of the application. An intent determines what kind of user requests should be understood and to what actionable data (JSON response) those requests should be converted.

In this sample application, we created two simple agents:

  • MonacaAI_EN: a conversational interface in English
  • MonacaAI_JA: a conversational interface in Japanese

Each agent has the same number of intents about daily conversation such as food, weather, greeting and so on.

Note: We won’t talk about how to create an agent or an intent in this article. Please refer to the official documentation on how to get started with api.ai.

Step 1: Prerequisite

In order to integrate api.ai with Monaca, Client access token of an agent is required to initialize with apiai-cordova-client plugin.

In order to find the Client access token of an agent, please do as follows:

  1. Go to api.ai console.
  2. Select an agent.
  3. Click on Settings icon (see the screenshot below)

Settings icon

  1. Then, the following page will be shown and you can find the Client access token here.

Client Access Token

Step 2: Importing This Project into Monaca Cloud IDE

Step 3: Understanding the Application

File Tree

In this sample application, there are 3 main files such as:

  • index.html : The startup page consists of HTML, Onsen UI v2 and Angular 1 elements.
  • style.css: This is a stylesheet for the application.
  • app.js: An Angular 1 file containing a service and a controller used in the application.

index.html

This is, of course, the main page of the application, the one loaded by default. As you can see, this application has 3 tabs represented by 3 pages: text.html, voice.html and lang.html. These 3 pages are created using ons-template within index.html file.

Text Converation (English)

In this section, we will explain how each page components are created. Firstly, we start by creating a tabbar component using ons-tabbar. Here is a code snippet of the tabbar containing 3 tabs:

[...]
<ons-tabbar var="myTabbar">
    <ons-tab label="Text" page="text.html" active><ons-icon icon="ion-android-textsms" size="30px"></ons-icon></ons-tab>
    <ons-tab label="Voice" page="voice.html"><ons-icon icon="ion-mic-a" size="30px"></ons-icon></ons-tab>
    <ons-tab label="Settings" page="lang.html"><ons-icon icon="fa-language" size="30px"></ons-icon></ons-tab>
</ons-tabbar>
[...]

Now let’s start creating each required page using ons-template component. The first page is text.html for a text conversation. Here is a code snippet of this page:

[...]
<ons-template id="text.html">
    <ons-page>
        <ons-toolbar>
            <div class="center">Monaca x API.AI</div>
        </ons-toolbar>

        <div class="page">
            <h4>Text Conversation ({{current_lang}})</h4>
            <ons-list>
                <ons-list-item ng-repeat="rowContent in textRows" modifier="nodivider">
                    <ons-row class="question"><span>{{rowContent.question}}</span></ons-row>
                    <ons-row class="answer"><span>{{rowContent.answer}}</span></ons-row>
                </ons-list-item>
            </ons-list>
        </div>
        <div class="stay_bottom">
            <ons-input type="text" ng-model="question" id="text-question" placeholder="Type your question here..."></ons-input>
            <ons-button modifier="quiet" class="float-right" ng-click="sendText(question)"><ons-icon icon="ion-android-send" size="20px"></ons-icon></ons-button>
        </div>    
    </div>    
    </ons-page>
</ons-template>
[...]

Text Conversation (English)

The second page is voice.html for a voice conversation. In this page, a user will start asking a question by tapping on START RECORDING button. Then, the question will be sent and reply will be displayed. Here is a code snippet of this page:

[...]
<ons-template id="voice.html">
    <ons-page>
        <ons-toolbar>
            <div class="center">Monaca x API.AI</div>
        </ons-toolbar>

        <div class="page">
            <h4>Voice Converation ({{current_lang}})</h4>
            <ons-list>
                <ons-list-item ng-repeat="rowContent in voiceRows" modifier="nodivider">
                    <ons-row class="question"><span>{{rowContent.question}}</span></ons-row>
                    <ons-row class="answer"><span>{{rowContent.answer}}</span></ons-row>
                </ons-list-item>
            </ons-list>

            <div class="stay_bottom voice">
                <ons-button ng-click="sendVoice()">{{recordButton}}</ons-button>
                <!--<ons-button ng-click="stop()">Stop Recording</ons-button>-->
            </div>    
        </div>
    </ons-page>
</ons-template>
[...]

Voice Conversation (English)

The last page is lang.html for setting the language of the conversation. In this page, the predefined languages will be displayed. Here is a code snippet of this page:

[...]
<ons-template id="lang.html">
    <ons-page>
        <ons-toolbar>
            <div class="center">Monaca x API.AI</div>
        </ons-toolbar>

        <div class="page">
            <h4>Language Configuration</h4>
            <p style="text-align: left">Selected Language: <b>{{current_lang}}</b></p>

            <ons-list style="text-align: left">
                <ons-list-header>Currently available languages</ons-list-header>
                <ons-list-item ng-repeat="language in languages" ng-click="updateLanguage($index)" tappable>
                    {{language.title}}
                </ons-list-item>
            </ons-list>
        </div>
    </ons-page>
</ons-template>
[...]

Language Setting

style.css

This is a stylesheet file for styling each page of the application. Here is a complete code for it.

body {
    width: 100%;
    height: 100%;
    text-align: center;
}

.list-item{
    padding: 0 !important;
}
.list-item__center{
    padding-right: 0 !important;
}

div.page {
    width: 100%
    text-align: center;
    margin: 0px 10px 60px 10px;
    overflow: scroll;
}

.question {
    display: inline-block;
    float: right;
    float: right;
    margin: 0 0 5px 50px;
    text-align: right;
}

.answer {
    display: inline-block;
    float: left;
    text-align: left;
    margin: 0 50px 5px 0;
}

span {
    display: inline-block;
    padding: 5px;
    border-radius: 5px;
}

.question span {
    border-radius: 5px;
    background-color: #0096ff;
}

.answer span {    
    background-color: #ff7e79;
}

.stay_bottom {
  position: fixed;
  /*z-index: 200;*/
  right: 0;
  bottom: 50px;
  left: 0;
  text-align: left;
  text-align: center;
  border: 1px solid #777;
  border-radius: 3px;
  width: inherit;
  margin: 10px;
}

.voice {
    border: 0;
}

#text-question {
    width: 80%;
    display: inline-block;
    text-align: left;
    padding: 5px;
    float: left;
}

span.input-label {
    display: none;
}

app.js

This is an Angular 1 file containing a factory and a controller used in the application. In this sample application, we created two agents in api.ai representing Japanese and English conversations. The LanguageSettings factory is used to change the language of the conversation. It has the predefined information of the existing agents and a method to config which agent is used in the application. For example, you want to set the default language to English. This factory should be triggered as soon as the page is loaded. When it is called, it will trigger ApiAIPlugin.init() function to initialize the apiai-cordova-client plugin with the selected agent, in this case it is the agent for English conversation. Here is the code snippet of this factory:

app.factory('LanguageSettings', function() {
    var language = {};
    var languages = [
        {
            title: 'English',
            clientAccessToken: '4d723adba6c8403ea4d4c2b5acc34045',
            lang: 'en'
        },
        {
            title: '日本語',
            clientAccessToken: 'af2dc88346fc45fbade8f71a106a9dfb',
            lang: 'ja'
        }
    ];
    language.all_languages = languages;

    language.selectedLanguage = {};

    language.setSelectedLanguage = function(value) {
        this.selectedLanguage = value;        
        try {
            ApiAIPlugin.init(
                {
                    clientAccessToken: value.clientAccessToken,
                    lang: value.lang
                },
                function () {
                    console.log("Init success");

                },
                function (error) {
                    alert("Init errorn" + error);
                });
        } catch (e) {
            alert(e);
        }
    };

    return language;
});

Next, we will talk about the HomeCtrl controller. In this controller, there are 3 main functions such as:

  • sendText(): send the user’s text question to api.ai with the corresponding agent. After successfully receive a response, both question and corresponding answer will be displayed on text.html page.
  • sendVoice(): send the user’s voice question to api.ai with the corresponding agent. After successfully receive a response, both question and corresponding answer will be displayed (as text) on text.html page.
  • updateLanguage(): update the language of the conversation based on the predefined agents.

Here is the code snippet of this controller:

app.controller('HomeCtrl', function($scope, LanguageSettings, $timeout) {
    var language = {};
    $scope.textRows = [];
    $scope.voiceRows = [];
    $scope.recordButton = "Start Recording";

    ons.ready(function() {
        //set default language to English
        language = LanguageSettings;
        language.setSelectedLanguage(language.all_languages[0]);
    });

    $timeout(function(){
        $scope.current_lang = language.selectedLanguage.title;
        $scope.languages = language.all_languages;
    }, 3000);

    $scope.sendText = function(inputText){
        try {
            ApiAIPlugin.requestText(
                {
                    query: inputText
                },
                function (response) {
                    $scope.$apply(function () {
                        var answer = response['result']['fulfillment']['speech'];
                        $scope.textRows.push({
                            question: inputText,
                            answer: answer
                        });
                        $scope.question = "";
                    });
                },
                function (error) {
                    alert(error);
                });
        } catch (e) {
            alert(e);
        }
    }

    $scope.sendVoice = function() {
        console.log("voice");
        try {
            ApiAIPlugin.setListeningStartCallback(function () {
                console.log("listening started");
                $scope.$apply(function () {
                    $scope.recordButton = "Recording now...";
                });
            });
            ApiAIPlugin.requestVoice(
                {}, // empty for simple requests, some optional parameters can be here
                function (response) {                   
                    $scope.$apply(function () {
                        $scope.recordButton = "Start Recording";
                        var question = response['result']['resolvedQuery'];
                        var answer = response['result']['fulfillment']['speech'];
                        $scope.voiceRows.push({
                            question: question,
                            answer: answer
                        });
                    });
                },
                function (error) {
                    ApiAIPlugin.stopListening();
                    console.log("listening stopped");        
                    $scope.$apply(function () {
                        $scope.recordButton = "Start Recording";
                    });
                    alert(error);
                }
            );        
        } catch (e) {
            alert(e);
            ApiAIPlugin.stopListening();
            console.log("listening stopped");
            $scope.$apply(function () {
                $scope.recordButton = "Start Recording";
            });
        }
    }

    $scope.updateLanguage = function(index){
        language.setSelectedLanguage(language.all_languages[index]);
        $scope.current_lang = language.selectedLanguage.title;
        $scope.textRows = [];
        $scope.voiceRows = [];
    }  
});

Conclusion

Now that you understand how to create a conversational app with Monaca using api.ai. Now, you can start testing your app with Monaca Debugger. Then, try to build and install it on your device.

Source:: https://onsen.io/