I'm newbie to angular My angular controller is:

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

chatApp.controller('loginController', ['$scope', function($scope) {
$scope.user_name="name";
$scope.user_password="name";
}]);

the app.js is:

'use strict';
angular.module('chatApp', [
'ui.router',
'chatApp.filters',
'chatApp.services',
'chatApp.directives',
'chatApp.controllers'
]).config(function($stateProvider, $urlRouterProvider) {
$stateProvider
    .state('login', {
        url: "/login",
        templateUrl: "partials/login.html",
        controller : "loginController"
    })
});

login.html is:

<div>
<div id="wrapper">
    <form name="login-form" class="login-form" action="" method="post">
        <div class="header">
            <h1>Login Form</h1>
        </div>
        <div class="content">
            <input name="username" type="text" class="input username" placeholder="{{user_name}}" />
            <div class="user-icon"></div>
            <input name="password" type="password" class="input password" placeholder="{{user_password}}" />
            <div class="pass-icon"></div>
        </div>
    </form>
</div>

I've used stateprovider for routing. But, it's not showing anything in placeholder. What is the reason?

I'm newbie to angular My angular controller is:

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

chatApp.controller('loginController', ['$scope', function($scope) {
$scope.user_name="name";
$scope.user_password="name";
}]);

the app.js is:

'use strict';
angular.module('chatApp', [
'ui.router',
'chatApp.filters',
'chatApp.services',
'chatApp.directives',
'chatApp.controllers'
]).config(function($stateProvider, $urlRouterProvider) {
$stateProvider
    .state('login', {
        url: "/login",
        templateUrl: "partials/login.html",
        controller : "loginController"
    })
});

login.html is:

<div>
<div id="wrapper">
    <form name="login-form" class="login-form" action="" method="post">
        <div class="header">
            <h1>Login Form</h1>
        </div>
        <div class="content">
            <input name="username" type="text" class="input username" placeholder="{{user_name}}" />
            <div class="user-icon"></div>
            <input name="password" type="password" class="input password" placeholder="{{user_password}}" />
            <div class="pass-icon"></div>
        </div>
    </form>
</div>

I've used stateprovider for routing. But, it's not showing anything in placeholder. What is the reason?

• javascript
• angularjs

• i don't see ng-controller="loginController" anywhere in your html. this would be needed if angular is supposed to wrap the portion into a scope and render the directives according to your controller's scope variables. – Jakob Hohlfeld Commented Apr 1, 2014 at 8:58
• Please put your code in the jsfiddle. – Fizer Khan Commented Apr 1, 2014 at 9:46
• @jhohlfeld: No he doesn't need it, it's placed in the $stateProvider. Any errors ? Did you init all those specified module dependencies ? Does your browser support placeholders? – Konstantin Krass Commented Apr 1, 2014 at 9:50
• these answers show how many ways there are to start an angular project – Richard Hubley Commented Nov 28, 2018 at 14:09

5 Answers 5

Solved the problem using ng-model instead of {{}}.

<div class="content">
            <input name="username" type="text" class="input username" placeholder="username" ng-model="user_name" />
            <div class="user-icon"></div>
            <input name="password" type="password" class="input password" placeholder="password" ng-model="user_password"/>
            <div class="pass-icon"></div>
        </div>

This works for me if I say ng-controller = "loginController" in the html-

<div ng-controller = 'loginController'>
<div id="wrapper">
    <form name="login-form" class="login-form" action="" method="post">
        <div class="header">
            <h1>Login Form</h1>
        </div>
        <div class="content">
            <input name="username" type="text" class="input username" placeholder="{{user_name}}" />
            <div class="user-icon"></div>
            <input name="password" type="password" class="input password" placeholder="{{user_password}}" />
            <div class="pass-icon"></div>
        </div>
</div>

Here's a JSBin with it working: http://jsbin./aDuJIku/265/edit?html,js,output

This solution doesn't include ui-router, but it should work with it.

Try this:

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

    chatApp.controller('loginController', ['$scope','$timeout', function($scope,$timeout) {

        $timeout(function(){
            $scope.user_name="name";
            $scope.user_password="name";
        },100);

    }]);

you just have to change to RouteProvider, In your case you just do:

angular.module('chatApp', [ 'ngRoute' 'ui.router','chatApp.filters','chatApp.services', 'chatApp.directives', 'chatApp.controllers'])
.config(function($routeProvider) {
    $routeProvider.when('/login', { templateUrl: "partials/login.html", controller: "loginController" })
});

please make sure that you have angular-route js included.

<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/angularjs/1.2.11/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis./ajax/libs/angularjs/1.2.11/angular-route.js"></script>

Hope this help you! ;)

Here's some examples for you this

Below mentioned code works.

Note: If somebody tries to run this code in preview its not going to work. JS and HTML code needs to be copied in separate file and use the names mentioned.

var myContrlApp = angular.module('ContrlApp', []);
myContrlApp.controller('MainController', function ($scope) {
    var person = {
        firstName: "Keith",
        lastName: "Jackson",
    };
    $scope.message = "Wele, Angular !";
    $scope.person = person;
});

<html ng-app="ContrlApp">
<head>
    <script type="text/javascript" src="Scripts/angular.js"></script>
    <script type="text/javascript" src="Scripts/angular-route.js"></script>
    <script type="text/javascript" src="Scripts/script.js"></script>
    <!--<link rel="stylesheet" href="style.css" />-->
    <title>Angular JS Tryout</title>
</head>
<body ng-controller="MainController">
    <div>
        <h1>{{message}}</h1>
        <div>
            <div>First name: {{person.firstName}}</div>
            <div>Last name: {{person.lastName}}</div>

        </div>
    </div>
</body>
</html>