How to define AngularJS controller in HTML Template

Question

I have the following structure of files:

• index.html

• tpl/page.html

• app.js

Description:

1. app.js has definition of main module with routing to page.html

2. index.html defines view for template and includes app.js

3. page.html has definition of PageController inside <script> tag and div who is using this controller.

Problem When PageController resides in page.html it doesn't work but when it is included into app.js then it works. Error is following: Argument 'PageController' is not aNaNunction, got undefined.

It looks like it is too late to define controller in template. But actually it is my requirement. I want to hide page.html + controller (even their code) from all users and make it visible only to particular group by Spring security. That is why I defined security constraint for this page and want it to be executed only when this constraints are met.

Update #1 Controller definition:

<script type="text/javascript">
  mainApp.controller('PageController', function($scope, $rootScope) {
    ...
  });
</script>

<md-content ng-controller="PageController" ...

Answer 1

If both the script tag and the HTML for the template are defined in an external html file, Angular should complain and say that you cannot have two root elements in a template file.

My suggestion would be to have your controller in a separate JS file and set your Spring Security permissions on that. If you are using JSPs or something similar to render the main page, you could then add a conditional around the <script> tag for the controller if the user has access.