March Madness - pfft. More Like Angular Madness.

Posted Apr 27, 2017

March is here, and that means spring time (for some of us), as well as some long-lived US traditions, such as March Madness. For those who aren't familiar with March Madness, it's single-elimination basketball tournament held between universities during the month of March each year. The rest of us participate by trying to guess which team will win by filling out tournament brackets (also known as Bracketology - srsly) and wagering money in states where gambling is almost always illegal. March Madness is "fun" because you can't ever predict who is going to win what game. Filling out a tournament bracket is tantamount to picking lottery numbers.

Since most tournament games are played during the day, some agencies have begun to track the amount of worker productivity that is lost during the month of March. In 2015, some estimated it to be nearly 1.9 billion dollars in productivity lost to March Madness.

That's très commas.

March Madness is great, but for those of us who aren't going to be devising creative ways to watch basketball at work while pretending to do actual work, we at Kendo UI are presenting you with a "Month Of Angular" on the Telerik Developer Network.

Month Of Angular

All month during March, the Telerik Developer Network will be publishing articles on how to migrate 1.x concepts to modern Angular. We're calling it a Month Of Angular. These articles were written by some of the top minds in the Angular community and we're going to finish the month off by combining all of these articles into a comprehensive resource that you can come back to at any time to get a definitive set of helpful migration content.

IMG

One of the biggest hurdles that most people have when picking up modern Angular is moving from an Angular 1.x mindset. This is because most people moving to Angular (2+) are coming from an existing Angular background. That's pretty tricky because Angular today is miles different from the Angular 1.x of days gone by. Some of those changes are good, and some are gnarly. Some are logical and some seem like mental gymnastics. As such, some people have a hard time moving to modern Angular and tend to hang out on the latest 1.x branch as long as humanly possible. That's too bad because today's Angular is chocked full of improvements to just about every area of your application.

Goodbye Directives

One of the first and most noticeable changes in Angular is that the concept of directives is drastically reduced. I might have been one of the first to take issue with the convoluted concept of directives in 1.x. It was a massive over-complicated concept that was powerful, but excruciatingly hard to wrap your head around.

Angular is now all component based. That means that instead of creating directives, you spend the majority of your time building components. These components are simple JavaScript classes and markup that is bound to properties and functions on the classes. Each of these components is scoped and isolated from other components including the ability to include and encapsulate it's own CSS. That's really powerful stuff! While directives are still present in Angular, you'll find yourself using them less as the component model provides most of the functionality that you might traditionally turn to directives for.

TypeScript!

I included an exclamation mark (or bang for all you brogrammers out there) because TypeScript is AWESOME. I made awesome in all caps because TypeScript is all-caps awesome. I hyphenated all-caps because that's what the editor suggested I do.

TypeScript is an entirely new experience in JavaScript development. It elegantly brings static language concepts and typing to JavaScript in an unobtrusive and marvelously simple way. TypeScript enables all sorts of wonderful tooling inside of great IDEs such as Visual Studio Code and WebStorm. No more guessing at methods and debugging bad imports. TypeScript helps catch all of these things at design time. This is really important because Angular is very modular in it's setup. There are a lot of libraries and dependencies that make Angular work. Furthermore, it encourage a very modular application setup that will result in quite a few folders and files on your system. This is great for application architecture, but really difficult to keep up with without a language smart enough to help you out.

TypeScript is really like a co-worker who helps you find your mistakes without being a jack hole about it. That should be TypeScript's new marketing tag line. Microsoft - that one was for free.

Performance

One of the oft heard wailings about 1.x is that it was "slow" in larger applications. This is because Angular 1.x watched pretty much everything inside of controllers and templates for changes. The more objects you added, the more it had to watch until eventually it was like trying to clean out the Panda exhibit.

EMBED: https://www.youtube.com/watch?v=K3tNgwQwKK4

Angular is now between 5 and 10 times faster than 1.x. It is built for scale. It does this through a variety of changes, the most noteable being that bindings are now one-way (unless otherwise specified), and Angular is much smarter about how it checks bindings for changes. It takes binding code and literally turns that into native code via just-in-time compilation which results in screaming performance.

You Can Say You Know Angular

If you don't know Angular and you feel like you are the only one, I promise you, you are not. Most people are just like you - confident with 1.x and hesitant about modern Angular. Follow us during the month of March and while we can promise that you will be an Angular 2 expert, we can guarantee that you will not be intimidated by it. It is not nearly as complex as it seems, and honestly, not nearly as different from 1.x when you get into it.

So head over to the Telerik Developer Network and subscribe to our RSS feed. If RSS isn't your thing, you can also follow the official @kendoui account where we'll tweet articles and updates as they come in

Angular Attack is nearly upon us. Now is the time to learn Angular.


How to Generate Awesome Angular Admin (CRUD) Apps with NinjaCodeGen, beta!

Posted Apr 20, 2017

Hello fellow coders!

Are you guys/gals getting ready for the AngularAttack hackathon (Apr 22–23, 2017)?! We try to make it really easy to generate powerful Angular apps (in other words: kick ass kick-starting kick-ass apps and SaaS’s).

*Navigate *to http://ncgalpha.azurewebsites.net (also currently linked from NinjaCodeGen.com).

  1. Choose your schema. You can just leave it using the default sample schema for this tutorial. (Later, you can try to import a schema or edit the definitions JSON text and click “Apply Schema”.)

1 schema

  1. Next, choose your settings. For this tutorial, we’ll keep the default webpack and bootstrap app and default app name. (You can choose the template set which controls the type of application that is generated. And you can also change the app name, which controls the name of the zip/folder created.)

2 settings

  1. Lastly, for source **code, make sure “include base and core” is checked if you want the code to include the base and core files needed to run the app and not just the generated code. Then click “Kick Ass**”! This will give you a zip of the entire working Angular app!

3 source

  1. From here, you need to unzip the files, then run the typical “npm install” and “npm start” or “ng serve”. (you will need node.js (npm) and may need @angular/cli installed)

You should be able to view the app at http://localhost:3002.

we use the terminal inside Visual Studio Code

To see what the app should look like, try http://ncgtestappalpha.azurewebsites.net/.

These apps have filtering, paging, sorting, and input validation, as well as an in-memory database and e2e automated UI testing code. Ideally you will want to customize them further for your needs, but this will give you or your company a huge head-start.

We are currently watching Angular CLI by John Papa on Pluralsight to help try to add a Kendo UI template-set for Angular Attack. So stay tuned for more!

BTW, ever since we upgraded to Angular 4 from Angular 2 during ng-conf, everything now seems blazing fast in comparison!

MCFA Make Coding Fun Again!

Let’s go play with some code!

Chau Nguyen

Founder of NinjaCodeGen (Angular code generator), .NET Architects, Inc., iloveuGIFTS, MakeWorkFun! CTO of Creative Engineering.

NinjaCodeGen

NinjaCodeGen, Angular code generator by Angular and .NET Architects.


Gif Guide: Get Going with Kendo UI

Posted Apr 17, 2017

Using Kendo UI components in your Angular application helps you make a robust application quickly with succinct code. When you're working on a deadline, like during Angular Attack 😉😉, or just a regular stressful deadline, like getting work to a client on time, coding faster is better. Having succinct, easy-to-read code is great when you're working in a team or even just to future YOU. After all, you probably can't even remember what you had for lunch yesterday (me either) 🤷.

Okay, let's get going.

Get Your Environment Ready

It is best to work with the latest stable version of Node & npm.

nvm install stable // to update to the latest stable version

// or if you want to keep your modules

nvm install stable --reinstall-packages-from=6.4.0
npm i npm -g // to update npm

node & npm update

Get Your Project Created

From the directory where you want your project to live, use the Angular CLI to create a new project. First, install the Angular CLI. angular cli install

Then we just need to ask the CLI to create our new project and use the -ng4 flag to make sure we're using version 4 of Angular (like all the cool kids 🤙).

ng new ATTACK -ng4

new angular project

Ahhh, a fresh new project. To make sure everything is hunky dory 🤠, serve up the project and head to http://localhost:4200/ to take a look.

ng serve

Serve it up

In the words of Angular CLI contributor, @Broco, BAM!

a site is born

Get git...ing

Personally, I find that this is the perfect time to create a git repository and push the fresh project up.

cd ATTACK/ // move into your project directory
git init
git remote add origin <your repo\'s url>

Get going with git

Add all the things, then push.

git status // check all the files that need added
git add . // 😱
git commit -m 'initial commit'
git push origin master

I usually stay away from git add . because it can be dangerous but in this case we\'re only sending up the initial files so 👌

git add & push

Now we have a reference point to when all things were good 😇. I'll make a commit to this repo with every new step we take. Just look for the 🐙 to find the links to the new commits.

🐙 initial commit

Get the Progress NPM Registry

Get Access

If you haven't worked with Kendo UI components you will want to setup an account HERE in order to access our registry. All of our component modules are distributed NPM packages that live in our private registry but you just need your Progress Telerik account credentials to access them 👍.

Once you're setup we can login to the Progress registry.

npm login --registry=https://registry.npm.telerik.com/ [email protected]

If you get an error like this your credentials are not correct or you may not have activated your account. Check your email 📧 for an activation link.

Login Error

Once you're all set you should have this lovely 'Logged in...' message to greet you 😍

logged in

Get the Chart Component

To use the Kendo UI components for your Angular project you will take the same steps, no matter which component you use:

  • npm install the component's module
  • import the module & import the component directive in your module.ts file
  • & incorprate it into your template html file

Here we'll look at the chart 📊 component so we can also look at some data binding. You can check out all the available components HERE.

Get the Module

First, you will want to install the module for our chart component and save it to your app's dependencies with the -S flag.

npm i -S @progress/kendo-angular-charts @progress/kendo-angular-intl @progress/kendo-drawing hammerjs

you will see warnings like shown below but they are not detrimental to your project

installing the module

Get the Code in 👩‍💻

Inside your app.module.ts file you want to add the code to import the chart module, import the 'hammerjs' dependency and import the directive into your app module.

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { ChartsModule } from '@progress/kendo-angular-charts';
import 'hammerjs';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ChartsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

add the code

If you're like me and like to be safe rather than sorry, feel free to run ng serve again to make sure your app is golden ☀️.

🐙 install & import commit

Get Styled

In order for your app to look awesome with very minimal effort you can add the Kendo UI default theme. Again, you just need to install in with npm i then include it in your .angular-cli.json file.

npm install -S @progress/kendo-theme-default

install the theme

For the fun part, we get to edit our .angular-cli.json file to include the theme 🎉.

.angular-cli.json

  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "attack"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/@progress/kendo-theme-default/dist/all.css", // 💅
        "styles.css"
      ],
      "scripts": [],
      ...

edit the cli config

🐙 get styled commit

Get Data in There!

In the 'component.ts' file you can change your title and create some data to export.

src/app/app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Winning App';
  private items: any[] = [{
    name: "puppies",
    data: [3, .65, 2, .50]
  },{
    name: "bunnies",
    data: [2, 1, .25, 3]
  },{
    name: "snakes",
    data: [1, .5, 1, .5]
  }];

add data

🐙 get data in there commit

Get a Chart

Now you can add the chart component to your template and bind the data created in the component.ts file. We'll keep the graph simple here because you still get a lot of interactions with just the basic graph but check out the API to see all the ways you can control & customize your chart.

First, the chart components <kendo-chart> and <kendo-chart-series> are added. Then, when you add the <kendo-chart-series-item> you can use *ngFor to loop through your list of items exported from component.ts and bind the items properties to the series item's name and data. For this chart we set the type to area to create an area graph, but there are a lot of options for series or graph types in the Chart component docs!

src/app/app.component.html

<h1>
  {{title}}
</h1>

<kendo-chart>
  <kendo-chart-series>
    <kendo-chart-series-item *ngFor="let item of items"
      type="area" [data]="item.data" [name]="item.name">
    </kendo-chart-series-item>
  </kendo-chart-series>
</kendo-chart>

adding the chart code

Now when you run ng serve you should find a beautiful, interactive chart!

ze chart

Remember, you can always check in with the repo commits to see if your code changes match.

🐙 get a chart commit

That's all you need to get started with Kendo UI components & even put a chart in your app! Good luck with your app 👍 We're rooting for you 🙌

Resources: - Components Home Page - Charts Docs - Charts API - Angular CLI Repo


Want to win the Angular Attack Hackathon? Progress Kendo UI can help you!

Posted Apr 5, 2017

I remember the 2014 Telerik Hackathon like it was yesterday. A couple of my teammates on the Kendo UI engineering team and I joined the event as technical assistants to help the participants with their setup. It was an eye-opening experience to watch firsthand how users interact, struggle and succeed with our product. We took many notes on how we might improve Kendo UI :).

The room was a sea of failed Cordova deployments and muffled cursing. However, during the chaos, one team drew my attention. While the rest of the participants struggled with their setup, this team was happily churning through the screens of their app!

Watching the cool app being built on top of our products in front of me was amazing. Little did I know that the team (in fact, the winning one) was actually a company that had plenty of prior experience with Kendo UI.

The Progress Kendo UI team will be pleased to award thousands of dollars to winning teams in the six categories of Angular Attack. You'll qualify for these prizes by using Kendo UI in your final submission. Naturally, there is a small learning curve for every product or framework you use and we want you to be in the best position to succeed. We've compiled the information below to help you on your way to winning the big prizes!

Kendo UI is one of the most extensive jQuery UI component toolkits out there, which includes basic building blocks like form elements, tabs, buttons, essential data management stuff like grids and lists, data visualization widgets, and some advanced stuff like Gantt charts and Excel-like spreadsheets. I might have missed something, but the full list is here.

Kendo UI for Angular is aimed at porting the features of the jQuery suite into a native Angular (Angular 2 and beyond) format. The essentials are already available, so you should have plenty of boost to add to your project. If you decide on using one of the popular front-end frameworks like Bootstrap, there is a lot of additional value in Kendo UI. Kendo UI for Angular integrates beautifully with Bootstrap 4. It's easy to make good looking data-driven UI like forms and CRUD-like views.

Choosing and bringing the right toolbox to the challenge is a huge advantage on its own - you will save on your most scarce resource, your time. There are a few things that you can do beforehand to make sure you stay as efficient as possible with each hour available.

  1. Explore the Kendo UI docs and find the features you plan on using. Bookmark and save the relevant items for the hackathon.

  2. Each Kendo UI Angular component has an extensive set of examples that showcase how to accomplish a certain task (take a look at the editable grid or the form integration of the file upload, for example). You can open each code snippet in Plunkr and tweak it further, so that it matches the scenario you plan on doing. Optionally, you can save the set of plunks so that you have them at a convenient place for the main event.

  3. Make sure you have a Telerik Account. Accounts are free and they are important to download the trial version of Kendo UI. The trial will be active for 30 days, giving you plenty of time to experiment with the framework, get comfortable with the components and compete in the Angular Attack hackathon. It is totally fine to complete and submit your hackathon project using the trial version. To install the Kendo UI Angular components in your project, you will need credentials for our private NPM registry. Going through the getting started section, which includes the account registration is simple and should take just a few minutes. Do this before the clock starts so you have maximum time during the hackathon period.

Warning: The Angular Attack Rules clearly state that you should not use code that has been written upfront. Make sure that you focus your preparation on accumulating knowledge in your short-term memory ;).

To wrap up, playing to win is very important. Give yourself the best chance to learn the tools ahead of time. Learning a cool new tool might turn you into the star of the team and make you look like you pulled an all-nighter for something you only spent a couple of hours implementing. Plus, it will improve your chance to win some big prizes!


What's your attack strategy?

Posted Mar 17, 2017

Whether it's for a competition like Angular Attack, where you're competing team versus team, or in the open market, where your customers vote with the mighty dollar, every app you build will be judged. Standing out from competition and rising above the sea of mundane apps means you need something extra to make your application win over the rest.

So what's your plan of attack? Strategy is important here, so let's review some ideas that can help you win and win big!

Before we begin, remember using Kendo UI for Angular in your application submission will help you win extra $$$. The free trial version of Kendo UI qualifies, no purchase necessary.

Gamification

Engaging the user in a world full of apps begging for your users attention can be tough. One sure fire way to keep your users from swiping your app into trash heap is to reward them for milestones and track their progress.

This strategy works great with fitness apps, social media, and even banking. Setting goals for you user will vary from one type of application to another, but make setting goals and tracking their progress straight forward and easy. Give the user plenty of visual feedback, charts and check points. These are a great way to display the users goals.

Using charts and graphs with Angular is easy thanks to Kendo UI for Angular. Kendo UI for Angular Charts are a set of Angular components for building common chart types for many different series types. Simply bind data and add events to make your charts interactive.

Analyze complex data

Empower your users to tackle a complex problem with data. This strategy works great with apps that track clean energy usage, medical research, and finance. Modern applications collect or utilize large data sets and giving users the right tools to access the data can be challenging. However, there are solutions using Kendo UI for Angular that can elevate your app above the rest with the Grid and Data Query components.

The Kendo UI for Angular Grid component is a world class data grid with rich features like sorting, templates, grouping and aggregation. Enabling users to visualize data with aggregates for grouped data is a powerful combination of features that makes sense of data at a glance.

If you need the raw data crunching power in your application, take advantage of the powerful and efficient Kendo UI Data Query package. Data Query is the heart and soul of the Kendo UI Grid, and you can take full advantage of its sorting, filtering, grouping, and aggregate data operations for your app.

Scale up with AI

Until very recently, artificial Intelligence (AI) was science fiction. Today it's a different story, where AI is woven into every application we touch. This strategy is excellent for apps in the accessibility and security space. Computer Vision apps are capable of image moderation, detecting emotion, optical character recognition (OCR), and even providing picture-based authentication.

Prove that your app is next generation by mashing up leading-edge technologies. Combine Computer Vision from Microsoft Cognitive Services and manage image uploads with Kendo UI for Angular's Upload component. The Kendo UI Upload component is the ideal file upload management component for Angular.

Think Globally

Don't limit your app by ignoring a world wide audience, instead think globally with localization and internationalization. This strategy is ideal for any app that utilizes Kendo UI for Angular. By using Kendo UI you're already set up for successfully supporting multiple languages/cultures. Translation and internationalization APIs are baked right into Kendo UI, it's there when you need it, right out-of-the-box.

Go Interactive

Take a different approach to your UI by adding drag and drop functionality to your components with the Kendo UI Sortable component. This strategy is great for consumer apps that should be intuitive and engaging.

The Sortable component makes the elements within a list sortable through the drag-and-drop functionality. Be creative with the Sortable by going beyond the appearance of a list to make unique UI experiences such as: building toppings on a pizza, adding items to a cart, or customizing features on a vehicle. When you combine the Sortable with custom CSS you're only limited by your imagination.

X-Platability

Build it once with Angular and deploy to not just the web, but also native iOS and Android as well. This strategy is perfect if your app belongs in the app store, or has a mobile companion app.

With NativeScript you can build truly native mobile apps with JavaScript, TypeScript and/or Angular and even share code between web, iOS and Android applications. This is possible thanks to Angular's powerful templating engine and NativeScript's focus on building native mobile apps using web technologies.

Also, if the winning app in the Team category includes a NativeScript mobile app, (visible on the web with an Appetize.io free account), we’ll award $5,000! It’s 100% free and open source. You can go through the NativeScript Angular tutorial to get a feel for how it works or watch the video below to see code sharing in action.

Make Big Money

If your Attack strategy is to make big money by winning Angular Attack, then mixing and matching the strategies above are your best bet. Progress, the company behind Kendo UI for Angular and NativeScript, is offering up extra winnings when you use Kendo UI or NativeScript to win Angular Attack.

If you use Kendo UI (the trial version is totally fine) in your application submission, you are competing for:

$2,000 - Team Winner / best overall score $2,000 - Solo Winner / best overall score for team of 1 $2,000 - Innovation Winner / best score for category of "Innovation" $2,000 - Design Winner / best score for category of "Design" $2,000 - Utility/Fun Winner / best score for category of "Utility/Fun" $2,000 - Popularity Winner / team with the most votes

If the winning app in the Team category includes a NativeScript mobile app, (visible on the web with an Appetize.io free account), we’ll award $5,000!

Hopefully you find inspiration in these ideas to plan your ultimate strategy for Angular Attack and beyond.


Kendo UI - Win some big prizes with Angular Attack!

Posted Mar 17, 2017

The Kendo UI for Angular team is thrilled to sponsor the largest online Angular hackathon in the world. We literally jumped at the chance to help make the 2017 event the biggest one yet!

Kendo UI is the most complete UI library for HTML, JavaScript and Angular development. Our framework-specific UI components for your next jQuery or Angular project give you the polish, performance and refinement to create apps your users will love.

To celebrate the upcoming release of Kendo UI for Angular, we are offering great prizes for each Angular Attack category. If you use Kendo UI (the trial version is totally fine) in your application submission, you are competing for:

  • $2,000 - Team Winner / best overall score
  • $2,000 - Solo Winner / best overall score for team of 1
  • $2,000 - Innovation Winner / best score for category of "Innovation"
  • $2,000 - Design Winner / best score for category of "Design"
  • $2,000 - Utility/Fun Winner / best score for category of "Utility/Fun"
  • $2,000 - Popularity Winner / team with the most votes

Plus, each winner (or member of winning team) gets a perpetual Kendo UI Professional license ($999 value) containing:

  • Kendo UI for Angular
    • 22 components written from the ground up for Angular 2 and beyond

Plus

  • Kendo UI for jQuery
    • 70+ HTML5 UI components and 15 themes
    • Support for AngularJS 1.*
    • Spreadsheet
    • Priority Support

Also, if the winning app in the Team category includes a NativeScript mobile app, (visible on the web with an Appetize.io free account), we’ll award $5,000! If you haven’t heard, NativeScript is the way to build truly native mobile apps with JavaScript, TypeScript or Angular. It’s 100% free and open source. You can go through the NativeScript Angular tutorial to get a feel for how it works.

We’ll be posting some information in the coming weeks to help you prepare for the competition. You’ll see some articles from us to help you get ideas of how you could use Kendo UI in your application.

We’ll put together an article with lots of Kendo UI and Angular related resources so you can be ultra-productive during the hackathon time. Also, we’ll send you detailed setup instructions so you can get your trial copy of Kendo UI for Angular installed and ready for use. You’ll be able to use the trial for 30 days, so no worries about it expiring mid-way through your project :)

Good luck with your Angular Attack project -we can’t wait to award these prizes to the best Angular Attack project teams!