Posts Tagged AngularJS
In this article we will discuss on the procedures to generate Angular 5 build files from NodeJS. We will also look at Publishing the same files to Deployment folder.
- Make sure NodeJS is installed in your machine
- Install Angular cli using command “npm i -g @angular/cli@latest”
To generate Angular build files in Asp.Net project, we need to create custom build commands and update the .csproj file. I have copied the commands available on .Net core project to generate angular build files.
After adding the below commands, Asp.Net application will generate angular build files in a folder namely “Dist” in root folder of our project.
To add the commands in cs proj file,
- Right click on project file and select Unload Project option
- Right click again on project file and select Edit option
- Add a Target Node and paste the commands inside it.
In above codes first section is to check if node is available on your machine and displays an error message if node is not installed.
Next two commands are important as those are the ones which creates angular build files. Notice the “ng build”, this is an Angular CLI command which compiles the application into an output directory. We set two commands one for Release and another one for Debug configuration.
Additionally, like ng build, we can also use production build command “ng build –prod”.
The Include attribute in _CustomFiles node specifies the folder to find the files for deployment is “dist” All files and folders inside dist folder will be deployed during publish process.
Using Publish to deploy the code in Visual Studio
To deploy the files using Publish option we need to make some additional changes. We need to inform the MsBuild to grab the files from dist folder for deployment. Below commands will perform the same.
Since we are using Asp.Net application project, after build, couple of folders like bin, src will be created. We don’t need these folders for an Angular Project deployment. Hence, we will use below commands to exclude those folders from deployment package.
Next line of code, will cause the “AfterBuild” target to be executed,, when files will be copied for deployment.
This is a continuation of my previous articles in which I demonstrated the procedure to
In this article I will demonstrate how to implement Add new record functionality in Angular UIGrid.
I have used icons from FontAwesome Library, which is a great source for multiple icons. You can download Fontawesome icons from here.
To display message after every operation we used UIBootstrap.
You would already have the Model configured by following my previous article on loading UIGrid with data. We will directly look into the details of Adding new record in UIGrid.
You can see a sample Demo of entire functionality below.
We will add a new button on page which responds to click event and open a modal pop up window. Users can enter the details and on save button click we will save the data to database.
AddCustomer function will take the scope object as input which contains all values as provided by user and then save the data to database. User will also see an alert stating the status of insert operation.
Updated Angular code with Insert new Record functionality
Modal Pop up HTML
WEBAPI AddCustomer Method
You can find complete source code of this demo from github
This is continuation to my previous two articles in which I demonstrated the steps to
In this article I am going to demonstrate how to implement row delete functionality in UIGrid. The series will contain continuation articles to cover the topic in detail.
I have used icons from FontAwesome Library, which is a great source for icons. You can download Fontawesome icons from here.
Also to display message after every operation we used UIBootstrap
You would already have the Model configured by following my previous article on loading UIGrid with data. We will directly look into the details of deleting records in UIGrid.
Sample Demo of Delete functionality is given below
We will update cellTemplate in “Actions” column to add Delete button. We will reuse the editRow flag to hide and display delete buttons. To delete the record,, we call deleteRow function from Delete button
Delete function will take the selected row object as input parameter; we will find the rowindex using input parameter. Using row index we will find CustomerID of selected row and delete the record. Additionally before deleting the record we will ask for user confirmation. Finally we will call the DeleteCustomer method in Factory service to delete the record in database.
Updated Angular code with Delete functionality
Delete Customer Method(WEBAPI)
In this article I will explain the steps for populating UI-Grid in angularjs from database using WebAPI. UI-grid is a powerfull tool which provides a table like representation. Apart from table like structure Ui-Grid also provides functionality like filtering, sorting, exporting etc. You can find more details about UI-Grid from here
Ui-Grid is dependant on AngularJS.Hence ensure that you have added reference of Angular js on page.
To load the data from database, we are using EntityFramework and its related method. In this example I have used the DatabaseFirstApporach. DatabaseFirstApporach lets the EnityData Model to generate classes, dbcontext etc from the database automatically. All other functionalities like database and model sync exists as is.
Follow the below procedures to generate Model for Customer database in Northwind database
- Right click on the Model folder
- Select Add option
- And then select the New Item option
- Choose Data from Installed Templates group
- Select the ADO.NET Entity Data Model option and Provide a name for it
- In the Entity Data Model Wizard, Select EF Designer from database and click on Next
- Choose the Connection string options
- If you already have connection string configured then you can select that from the available list.
- If you don’t have the connection string configured then use the New Connection option and create the connection
- Expand the Table option and then select the tables which you want
- Click on Finish
You will have necessary class files generated in your solution now
You can get more details about how to use DatabaseFirst approach from this link.
In this example we are using WebAPI to load the data. The next procedure is to write code to fetch records from database using WebAPI. For this demo I have used a basic select operation. You can modify this as per your need.
Another point to note here is UI-grid read data which is in Json format, Hence we need to ensure that the data which we return from controller is of Json format. We will use the JsonResult method for this.
On View we will have the codes for UI-Grid and its related files. If you look at the design of UI-Grid it’s a div which will be styled to look like a table at runtime.
We need to add div with an attribute as ui-grid=”gridOptions”. We add all the details from angular js code to gridOptions and UI-Grid at runtime uses this div to populate the grid.
I have changed the Action Name from “Get” to “GetCustomer” to be more specific with what the method do. In order for api to identify the proper method add the below route setting to web api route config
Angular JS Script
Below are the code to fetch the data from database and populate it to UI-Grid. I have used a factory to call the Get Customer method and used that in the main method.
In this article I am going to explain you how to implement the cascading dropdownlist using AngularJs. This is a continuation to my previous article where I have blogged about how to populate the Dropdownlist from AngularJs. Hence I won’t be explaining the first part where we populate the Order Dropdownlist. You can get the details about that from link above.
Here we make use of ng-change event in AngularJs to call the function which in turn populate the CustomerList based on OrderID selected. ng-change event will fire when user changes the input in element and the new values to be committed to model.
AngularJS code to populate the Order and Customer Dropdownlist