Javascript ng视图未显示模板_Javascript_Angularjs_Routes_Angular Routing_Ng View

Javascript ng视图未显示模板

javascript angularjs routes

Javascript ng视图未显示模板,javascript,angularjs,routes,angular-routing,ng-view,Javascript,Angularjs,Routes,Angular Routing,Ng View,我正在学习Pluralsight关于角度基础知识的教程，其中一个主题是关于使用ngRoute进行布线所以我在这个特定的主题上遇到了麻烦，因为我正在尝试制作一个管理路线的应用程序，我不知道如何使它工作，因为它没有显示任何错误这是index.html文件 <!DOCTYPE html> <html ng-app="angularPlayground"> <head> <meta charset="utf-8">

我正在学习Pluralsight关于角度基础知识的教程，其中一个主题是关于使用

ngRoute

进行布线

所以我在这个特定的主题上遇到了麻烦，因为我正在尝试制作一个管理路线的应用程序，我不知道如何使它工作，因为它没有显示任何错误

这是

index.html

文件

<!DOCTYPE html>
<html ng-app="angularPlayground">
    <head>
        <meta charset="utf-8">
        <title>Angular playground</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
        <!-- Angular initalization -->
        <script src="app-module.js"></script>
        <script src="app-router.js"></script>
        <!-- Controllers -->
        <script src="app/main/main-ctrl.js"></script>
        <script src="app/faces/faces-ctrl.js"></script>
        <script src="app/location/location-ctrl.js"></script>
        <!-- Services -->
        <script src="app/faces/faces-service.js"></script>
    </head>
    <body>
        <h1>Welcome to the Angular playground</h1>
        <h4>Select what you want to see.</h4>

        <div ng-view></div>
    </body>
</html>

<ul>
    <li><a href="#">Experiments</a></li>
    <li><a href="#">Faces API</a></li>
    <li><a href="#">Location</a></li>
</ul>

这是

main.html

文件

<!DOCTYPE html>
<html ng-app="angularPlayground">
    <head>
        <meta charset="utf-8">
        <title>Angular playground</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.js"></script>
        <!-- Angular initalization -->
        <script src="app-module.js"></script>
        <script src="app-router.js"></script>
        <!-- Controllers -->
        <script src="app/main/main-ctrl.js"></script>
        <script src="app/faces/faces-ctrl.js"></script>
        <script src="app/location/location-ctrl.js"></script>
        <!-- Services -->
        <script src="app/faces/faces-service.js"></script>
    </head>
    <body>
        <h1>Welcome to the Angular playground</h1>
        <h4>Select what you want to see.</h4>

        <div ng-view></div>
    </body>
</html>

<ul>
    <li><a href="#">Experiments</a></li>
    <li><a href="#">Faces API</a></li>
    <li><a href="#">Location</a></li>
</ul>

我确实检查了

main.html

文件的路径是否正确，它应该是正确的，因为当我在浏览器中输入它的URL时，它的加载没有任何问题

顺便说一下，如果你需要的话

提前感谢。

您的

位置ctrl.js

文件正在重新定义您的

模块。此处已修复~这就是为什么我喜欢使用每个文件一个模块的方法，并将所有模块依赖项合并到主应用程序模块中。@Phil现在这很有意义，非常感谢。但是，您能否进一步解释一下每个文件一个模块
的方法？当然，但请记住此方法适用于鲍尔式加载；使用NPM/require（）
会有所不同。。。每个JS文件定义一个模块（angular.module（'specific.module.name'、['dependencies'、'go'、'here']）
）和任何服务、控制器、指令等。这样，文件的加载顺序通常并不重要，并且不会意外地破坏任何已定义的模块。有关示例，请参见您的位置ctrl.js
文件正在重新定义您的模块。此处已修复~这就是为什么我喜欢使用每个文件一个模块的方法，并将所有模块依赖项合并到主应用程序模块中。@Phil现在这很有意义，非常感谢。但是，您能否进一步解释一下每个文件一个模块
的方法？当然，但请记住此方法适用于鲍尔式加载；使用NPM/require（）
会有所不同。。。每个JS文件定义一个模块（angular.module（'specific.module.name'、['dependencies'、'go'、'here']）
）和任何服务、控制器、指令等。这样，文件的加载顺序通常并不重要，并且不会意外地破坏任何已定义的模块。请参阅以获取示例