Bailey Miller Bailey Miller - 2 years ago 128
AngularJS Question

Using scope from route config within html

As a beginner with AngularJs I am looking into creating a single page application and I am having trouble converting some early code into more professional code. In doing this conversion I moved all my 'page' html into their own .html files. I am using ng-view to then display the proper html page inside of my ng-view div tag. Although after moving all the code something is now wrong with calling my methods. Specifically I think my error is within the app.config for route or within my .html files content for calling this information. If I remove the ng-controller div from my .html how do I still use the default controller set from app.config?

Here is my app.route setup:

function config($routeProvider) {


// route for the home page
.when('/', {
templateUrl: 'pages/home.html',
controller: 'mainController'

// route for the about page
.when('/about', {
templateUrl: 'pages/about.html',
controller: 'aboutController'

// route for the contact page
.when('/contact', {
templateUrl: 'pages/contact.html',
controller: 'contactController'


Then here is my mainController setup:

app.controller('mainController', ['$scope', 'LoginService', function ($scope, LoginService) {
//Controller logic goes here

this.isValid = function (username, password) {

var EmailRegex = /^(([^<>()\[\]\.,;:\[email protected]\"]+(\.[^<>()\[\]\.,;:\[email protected]\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\[email protected]\"]+\.)+[^<>()[\]\.,;:\[email protected]\"]{2,})$/i;
var PasswordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;

var EmailReg = new RegExp(EmailRegex);
var PasswordReg = new RegExp(PasswordRegex);

var em = EmailReg.test(username);
var pas = PasswordReg.test(password);

//alert("Hello dude! Email:" + em + " Password:" + pas + "\n" + username + " " + password );

if (em && pas) {
return false;
else {
return true;

this.user =
Message: 'Sign in',
ButtonMessage: 'Sign in Bailey',
TempUser: '',
TempPassword: '',
FirstName: '',
LastName: '',
Role: '',
AuthHash: null,
FinalUser: $scope.Username,
FinalPassword: $scope.Password,

$scope.user = this.user;

this.Authenicate = function (Username, Password) {
LoginService.Login(Username, Password).then(function (ResponseData)

var readAbleObject = angular.fromJson(angular.fromJson(ResponseData));
$scope.user.FirstName = readAbleObject.FirstName;
$scope.user.LastName = readAbleObject.LastName;
$scope.user.Role = readAbleObject.Role;
$scope.user.AuthHash = readAbleObject.AuthHash;
$scope.user.Username = readAbleObject.Username;
$scope.user.Password = readAbleObject.Password;
$scope.user.Message = "Welcome " + $scope.user.FirstName;
$scope.user.ButtonMessage = "Sign " + $scope.user.FirstName + " " + $scope.user.LastName + " out";



$scope.clearInput = function () {
this.user.TempUser = null;
this.user.TempPassword = null;


My html waiting for views to load into them:

<div id="MainDiv" data-ng-app="GApp">
<div id="LoginDiv" class="wrap" data-ng-view="">


My .html files content:

<div data-ng-controller="mainController as ctrl">
<div id="HomeHtml">
<link href="Content/Markup/Styles.css" rel="stylesheet" />
<p class="form-title">{{user.Message}}</p>
<form name="login" class="login" novalidate>
<input type="email" placeholder="Susquehanna Software Email" data-ng-model="user.TempUser" />
<input type="password" placeholder="Password" data-ng-model="user.TempPassword" />
<input type="submit" value="{{user.ButtonMessage}}" class="btn btn-lg btn-warning" data-ng-disabled="isValid(user.TempUser, user.TempPassword)" data-ng-click="Authenicate(user.TempUser, user.TempPassword)" />

Answer Source

Since you are using controller as syntax, if you write ctrl.user.TempPassword or generally append ctrl before user, then it should work.

You are on the right track, you do not need to write $scope.user = this.user. Its good practice to use controller as syntax.

.when('/', {
        templateUrl: 'pages/home.html',
        controller: 'mainController',
        controllerAs: 'ctrl'
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download