1. Open Visual Studio 2013
2. New project select empty web application with 4.5 framrwork.
3. Select MVC and also check webapi.
4. Now make changes in web config file add url. Under app setings add new key called 'baseURL' with value.
5. Next open webconfig file from viewd folder and add 2 handlers(System.web.StaticFileHandler)
6.Add angularjs files
7. Make changes in the Routeconfig
8. Make changesin the bundleconfig
9.Under views create 2 folder
9.1 Login
- Login.html
9.2 Customer
-ManageCustomer.html
-CustomerDetails.html
10. Under main solution add 2 folder
10.1 CustomerLib
-CustomerApp.js
-CustomerService.js
-CustomerCtrl.js
10.2 WebApi
CustomerWebApi
11. Then add entity model
12. In the CustomerWebApi file write functions to perform CRUD operations
13. In the CustomerService.js file write functions to perform CRUD operations
14. In the view--> shared -->_layout file add string baseURL. And add angular and customerapp bundle.
15. Remove all content from Home-->Index file and div with ng-view directive.
15 In the CustomerApp.js write angular module and config function.
16. In the controller CustomerCtrl.js write function.
17. In the ManageCustomer.html display list of customers with edit/delete/add
18. In the CustomerDetails.html add controls to add/edit customer details.
Some of the important angular function
-
angular.isUndefined(value);
// To get all the customers
this.GetAll=function()
{
var def = $q.defer();
var route = "api/Customer/GetAllCustomers";
$http.get(route)
.success(function (data)
{
def.resolve(data);
})
.error(function (error)
{
def.reject("error GetAll()");
});
return def.promise;
}
// to get customer by id
this.Get = function (customerID) {
var def = $q.defer();
var route = "api/Customer/GetCustomer?ID="+customerID;
$http.get(route)
.success(function (data) {
def.resolve(data);
})
.error(function (error) {
def.reject("error Get()");
});
return def.promise;
}
// To add new customer
this.Add = function (customer) {
var def = $q.defer();
var route = "api/Customer/AddCustomer";
$http.post(route,customer)
.success(function (data) {
def.resolve("success");
})
.error(function (error) {
def.reject("error Add()");
});
return def.promise;
}
//App Config function
angular.module("Customer", ['ngRoute'])
.config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider)
{
$locationProvider.html5Mode(true);
var baseURL = $("base").attr("href");
$routeProvider.when("/", {
templateUrl: baseURL + "/Views/Login/Login.html",
controller:"loginCustomerCtrl"
})
$routeProvider.when("/manageCustomer", {
templateUrl: baseURL + "/Views/Customer/ManageCustomer.html",
controller: "manageCustomerCtrl"
})
$routeProvider.when("/newCustomer", {
templateUrl: baseURL + "/Views/Customer/AddEditCustomer.html",
controller: "addEditCustomerCtrl"
})
$routeProvider.when("/editCustomer/:ID", {
templateUrl: baseURL + "/Views/Customer/AddEditCustomer.html",
controller: "addEditCustomerCtrl"
})
$routeProvider.otherwise({
redirectTo: baseURL + "/Views/Customer/ManageCustomer.html"
})
}
])
//Date Field
<input type="date" id="exampleInput" name="input" ng-model="example.value"
placeholder="yyyy-MM-dd" min="2013-01-01" max="2013-12-31" required />
//date field validation
<div role="alert">
<span class="error" ng-show="myForm.input.$error.required">
Required!</span>
<span class="error" ng-show="myForm.input.$error.date">
Not a valid date!</span>
</div>
//Check if form data is valid
in view:
<form name="formName" ng-submit="submitForm(formName.$valid)">
<!-- fields -->
</form>
in controller:
$scope.submitForm = function(formValid){
if(formValid) {
// Code here if valid
}
};
