10 Angular and TypeScript Projects to Take You From Zero to Hero

There are a lot of great samples and posts out there to help get you started with Angular (version 2 or higher) as well as ES6/ES2015 and TypeScript. However, some are out of date, some may be more complex than you want to start with, and others have been abandoned and are no longer maintained. In this post I’m going to provide a list of 10 Angular/TypeScript projects that I’ve created that can take you from “Zero to Hero” if you like to explore project code and are interested in investing the time to learn.

Full Article on Code With DAN : https://blog.codewithdan.com/2017/02/08/10-angular-and-typescript-projects-to-take-you-from-zero-to-hero/

Hope this will help 🙂

StackBlitz — Online VS Code IDE for Angular & React

StackBlitz is an online IDE where you can create Angular & React projects that are immediately online & shareable via link… in just one click. It automatically takes care of installing dependencies, compiling, bundling, and hot reloading as you type.

StackBlitz feels & functions exactly like your local DEV environment.

Start using it and provide your feedback to team who created this online IDE for us 🙂

Reference: https://medium.com/@ericsimons/stackblitz-online-vs-code-ide-for-angular-react-7d09348497f4

 

SQL Server LocalDB 2014 Connection String

I always face issues for LocalDB connection string when download GitHub code developed using SQL Express 2012 – LocalDB.

I assumed that I could just update my connection string from v11.0 to v12.0 but it seems that Microsoft have changed the naming scheme for this version. Now the automatic instance is named MSSQLLocalDB.

So, For SQL Server 2012 LocalDB, I had this connection string:

<connectionStrings>
  <add name="DefaultConnection"
   connectionString="Data Source=(LocalDb)\v11.0;AttachDbFilename=|DataDirectory|\Test.mdf;Initial Catalog=Test;Integrated Security=True"
providerName="System.Data.SqlClient" />
</connectionStrings>

For SQL Server 2014 LocalDB the connection string should be:

<connectionStrings>
 <add name="DefaultConnection"
  connectionString="Data Source=(LocalDb)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\Test.mdf;Initial Catalog=Test;Integrated Security=True"
providerName="System.Data.SqlClient" />
</connectionStrings>

You also need to update, Entity Framework default connection factory setting in web.config file where v11.0 should be v12.0 for SQL Server 2014 LocalDB.


<defaultConnectionFactory type="System.Data.Entity.Infrastructure.LocalDbConnectionFactory, EntityFramework">
  <parameters>
    <parameter value="v12.0" />
  </parameters>
</defaultConnectionFactory> 

Hope this will help 🙂

AngularJS CRUD Using ASP.NET MVC5 – Add Toaster Notifications

In Previous article we learn how to add form data validations for CREATE and UPDATE Operation. In this article, we will learn how to add toaster notifications in our application.

You can download code for previous article from GitHub and start adding code for toaster notification.

So Let us start coding ??

Step-1: Download “toaster.css“, “toaster.js” and “angular-animate.min.js

Note: we need to also update angular.js version to AngularJS v1.5.6, because latest version v1.6.4 is not working with toaster.js and we need to downgrade to make toaster works with angularJS.

Now all set. dependencies are set in the project.

Step-2: Bundle this JS and CSS files in our project

Open “App_Start –> BundleConfig.cs” file and update the angular bundle


bundles.Add(new ScriptBundle("~/bundles/angular").Include(
                       "~/Scripts/angular.js",
                       "~/Scripts/angular-animate.min.js",
                       "~/Scripts/toaster.js"));

Similarly css bundle:


bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/site.css",
                      "~/Content/toaster.css"));

Step-3: Include the ‘ngAnimate‘ and ‘toaster‘ module in your AngularJS app

Open “AngularJSApp\Employee\Module.js” file and add module like

myapp = angular.module('my-employees', ['toaster', 'ngAnimate', 'ui.bootstrap.showErrors']);

Note: ngAnimate module require if you want animations during toaster notification.

Step-4: Add ‘toaster-container‘ directive in Index.cshtml

By default, toasts have a timeout setting of 5000, meaning that they are removed after 5000 milliseconds. If the timeout is set to 0, the toast will be considered “sticky” and will not automatically dismiss. The timeout can be configured at three different levels:

Globally in the config for all toast types:

<toaster-container toaster-options="{'time-out': 1000}">
</toaster-container>

Per info-class type: By passing the time-out configuration as an object instead of a number, you can specify the global behavior an info-class type should have.

<toaster-container
toaster-options="{'time-out':{ 'toast-success': 2000, 'toast-error': 0 } }">
</toaster-container>

We will add following toaster-options for our toasts to display.

<toaster-container
toaster-options="{'close-button':true, 'time-out':{ 'toast-success': 2000, 'toast-error': 0 } }">
</toaster-container>

Success toasts will fade out after 2 seconds and error toasts will be sticky, until you close it. we also used close-button property which will show close button for all our toasts, so user can manually close our error toasts using close button.

Step-5: Usage of toaster in ng-controller

Let us update our JavaScript alert messages for success and failure for ‘employee-controller‘ in “AngularJSApp –> Employee –> Controller.js” by adding toaster notifications.

First, inject toaster module in our controller:

myapp.controller('employee-controller',
function ($scope, employeeService, toaster)

Then, you can use it any where in our controller.

For Success :

toaster.success({ title: "Success", body: "Employee added successfully" });

For error :

toaster.error("Error", "Error occured while loading employee data");

Similarly, you can update all other javascript alerts will toaster notifications for UPDATE and DELETE methods.

Step-6: Run the application.

Click on Add Employee Button. Provide input values in each fields and save the data.

Success-Added

You can see that it will give smooth effective notifications for success and it will fade out after 2 seconds.

Kool 🙂 Isn’t it?

Update Employee

Success-Updated

Delete Employee

Success-Deleted

Code for this article is available on GitHub: https://github.com/sandy060583/AngularJSUsingMVC5-Part4

For more details on toaster, please refer this article: https://github.com/jirikavi/AngularJS-Toaster

That’s all for this article.

Please feel free to provide your feedback and comments.

AngularJS CRUD Using ASP.NET MVC5 – Data Validations during CREATE and UPDATE Operation

In Previous article we learn how to CREATE, UPDATE and DELETE Employee data using AngularJS. In this article, we will learn how AngularJS and Bootstrap help us to effectively do form validation.

You can download code for previous article from GitHub and start adding code for form data validation.

So Let us start coding ??

We will use custom directive created by “Paul Yoder” to do Form Validation. It is effective and has all the functionality we are looking for.

You can use any other directive available for form validation as per your need.

Step-1: Download showErrors.js from GitHub

Source Path: https://raw.githubusercontent.com/paulyoder/angular-bootstrap-show-errors/master/src/showErrors.min.js

Add this JS file in our project “Scripts” folder.

Step-2: Add Script Reference on Page

We need to add reference of “showErrors.min.js” JavaScript file on “Views –> Home –> Index.cshtml” page’s script section.

@section scripts{
<script src="~/AngularJSApp/Employee/Module.js"></script>
<script src="~/Scripts/showErrors.min.js"></script>
<script src="~/AngularJSApp/Employee/Service.js"></script>
<script src="~/AngularJSApp/Employee/Controller.js"></script>
}

Order of JS file is important here. Make sure you add it after Module.JS and Before Controller.JS file where this directive will be used for form validation purpose.

Step-3: Include the “ui.bootstrap.showErrors” module in your Angular app

Open “AngularJSApp\Employee\Module.js” file and add this module:

myapp = angular.module('my-employees', ['ui.bootstrap.showErrors']);

Step-4: Add the “show-errors” attribute on the div element that contains the “form-group” class

Open “Index.cshtml” page and add angular validation for our directives as per below for “AddNewForm” and “UpdateEmployeeForm“. we only need to change form-group divs where our input controls are placed.

If you only want to show valid values on specific inputs, then you can pass in the { showSuccess: true } option.

<div class="form-group" show-errors="{ showSuccess: true }">
  <label class="control-label"> Employee Name</label>
  <input class="form-control" name="EmpName" ng-model="EmpName" type="text"
placeholder="Employee Name" ng-required="true" /></div>

Similarly, other form-control will be updated for “AddNewForm” form:

<form class="form-horizontal" name="AddNewForm">
<div class="form-group">
   <input class="form-control" readonly="readonly" name="EmpNo"
ng-model="EmpNo" type="hidden" placeholder="Employee Number" /></div>
<div class="form-group" show-errors="{ showSuccess: true }">
    <label class="control-label"> Employee Name</label>
    <input class="form-control" name="EmpName" ng-model="EmpName"
type="text" placeholder="Employee Name" ng-required="true" /></div>
<div class="form-group" show-errors="{ showSuccess: true }">
  <label class="control-label"> Email</label>
  <input class="form-control" name="Email" ng-model="Email" type="email"
placeholder="Email" ng-required="true" /></div>
<div class="form-group" show-errors="{ showSuccess: true }">
   <label class="control-label"> Department Name</label>
   <input class="form-control" name="DeptName" ng-model="DeptName"
type="text" placeholder="Dept Name" ng-required="true" /></div>
<div class="form-group" show-errors="{ showSuccess: true }">
   <label class="control-label"> Designation</label>
   <input class="form-control" name="Designation" ng-model="Designation"
type="text" placeholder="Designation" ng-required="true" /></div>
</form>

Submit button should not contain data-dismiss=”modal” attributes. Remove it to make modal popup open even after Submit click in case any data is invalid.

Similarly, other form-control will be updated for “UpdateEmployeeForm” form:

<form class="form-horizontal" name="UpdateEmployeeForm">
<div class="form-group">
   <input class="form-control" readonly="readonly" name="EmpNo"
ng-model="UpdateEmpNo" type="hidden" placeholder="Employee Number" /></div>
<div class="form-group" show-errors="{ showSuccess: true }">
   <label class="text-info"> Employee Name</label>
  <input class="form-control" name="EmpName" ng-model="UpdateEmpName"
type="text" placeholder="Employee Name" ng-required="true" /></div>
<div class="form-group" show-errors="{ showSuccess: true }">
     <label class="text-info"> Email</label>
     <input class="form-control" name="Email" ng-model="UpdateEmail"
type="email" placeholder="Email" ng-required="true" /></div>
<div class="form-group" show-errors="{ showSuccess: true }">
   <label class="text-info"> Department Name</label>
   <input class="form-control" name="DeptName" ng-model="UpdateDeptName"
type="text" placeholder="Dept Name" ng-required="true"/></div>
<div class="form-group" show-errors="{ showSuccess: true }">
   <label class="text-info"> Designation</label>
   <input class="form-control" name="Designation"
ng-model="UpdateDesignation" type="text" placeholder="Designation"
ng-required="true" /></div>
</form>

Step-5: Force Validity Check on form elements

By default this directive doesn’t check the validity until the user tabs off the input element. However, there are times you want to show invalid form elements even if the user has not tabbed off. To force the validity check, broadcast the show-errors-check-validity event.

Open “AngularJSApp\Employee\Controller.js” file.

In $scope.save() method, we need to broadcast this event and if form is valid then only proceed for saving data else show error message and restrict user to save invalid data.


$scope.save = function () {

  $scope.$broadcast('show-errors-check-validity');
  if ($scope.AddNewForm.$invalid)
  {
   return;
  }

  ....
  ....
}

Similarly, for $scope.update() method:


$scope.update = function () {

  $scope.$broadcast('show-errors-check-validity');

  if ($scope.UpdateEmployeeForm.$invalid)
  {
     return;
  }
 ....
 ....
}

Step-6: Reset form elements

You can broadcast the ‘show-errors-reset‘ event to remove any errors on the form elements.

we have two reset methods ($scope.resetUpdate() method and $scope.resetSave()) where will add this event.


$scope.$broadcast('show-errors-reset');

Note: There are also other useful validation attributes are available with this directive (showErrors.js), you can go to GitHub reference page and explore/use them as per your requirements.

Step-7: Run the application.

Click on Add Employee Button. Provide input values in each fields and check required field validation and email validation is working or not by keeping them empty and giving incorrect values in text-box.

add-form-validation

You can see that it will give smooth effective data validation where color of textbox fields are changing to Green or Red as per validation pass or fail.

Kool 🙂 Isn’t it?

Similarly, try Update Employee

update-form-validation

I hope this will help you in your project for doing effective data validation by minimum efforts.

For more details on AngularJS form Validation, please refer this article: https://scotch.io/tutorials/angularjs-form-validation

Code for this article is available on GitHub: https://github.com/sandy060583/AngularJSUsingMVC5-Part3

Custom Directive Used: https://github.com/paulyoder/angular-bootstrap-show-errors

That’s all for this article. In next article we will integrate “toaster” notifications in our code. Till than stay tuned 🙂

Please feel free to provide your feedback and comments.