How show variable from controller to html page(AngularJs)

Question

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'});
}]);

I don't see this module myApp.view3? Do you really have it? Like <html lang="en" ng-app="myApp"> — Jai
– Jai, Commented Feb 1, 2016 at 9:36

Siva · Accepted Answer · 2016-02-01 09:45:26Z

2

Add ng-app and ng-controller to your body
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>

answered Feb 1, 2016 at 9:45

Siva

2,81518 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Umer Hayyat Over a year ago

why this answer is not worked for you @ user5620472? could you explain please?

user5620472 Over a year ago

It is worked but I think it incorect. I config views in app.js file and include to index.html. I think I not need Include <script src="ajax.googleapis.com/ajax/libs/angularjs/1.2.23/…> to each html file or I wrong?

Siva Over a year ago

@user5620472 No need to include the script tag in each html file. This is was included to make the piece of sample script to work.

user5620472 Over a year ago

I was think if I include .config(['$routeProvider', function ($routeProvider) { $routeProvider.when('/view2', { templateUrl: 'view2/view2.html', controller: 'View2Ctrl' }); }]) I not need write controller name in html page and it mapped automaticly

Siva Over a year ago

You are right. View3Ctrl will be available in view3.html

|

Dirk Jan · Accepted Answer · 2016-02-01 09:38:02Z

0

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.

answered Feb 1, 2016 at 9:38

Dirk Jan

2,4444 gold badges23 silver badges40 bronze badges

2 Comments

user5620472 Over a year ago

It is not work! browser show - {{ctrl.my_name}}(<div ng-controller="View3Ctrl as ctrl">{{ctrl.my_name}}</div>)

Dirk Jan Over a year ago

have you set the ng-app?

Collectives™ on Stack Overflow

How show variable from controller to html page(AngularJs)

2 Answers 2

7 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related