Javascript AngularJS脚本在即时文件之外时不工作_Javascript_Html_Angularjs

Javascript AngularJS脚本在即时文件之外时不工作

javascript html angularjs

Javascript AngularJS脚本在即时文件之外时不工作,javascript,html,angularjs,Javascript,Html,Angularjs,我正在做一个AngularJS教程，其中包括一个HTML文件和一个简单的JS脚本，以提供简单的角度功能。下面是HTML文件 <!DOCTYPE> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <script src='main.js'></scrip

我正在做一个AngularJS教程，其中包括一个HTML文件和一个简单的JS脚本，以提供简单的角度功能。下面是HTML文件

<!DOCTYPE>
    <html>
    <script 
  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <script src='main.js'></script>
    <head>
        <title> Angular Practice </title>
    </head>

    <body ng-app='learningAngular' ng-controller='myCntr'>

        <input type="text" ng-model='name'> <br>

        <div ng-bind='name' ng-click='alertMe()'></div>
        <button ng-click='alertMe()'>Alert Me Angular</button> <br>
        <div ng-show='willShow'> Show this!! </div>
        <button ng-click='toggleShow()'> Show </button>
        <div ng-hide='willShow'> using ng-hide! </div>

        <ul ng-repeat='puppy in doggos'>
            <li> {{ puppy }} </li>
        </ul>

        <ul ng-repeat='(student, grade) in grades'>
            <li> {{ student }}, {{ grade }} </li>
        </ul>
    </body>
</html>

我很困惑，因为当我在同一个文件夹的脚本文件（main.js）中有Angular模块/控制器时，Angular就不再工作了。当我将脚本移动到index.html中时，它工作得非常好。我试过摆弄src='main.js'看看这是否是问题所在，但没有发现任何问题。

您的

标签应该在

或

标签内。这可能就是为什么它没有把它捡起来

像这样的方法应该会奏效：

<!DOCTYPE>
<html>
    <head>
        <title> Angular Practice </title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        <script src="main.js"></script>
    </head>

    <body ng-app='learningAngular' ng-controller='myCntr'>
    ...
    </body>
</html>


角练习
...

旧的约定是将脚本放在

标记的末尾，但由于我们使用的是负责呈现视图的Javascript框架，因此该约定不再有意义

尝试将脚本标记移动到body元素的末尾。@JCFord谢谢！这似乎奏效了。你知道为什么这很重要吗？

<!DOCTYPE>
<html>
    <head>
        <title> Angular Practice </title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        <script src="main.js"></script>
    </head>

    <body ng-app='learningAngular' ng-controller='myCntr'>
    ...
    </body>
</html>