CODEWITHSUNDEEP
javascripthtmlangularjs
noob
noob

Reputation: 3

Why is angular js not working here

I have these code samples that i am currently working on trying to learn angular js it worked well before but now it is not working at all can some one please help me to make it right //INDEX.HTML

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>AngularJS Tutorial</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
    <script src="app.js"></script>
    <script src="main.ctrl.js"></script>
</head>
<body ng-app="app" ng-controller="MainController as main">
    <div class="container">
        <h1>{{main.titlex}}</h1>

        <div class="input-group-addon">
            <span class="glyphicon glyphicon-search"></span>
            <input type="text" class="form-control" ng-model="main.searchInput">
        </div>
         <p>{{main.searchInput}}</p>
    </div>
</body>
</html>

//app.js

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

//main.ctrl.js

angular.module('app').controller("MainController",function(){

    var vm = this;
    vm.titlex = 'AngularJS Tutorial Example';
    vm.searcInput ='';
});

Upvotes: 0

Views: 85

Answers (4)

Manoj Shevate
Manoj Shevate

Reputation: 742

Here is working solution with vm approach

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

    angular.module('app').controller('MainController',function($scope){
        vm = this;
        vm.titlex = 'AngularJS Tutorial Example';
        vm.searchInput ='Initial Demo text'; //corrected variable spelling and added it to vm
    });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="MainController as main">
    <div class="container">
        <h1>{{main.titlex}}</h1> 
<!-- you can directly acceess model as above -->

        <div class="input-group-addon">
            <span class="glyphicon glyphicon-search"></span>
            <input type="text" class="form-control" ng-model="main.searchInput">
        </div>
         <p>{{main.searchInput}}</p>
    </div>
</body>

Upvotes: 1

Manoj Shevate
Manoj Shevate

Reputation: 742

please refer updated below code snippet - 

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

angular.module('app').controller('MainController',['$scope',function($scope){ //added scope here
    $scope.titlex = 'AngularJS Tutorial Example';
    $scope.searchInput ='Initial Demo text'; //corrected variable spelling and added it to scope
}]);
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>AngularJS Tutorial</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
    <script src="app.js"></script>
    <script src="main.ctrl.js"></script>
</head>
<body ng-app="app" ng-controller="MainController as main">
    <div class="container">
        <h1>{{titlex}}</h1> 
<!-- you can directly acceess model as above -->

        <div class="input-group-addon">
            <span class="glyphicon glyphicon-search"></span>
            <input type="text" class="form-control" ng-model="searchInput">
        </div>
         <p>{{searchInput}}</p>
    </div>
</body>
</html>

Hope this helps!!

Upvotes: 0

Sarjan Desai
Sarjan Desai

Reputation: 3733

I haven't changed any code but your code looks like working fine..

//app.js

angular.module('app',[]);
//main.ctrl.js

angular.module('app').controller("MainController",function(){

    var vm = this;
    vm.titlex = 'AngularJS Tutorial Example';
    vm.searcInput ='';
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>AngularJS Tutorial</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
    <script src="app.js"></script>
    <script src="main.ctrl.js"></script>
</head>
<body ng-app="app" ng-controller="MainController as main">
    <div class="container">
        <h1>{{main.titlex}}</h1>

        <div class="input-group-addon">
            <span class="glyphicon glyphicon-search"></span>
            <input type="text" class="form-control" ng-model="main.searchInput">
        </div>
         <p>{{main.searchInput}}</p>
    </div>
</body>
</html>

Upvotes: 0

Magus
Magus

Reputation: 15124

Replace your controller code by this one :

angular.module('app').controller("MainController", function ($scope) {
    $scope.titlex = 'AngularJS Tutorial Example';
    $scope.searchInput = '';
});

Upvotes: 0

Related Questions