CODEWITHSUNDEEP
asp.net-mvcangularjshtmlasp.net-ajax
K.Z
K.Z

Reputation: 5075

Render html form into main html page using AngularJS app method

I am very new to AngularJS and trying to understand how AngularJS can use along with ASP.NET-MVC5 application. In my first attempt I want to run AngularJS app from basic HTML page (in my case index.html) where app holding form template in html format, also I have add global variable, controller, service via factory and directives but I cannot manage to run this app 'employee-form' inside index.html. In order to test if angularJS is initialize and working properly, I have added very basic angularjs code inside in html and it works.. I am not sure where I have done mistake

AngularFormsApp.js (global variable)

var angularFormsApp = angular.module('angularFormsApp', []);

efController.js

angularFormsApp.controller('efController',
function efController($scope, efService) {
    $scope.employee = efService.employee;
});

efService.js

angularFormsApp.factory('efService',
function () {
    return {
        employee: {
            fullName: "Khurram Zahid",
            notes: "The ideal employee, just don't mess with him",
            department: "IT Development",
            perkCar: true,
            perkStock: false,
            perkSixWeeks: true,
            payrollType: "none"
        }
    }
});

efDirective.js

angularFormsApp.directive('employeeForm',
function () {
    return {
        restrict: 'E', //E stands for element, meaning we want to use this directive as element
        templateUrl: '~/App/EmployeeForm/efTemplate.html'
    }
});

efTemplate.html (form)

<div class="form-group">
    <label for="fullName">Name</label>
    <input type="text" id="fullName" name="fullName" class="form-control" />
</div>

<div class="form-group">
    <label for="notes">Notes</label>
    <input type="text" id="notes" name="notes" class="form-control" />
</div>

<div class="form-group">
    <label for="department">Department</label>
    <select id="department" name="department" class="form-control">
        <option>Engineering</option>
        <option>Marketing</option>
        <option>Finance</option>
        <option>IT Development</option>
    </select>
</div>
<br/>

<span><b>Perks</b></span>

<div class="checkbox">
    <label><input type="checkbox" value="perCar"/>Company Car</label>
</div>

<div class="checkbox">
    <label><input type="checkbox" value="perkStock" />perk Stock</label>
</div>

<div class="checkbox">
    <label><input type="checkbox" value="perkSixWeeks" />perk Six Weeks</label>
</div>

<input type="submit" value="Submit Form" />

index.html

<!DOCTYPE html>
<html>
<head >
 <title>Angular JS</title>
  <link href="Content/bootstrap.min.css" rel="stylesheet" />
   <script src="Scripts/angular.min.js"></script>
   <script src="App/AngularFormsApp.js"></script>
   <script src="App/EmployeeForm/efController.js"></script>
   <script src="App/EmployeeForm/efService.js"></script>
<script src="App/EmployeeForm/efDirective.js"></script>
</head>
<body ng-app="angularFormsApp">

<div class="AngularJSTestBlockCode">
    <div>
        <input type="text" ng-model="name" />
        <br />
        <h1>Hello  {{name}}</h1>
    </div>

    <br /><br />

    <div>
        {{458/8}}
    </div>
 </div>

 <div>-------------------------------------------------------</div>  <br/><br/>


<div ng-controller="efController">
    <employee-form>????????????????????
</div>

Upvotes: 0

Views: 580

Answers (1)

Kousik
Kousik

Reputation: 11

You need a route provider to render your html page. Here is your example

.config(['$stateProvider',function($stateProvider) {

$stateProvider.state('dashboard', {

    url:'/dashboard',
    templateUrl: 'views/dashboard/main.html',
})

.state('dashboard.create-example',{

   templateUrl:'views/example/create.html',
   url:'/create-example',
   controller:'Ctrl'
})

then in your controller(efController.js) put this $state.transitionTo('dashboard.create-example'); to render your page to any html you want

Upvotes: 1

Related Questions