如何在 angular 中导入模块并显示在视图中？

Question

我正在尝试在 angular 中加载我的第一个视图。但是我以模块化的方式创建了一个项目来学习良好的编码风格。

我将展示如何创建目录来创建模块

或在此处查看完整图片...

我把这个写在我的 index.html 页面上

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="css/foundation.css" />
    <script src="lib/angular.js" type="text/javascript"></script>
    <script src="lib/angular-ui-router.js" type="text/javascript"></script>
    <script src="js/app.js" type="text/javascript"></script>
</head>

<body >
     <div ng-app="firstApp">
         <div ui-view="app"></div>
     </div>


</body>

</html>

在app.js

var app= angular.module('firstApp',['ui.router']);

在控制器firstcontroller.js文件中我写了这个

(function() {
    'use strict';

    angular
        .module('firstApp')
        .controller('firstcont', firstcont);

    firstcont.$inject = ['$scope'];
    function firstcont($scope) {
        $scope.clickEvent=function(){
            alert('---')
        }
    }

})();

在router.js文件上我写这个

(function() {
    'use strict';

    angular.module('firstApp.firstdir').config(Routes);


    Routes.$inject = ['$stateProvider', '$urlRouterProvider'];
    function Routes($stateProvider, $urlRouterProvider) {
        // Default
        $urlRouterProvider.otherwise('/app');
        // Application
        $stateProvider
            .state('app', {
                url: '/app',
                views:{
                    app: { templateUrl: 'firstdir/templates/firstpage.html' }
                },
                controller:"firstcont"

            });
    }

})();

在module.js文件中我写这个

(function() {
    'use strict',

        angular.module('firstApp.firstdir', [
            'ui.router',
        ]);

})();

在template.html我写这个

<div ng-controller="firstcont">
    <h1>First page</h1>
    <button ng-click="clickEvent()"> go to second page</button>
</div>

不知道为什么不显示第一视图。其实我做不了plunker，因为没有办法做目录？

angular.js:78 Uncaught Error: [$injector:modulerr] Failed to instantiate module firstApp due to:
Error: [$injector:modulerr] Failed to instantiate module firstApp.firstdir due to:
Error: [$injector:nomod] Module 'firstApp.firstdir' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.2.21/$injector/nomod?p0=firstApp.firstdir
    at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:78:12
    at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:1668:17
    at ensure (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:1592:38)
    at module (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:1666:14)
    at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3852:22
    at forEach (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:325:18)
    at loadModules (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3846:5)
    at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3853:40
    at forEach (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:325:18)
    at loadModules (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3846:5)
http://errors.angularjs.org/1.2.21/$injector/modulerr?p0=firstApp.firstdir&…%3A%2FUsers%2Fnksharma%2FDesktop%2FAngularjs%2Flib%2Fangular.js%3A3846%3A5)
    at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:78:12
    at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3880:15
    at forEach (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:325:18)
    at loadModules (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3846:5)
    at file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3853:40
    at forEach (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:325:18)
    at loadModules (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3846:5)
    at createInjector (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:3786:11)
    at doBootstrap (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:1435:20)
    at bootstrap (file:///C:/Users/nksharma/Desktop/Angularjs/lib/angular.js:1450:12)
http://errors.angularjs.org/1.2.21/$injector/modulerr?p0=firstApp&p1=Error%…3A%2FUsers%2Fnksharma%2FDesktop%2FAngularjs%2Flib%2Fangular.js%3A1450%3A12)

Answer 1

您已经在另一个模块中定义了您的路线：firstApp.firstdir。要导入模块，请使用以下语法：

var app= angular.module('firstApp',['firstApp.firstdir']);

您不需要导入 ui.router，因为它是从 firstApp.firstdir 导入的。

Answer 2

首先包含 js 文件（模块声明总是在前，然后是子模块）

<!-- The order here is very important -->
<script src="js/module.js" type="text/javascript"></script>
<script src="js/router.js" type="text/javascript"></script>
<script src="js/firstcontroller.js" type="text/javascript"></script>
<script src="js/app.js" type="text/javascript"></script>

将您的 'firstcont' 声明为 firstApp.firstDir 控制器：

var firstDir = angular.module('firstApp.firstdir');
...
firstDir.controller('firstcont', firstcont);

将你的子模块作为你的 firstApp 模块的依赖：

//Remember firstApp.firstdir must be already declared :)
var app= angular.module('firstApp',['firstApp.firstdir', 'ui.router']);

更新：这是代码示例 http://goo.gl/xxvIvB（要运行单击预览）

如何在 angular 中导入模块并显示在视图中？

How to import module and display on view in angular?

javascript

angularjs

angular-ui

angularjs-directive

angularjs-scope