CODEWITHSUNDEEP
javascripthtmlangularjs
user5620472
user5620472

Reputation: 2882

How show variable from controller to html page(AngularJs)

I create controller and html page.

'use strict';
angular.module('myApp.view3', ['ngRoute'])

    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.when('/view3', {
            templateUrl: 'view3/view3.html',
            controller: 'View3Ctrl'
        });
    }])

    .controller('View3Ctrl', [function($scope) {
        $scope.my_name = "Pasha";
    }]);

and it is my html page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My view</title>
</head>
<body>
<p> Hello Pavel</p>
<div>{{my_name}}</div>
</body>
</html>

I want show in browser my html.

Hello Pavel

Pasha

Angular seed app: v0.1

But I see in browser

 Hello Pavel
 {{my_name}}   
 Angular seed app: v0.1

I use example from link

EDIT: I add appjs.

It is my app js file my file it is my file:

'use strict';

// Declare app level module which depends on views, and components
angular.module('myApp', [
  'ngRoute',
  'myApp.view1',
  'myApp.view2',
  'myApp.view3',
  'myApp.version'
]).
config(['$routeProvider', function($routeProvider) {
  $routeProvider.otherwise({redirectTo: '/view1'});
}]);

Upvotes: 0

Views: 1664

Answers (2)

Siva
Siva

Reputation: 2785

  1. Add ng-app and ng-controller to your body
  2. Add '$scope' in the controller

'use strict';
angular.module('myApp.view3', [])

    .controller('View3Ctrl', ['$scope', function($scope) {
        $scope.my_name = "Pasha";
    }]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My view</title>
</head>
<body ng-app="myApp.view3" ng-controller="View3Ctrl">
<p> Hello Pavel</p>
<div>{{my_name}}</div>
</body>
</html>

Upvotes: 2

Dirk Jan
Dirk Jan

Reputation: 2469

HTML

<div ng-controller="View3Ctrl as ctrl">{{ ctrl.my_name}}</div>

You also need to set your documents ng-app attribute. See more in the docs.

Upvotes: 0

Related Questions