Struggling to establish a connection with AngularJS

Question

Struggling to establish a connection with AngularJS

I recently got my hands on the AngularJS SPA template for Visual Studio and dove straight into my first application. However, I'm already encountering a multitude of issues!

Here's a glimpse of my PersonView :

<!DOCTYPE html>

<html ng-app="app">
<head>
<meta name="viewport" content="width=device-width" />
<title>Add Person</title>
<script src="~/Scripts/vendor/angular.js"></script>
<script src="~/Scripts/app.js" type="text/javascript"></script>
<script src="~/Scripts/controllers.js"></script>

</head>
<body ng-controller="PersonCtrl">
<form name="A" ng-controller="PersonCtrl">
    <div class="row" >
        <div class="col-md-2">
            First Name:
        </div>
        <div>
            <input type="text" name="input" ng-model="$firstName"
                   ng-pattern="word" ng-required="true" />

        </div>
    </div>
</form>
<form name="B" ng-controller="PersonCtrl">
    <div class="row" >
        <div class="col-md-2">
            Middle Name:
        </div>
        <div>
            <input type="text" name="middleName" ng-model="$middleName"
                   ng-pattern="word" ng-required="true" />

        </div>
    </div>

</form>
<form name="C" ng-controller="PersonCtrl">
    <div class="row" >
        <div class="col-md-2">
            Last Name:
        </div>
        <div>
            <input type="text" name="lastName" ng-model="$lastName"
                   ng-pattern="word" ng-required="true" />

        </div>
    </div>
</form>

<br />

Name :  {{firstName + middleName + lastName}}

Here is my Controller class :

'use strict';

// Google Analytics Collection APIs Reference:
// https://developers.google.com/analytics/devguides/collection/analyticsjs/

angular.module('app.controllers', [])

// Path: /
.controller('HomeCtrl', ['$scope', '$location', '$window', function ($scope, $location, $window)
{
    $scope.$root.title = 'AngularJS SPA Template for Visual Studio';
    $scope.$on('$viewContentLoaded', function () {
        $window.ga('send', 'pageview', { 'page': $location.path(), 'title': $scope.$root.title
 });
    });
}])

// Path: /about
.controller('AboutCtrl', ['$scope', '$location', '$window', function ($scope, $location, $window) {
    $scope.$root.title = 'AngularJS SPA | About';
    $scope.$on('$viewContentLoaded', function () {
        $window.ga('send', 'pageview', { 'page': $location.path(), 'title': $scope.$root.title });
    });
}])

// Path: /login
.controller('LoginCtrl', ['$scope', '$location', '$window', function ($scope, $location, $window) {
    $scope.$root.title = 'AngularJS SPA | Sign In';
    // TODO: Authorize a user
    $scope.login = function () {
        $location.path('/');
        return false;
    };
    $scope.$on('$viewContentLoaded', function () {
        $window.ga('send', 'pageview', { 'page': $location.path(), 'title': $scope.$root.title });
    });
}])

.controller('PersonCtrl', ['$scope', function($scope) {
    //$scope.$root.title = 'Create Person';
    $scope.firstName = 'Aditya';
    $scope.lastName = 'Swami';
    $scope.middleName = ' ';

}])

// Path: /error/404
.controller('Error404Ctrl', ['$scope', '$location', '$window', function ($scope, $location,      $window) {
    $scope.$root.title = 'Error 404: Page Not Found';
    $scope.$on('$viewContentLoaded', function () {
        $window.ga('send', 'pageview', { 'page': $location.path(), 'title': $scope.$root.title });
    });
}]);

And here's my App.js

'use strict';


 angular.module('app', ['ui.router', 'app.filters', 'app.services', 'app.directives',  'app.controllers'])

// Gets executed during the provider registrations and configuration phase. Only providers and constants can be
// injected here. This is to prevent accidental instantiation of services before they have been fully configured.
.config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) {

    // UI States, URL Routing & Mapping. For more info see: https://github.com/angular-ui/ui-router
    // ------------------------------------------------------------------------------------------------------------

    $stateProvider
        .state('home', {
            url: '/',
            templateUrl: '/views/index',
            controller: 'HomeCtrl'

        })
        .state('about', {
            url: '/about',
            templateUrl: '/views/about',
            controller: 'AboutCtrl'
        })
        .state('login', {
            url: '/login',
            layout: 'basic',
            templateUrl: '/views/login',
            controller: 'LoginCtrl'
        })
        .state('person', {
            url: '/PersonView',
            layout: 'basic',
            templateUrl: '/views/PersonView',
            controller: 'PersonCtrl'
        })
        //.state('otherwise', {
        //    url: '*path',
        //    templateUrl: '/views/404',
        //    controller: 'Error404Ctrl'
        //});

    $locationProvider.html5Mode(true);

}])


.run(['$templateCache', '$rootScope', '$state', '$stateParams', function                                                                       ($templateCache,$rootScope, $state, $stateParams) {

    // <ui-view> contains a pre-rendered template for the current view
    // caching it will prevent a round-trip to a server at the first page load
    var view = angular.element('#ui-view');
    $templateCache.put(view.data('tmpl-url'), view.html());

    // Allows to retrieve UI Router state information from inside templates
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;

    $rootScope.$on('$stateChangeSuccess', function (event, toState) {


        // based on which page the user is located
        $rootScope.layout = toState.layout;
    });
}]);

Check out my solution structure below :

javascript asp.net angularjs

Answer 1

Answer №1

Consider using the variable firstName instead of $firstName:

 <input type="text" name="input" ng-model="firstName" ng-pattern="word" ng-required="true" />

Revise your layout to be more concise and efficient, without multiple forms and controllers:

<body ng-controller="PersonCtrl">

    <div class="row" >
        <div class="col-md-2">
            First Name:
        </div>
        <div>
            <input type="text" name="input" ng-model="firstName"
                   ng-required="true" />

        </div>
    </div>

    <div class="row" >
        <div class="col-md-2">
            Middle Name:
        </div>
        <div>
            <input type="text" name="middleName" ng-model="middleName"
                    ng-required="true" />

        </div>
    </div>


    <div class="row" >
        <div class="col-md-2">
            Last Name:
        </div>
        <div>
            <input type="text" name="lastName" ng-model="lastName"
                    ng-required="true" />

        </div>
    </div>

Furthermore, it is suggested to remove the entire code for $templateCache as it may not be necessary.

Answer 2

Consider using the variable firstName instead of $firstName:

 <input type="text" name="input" ng-model="firstName" ng-pattern="word" ng-required="true" />

Revise your layout to be more concise and efficient, without multiple forms and controllers:

<body ng-controller="PersonCtrl">

    <div class="row" >
        <div class="col-md-2">
            First Name:
        </div>
        <div>
            <input type="text" name="input" ng-model="firstName"
                   ng-required="true" />

        </div>
    </div>

    <div class="row" >
        <div class="col-md-2">
            Middle Name:
        </div>
        <div>
            <input type="text" name="middleName" ng-model="middleName"
                    ng-required="true" />

        </div>
    </div>


    <div class="row" >
        <div class="col-md-2">
            Last Name:
        </div>
        <div>
            <input type="text" name="lastName" ng-model="lastName"
                    ng-required="true" />

        </div>
    </div>

Furthermore, it is suggested to remove the entire code for $templateCache as it may not be necessary.

Answer 3

Answer №2

Your file contains redundant information that is already included in the parent file.

All unnecessary content should be removed. If you did not post the entire file, make sure to exclude the </body> and </html> tags at the end of the file.

<!DOCTYPE html>

<html ng-app="app">
<head>
<meta name="viewport" content="width=device-width" />
<title>Add Person</title>
<script src="~/Scripts/vendor/angular.js"></script>
<script src="~/Scripts/app.js" type="text/javascript"></script>
<script src="~/Scripts/controllers.js"></script>

</head>
<body ng-controller="PersonCtrl">

Furthermore, the file nests a controller that is already defined in the route, so the use of ng-controller is redundant and not necessary.

Consider whether multiple form tags are needed. In most cases, wrapping the entire page with one form is sufficient.

EDIT

It is recommended to prefix bound controller fields with $.

Here is a revised version of how the complete file should be structured:

<form name="MyForm" novalidate>
    <div class="row" >
        <div class="col-md-2">
            First Name:
        </div>
        <div>
            <input type="text" name="input" ng-model="firstName"
                   ng-pattern="word" ng-required="true" />

        </div>
    </div>

    <div class="row" >
        <div class="col-md-2">
            Middle Name:
        </div>
        <div>
            <input type="text" name="middleName" ng-model="middleName"
                   ng-pattern="word" ng-required="true" />

        </div>
    </div>

    <div class="row" >
        <div class="col-md-2">
            Last Name:
        </div>
        <div>
            <input type="text" name="lastName" ng-model="lastName"
                   ng-pattern="word" ng-required="true" />

        </div>
    </div>
</form>

<br />

Name :  {{firstName + middleName + lastName}}

Answer 4

Your file contains redundant information that is already included in the parent file.

All unnecessary content should be removed. If you did not post the entire file, make sure to exclude the </body> and </html> tags at the end of the file.

<!DOCTYPE html>

<html ng-app="app">
<head>
<meta name="viewport" content="width=device-width" />
<title>Add Person</title>
<script src="~/Scripts/vendor/angular.js"></script>
<script src="~/Scripts/app.js" type="text/javascript"></script>
<script src="~/Scripts/controllers.js"></script>

</head>
<body ng-controller="PersonCtrl">

Furthermore, the file nests a controller that is already defined in the route, so the use of ng-controller is redundant and not necessary.

Consider whether multiple form tags are needed. In most cases, wrapping the entire page with one form is sufficient.

EDIT

It is recommended to prefix bound controller fields with $.

Here is a revised version of how the complete file should be structured:

<form name="MyForm" novalidate>
    <div class="row" >
        <div class="col-md-2">
            First Name:
        </div>
        <div>
            <input type="text" name="input" ng-model="firstName"
                   ng-pattern="word" ng-required="true" />

        </div>
    </div>

    <div class="row" >
        <div class="col-md-2">
            Middle Name:
        </div>
        <div>
            <input type="text" name="middleName" ng-model="middleName"
                   ng-pattern="word" ng-required="true" />

        </div>
    </div>

    <div class="row" >
        <div class="col-md-2">
            Last Name:
        </div>
        <div>
            <input type="text" name="lastName" ng-model="lastName"
                   ng-pattern="word" ng-required="true" />

        </div>
    </div>
</form>

<br />

Name :  {{firstName + middleName + lastName}}

Struggling to establish a connection with AngularJS

Answer №1

Answer №2

Similar questions

What strategies can I use to reduce duplication in my HTML and JavaScript code?

In TypeScript/Angular, what is the best way to share model variables between a Service class and a controller class?

Is there a way in JavaScript to format an array's output so that numbers are displayed with only two decimal places?

Create a script that ensures my website can be set as the homepage on any internet browser

Identifying a loop within a hierarchy of JavaScript elements

Creating custom directives that utilize recursive behavior within an ngRepeat loop

Issues encountered with URL Rewrite functionality in IIS version 10.0

What is the best way to integrate JavaScript and Python for seamless collaboration?

executing a series of jQuery ajax calls iteratively

Utilizing the power of AWS Lambda in conjunction with moment JS to generate unique

Guide on submitting form information to API controller

What is the process for including a checkbox with a label in Card Media?

Retrieving property values from an object across multiple levels based on property name

Can a class property's default value be determined by another property's value?

Establishing the httppostedfilebase variable when validation is unsuccessful in an ASP.Net MVC view

Is it possible to delete and substitute all content following a specific DIV tag?

Issue with code failing to insert object into an array

Using PHP to upload images through AJAX increases efficiency

What is the process of encrypting a password using AngularJS on the client side, transferring it securely to the server through ExpressJS, and then decrypting it on the server

Exception occurs when arrow function is replaced with an anonymous function