Sitecore, Asp.Net,C#, SQL Server

Posts

Showing posts with the label Angular JS Tutorials

How to use controller in AngularJS

This is the parent controller/viewmodel for 'productModule' and its $scope is accesible down controllers set by the routing engine. This controller is bound to the Product.cshtml in the Home view-folder. productModule.controller("rootViewModel", function ($scope, productService, $http, $q, $routeParams, $window, $location, viewModelHelper) { $scope.viewModelHelper = viewModelHelper; $scope.productService = productService; $scope.flags = { shownFromList: false }; var initialize = function () { $scope.pageHeading = "Product Section"; } $scope.productList = function () { viewModelHelper.navigateTo('product/list'); } $scope.showProduct = function () { if (productService.productId != 0) { $scope.flags.shownFromList = false; viewModelHelper.navigateTo('product/show/' + productService.productId); } } initialize(); });

How to use Routeprovider Service in AngularJS

This is the best way to use route provider in angularJS. Route provider service called the url to get data form back end and using this with specified controller name. var productModule = angular.module('product', ['common']) .config(function ($routeProvider, $locationProvider) { $routeProvider.when('/product', { templateUrl: '/App/Product/Views/ProductHomeView.html', controller: 'productHomeViewModel' }); $routeProvider.when('/product/list', { templateUrl: '/App/Product/Views/ProductListView.html', controller: 'productListViewModel' }); $routeProvider.when('/product/show/:productId', { templateUrl: '/App/Product/Views/ProductView.html', controller: 'productViewModel' }); $routeProvider.otherwise({ redirectTo: '/product' }); $locationProvider.html5Mode(true); }); productModule.factory('productService', function ($rootScope, $http, ...

AngularJS Best Practice

Best Practice to write AngularJS Program code. This is very useful code to communicate with webApi or other any any services. You may learn here more about different services. var commonModule = angular.module('common', ['ngRoute']); var mainModule = angular.module('main', ['common']); commonModule.factory('viewModelHelper', function ($http, $q, $window, $location) { return MyApp.viewModelHelper($http, $q, $window, $location); }); commonModule.factory('validator', function () { return valJs.validator(); }); mainModule.controller("indexViewModel", function ($scope, $http, $q, $routeParams, $window, $location, viewModelHelper) { var self = this; $scope.sessionName = "ASP.NET MVC with Angular JS"; $scope.speakerName = "Shashi Keshar"; }); (function (myApp) { var viewModelHelper = function ($http, $q, $window, $location) { var self = this; self.modelIsValid = true...

AngularJS best practice with WebAPI and MVC

Angular-Js with MVC + Web API Pagination + Sorting with Angular JS You may also check : Insert,delete,update,select using angularjs with mvc Here in this tutorial, we will try to show, How to create ASP.Net MVC project using Angular JS, Create Database in Sql Server and Create WebApi. I wil going to describe in proper way to Binding the Data in Angular Grid. Here, I am using Entity framework 5.0 . Step 1:- Create ASP.Net MVC Project with VS2013 1. Open your VS IDE 2013 2. Go to file menu and select New 3. Click on create Project 4. Asp.Net Web Application Select MVC template, Click on Add button, Give name as DemoApp. Now you...

How to use filter in angularjs

See the some below syntax which help you to organise how to use filter. Filters in angular JS You may also check : Insert,delete,update,select using angularjs with mvc <table> <tr data-ng-repeat=”employee in employees”> <td>{{employee.name|uppercase}}</td> <td>{{employee.dateOfBirth|date:”dd/MM/yyyy”}}</td> <td>{{employee.gender|lowercase}}</td> <td>{{employee.salary|number:2}}</td> <td>{{employee.salary|currency:$:2}}</td> < /tr> </table>

Angularjs best practice tutorial with proper syntax

You may also check : Insert,delete,update,select using angularjs with mvc 1: {{{Name:"shashi", Mobile:"9540108013", City: “Delhi"}.Name}} Result=> shashi 2: {{['Surendra','Prabhat','Vinay'][1]}} Result=> Prabhat 3: {{1==1}} Result=> true 4: {{1==2}} Result=> false 5: var myApp=angular.module("myModule",[]) //Create The Module var myController=function($scope) { // Create The Controller $scope.message="Angular JS Tutorial"; }; myApp.controller("myController",myController); // Register The Controller With The //Module 6: var myApp=angular.module("myModule",[]) //Create The Module myApp.controller("myController",function($scope) { ...

Fileupload using AngularJS in asp.net c#

Fileupload using AngularJS in asp.net c# AngularJS built-in ng-model directive. I added an attribute called ng-files in to the file input element. Now, I need to create a directive in the controller matching with the attribute The attribute has a function named getTheFiles() with a parameter $files . I’ll initialize the parameter $files in my directive and later call the function getTheFiles() using the controller’s scope, along with $files parameter. <!DOCTYPE html> <html> <head> <title>AngularJS File Upoad Example with $http and FormData</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script> </head> <body ng-app="fupApp"> <div ng-controller="fupController"> <input type="file" id="file1" name="file" multiple ...

Method Chaining

angular.module("myModule",[]).controller("myController",function($scope) { //Method chaining $scope.message="Angular JS Tutorial"; });

How to Register The Controller With The Module ?

var myApp=angular.module("myModule",[]) //Create The Module var myController=function($scope) { // Create The Controller $scope.message="Angular JS Tutorial"; myApp.controller("myController",myController); // Register The Controller With The Module

How to use ajax in AngularJS

Here you may learn to get details through web api url and use them to bind in table. AngularJS offers $http control which working as a service to read data from the server. Below written example help you to get information .Use below syntax to call any file name or global url which return JSON data. Example : This code is of ajax syntax in angularjs . see the below code to pass url or file name. <script> function employeeController($scope,$http) { var url = “www.getapi.com/api”; // file name which return JSON data. $http.get(url).success( function(response) { $scope. employees = response; ...