Template with its own controller for angular js

Question

I am kind of new to angular JS and this might be the simple question but i am stuck on this. What i am trying to do is, I have one page and on that page I want to add a template. My template is kind of dynamic and have it's own controller. My code is something like this..

-- Main Page HTML --

<html ng-app="myApp">
    <body ng-controller="MyAppCtrl">
        <my-component>

        </my-component>
    </body>
</html>

-- Main page JS --

var myAppModule = angular.module('myApp');

myAppModule.controller('MyAppCtrl', function ($scope) {
})
.directive('myComponent', function () {
  return {
      restrict: 'E',
      templateUrl: 'myComponent.aspx'
  };
});

-- Template(myComponent.aspx) --

<html>
    <!-- include template script -->
    <body ng-controller="ComponentCtrl">
        <div ng-click="showAlert()">
            myBtn
        </div>
    </body>
</html>

-- Template page JS --

var templareModule = angular.module('myApp', []);

templareModule.controller('ComponentCtrl', function ($scope, $http) {
    $scope.showAlert = function () {
        alert("clicked");
    }
});

So for this I am unable to get alert on click.

Thanks in advance.

Which file are you loading in your index file first Main page JS or Template page JS? — BKM
– BKM, Commented Mar 21, 2014 at 11:52
Yes...something like this.."Error: [ng:areq] Argument 'ComponentCtrl' is not a function, got undefined errors.angularjs.org/1.2.14/ng/….." — Dipen Dedania
– Dipen Dedania, Commented Mar 21, 2014 at 12:24
Why do you have two modules? Try defining your ComponentCtrl off of myAppModule — scniro
– scniro, Commented Mar 21, 2014 at 12:26
Try this in your template file <div ng-controller="ComponentCtrl" ng-click="showAlert()"> myBtn </div> . And remove the <body> and <html> tags — BKM
– BKM, Commented Mar 21, 2014 at 12:27

jsparks · Accepted Answer · 2014-03-25 03:57:25Z

1

You really don't need to create a custom directive to be able to do what you describe in your question and since you're a beginner I would suggest you start simple and do without the directive. You will need to use the ng-view tag and routing. There are some other minor issues with your code, some of which were already pointed out by others in the comments. The following code worked for me.

index.html:

<html ng-app="myApp">
    <body>
        <h1>Test</h1>
        <div ng-view></div>

        <script> (Insert paths to required Angular scripts and your JS files)</script>
    </body>
</html>

App JS file:

Note: You will need to download the ngRoute JavaScript file from Angular's website and include it in your project to get the routing to work correctly. (Go to Downloads on their website, pick your version of Angular, then download ngRoute)

angular.module('myApp', [ 'ngRoute' ])
    .config(['$routeProvider',
              function($routeProvider) {
                    $routeProvider.
                      when('/', {
                              templateUrl: 'myComponent.aspx',
                              controller: 'ComponentCtrl'
                      })
    }])
    .controller('ComponentCtrl', function ($scope) {
        $scope.showAlert = function () {
            alert("clicked");
        }
    });

myComponent.aspx:

<div class="ComponentCtrl">
    <div ng-click="showAlert()">
            myBtn
    </div>
</div>

Let me know if you have questions or are still unable to get it to work. I would also suggest you check out some tutorial videos on Egghead.io's website. It helped me figure out the basics of Angular.

edited Mar 25, 2014 at 3:57

answered Mar 23, 2014 at 4:36

jsparks

1,0301 gold badge14 silver badges20 bronze badges

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

2 Comments

Dipen Dedania Over a year ago

I think with use of $routeProvider will change my URL so that's not suitable to my requirement.. @Jessa..but thanks anyway.

jsparks Over a year ago

Initially your URL would be the same since the routing is set up so "/" goes to myComponent.aspx. If you click a link to go to a different template it would append #myOtherComponent to the end of the URL, so yes the URL would change. Can you explain a little more about your use case? How do you anticipate dynamically changing the template if it's not through navigation? Were you planning to put multiple templates in your main page? In your code example you have ComponentCtrl at the <body> level which doesn't lend itself to changing controllers dynamically.

Collectives™ on Stack Overflow

Template with its own controller for angular js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related