AngularJS-在JS外部文件或HTML中包含代码？

Question

I have just started learning AngularJS and when I normally do jQuery applications I place all the Javascript in outside files. However, most of the examples for AngularJS I see the code placed in script tags at the bottom of the HTML page.

I'm faced with the issue of PHP loading variables on the page and using AngularJS to reference those variables by placing them in a hidden tag and grab it or place the code at the bottom in a script tag.

What is the most professional/common method of dealing with this issue?

FYI: I do not want to enable PHP in JS files.

Thanks for your help,

Cameron.

Answer 1

Any examples that include the actual script in a script tag are done purely for review convenience to be able to see how angular components and view interact together.

The norm is to use external file(s).

There is a difference however with any script tag that is used to hold an html template.

These tags will have the following type and do need to be in main file

 <script type="text/ng-template" id="/view1.tpl">
       <div>Some view template html</div>
 </script>

The ID for these template tags will equate to any templateUrl used in directives, routes or ng-include

Answer 2

The script tag examples are purely for brevity. I would personally never put a script tag into production code, it is too easily overlooked. There is a lot to be said for good file structure.

Echoing variables into your mark up with PHP is not a good way to go IMO.

It is much better practice to expose a web API and have your Angular app hit the endpoints asynchronously for any required data using the $http service.

If you are working on a production web application serving static markup and scripts that in turn access a separate API is a much more desirable architecture.