Отрисовать HTML-форму на главную HTML-страницу с помощью метода приложения AngularJS

Question

Отрисовать HTML-форму на главную HTML-страницу с помощью метода приложения AngularJS

0

Я очень новичок в AngularJS и пытаюсь понять, как AngularJS может использовать приложение ASP.NET-MVC5. В моей первой попытке я хочу запустить приложение AngularJS с базовой HTML-страницы (в моем случае index.html), где приложение поддерживает шаблон формы в формате html, также я добавляю глобальную переменную, контроллер, сервис через фабрику и директивы, но мне не удается запустите это приложение "employee-form" внутри index.html. Чтобы проверить правильность инициализации и правильной работы angularJS, я добавил очень простой код углового кода внутри html, и он работает. Я не уверен, где я ошибся

AngularFormsApp.js (глобальная переменная)

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 (форма)

<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>

toxic 03 июль 2015, в 13:33

Источник

Теги:

angularjs

html5

asp.net-mvc

asp.net-ajax

1 ответ

Ещё вопросы

Kousik · Answer 1 · 2016-01-23T05-26-00.000Z

Вам нужен поставщик маршрута для отображения вашей html-страницы. Вот ваш пример

.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'
})

то в вашем контроллере (efController.js) поместите этот $state.transitionTo('dashboard.create-example'); для рендеринга вашей страницы на любой html, который вы хотите