在角度js的单独文件中定义app

I'm trying to separate my existing code to different files. I declared ng-app in a js file same as below:

我正在尝试将现有代码分成不同的文件。我在js文件中声明了ng-app,如下所示:

 define(['routes-admin', 'services/dependencyResolverFor'], function (routes, dependencyResolverFor) {
        var app = angular.module('app', ['ngRoute', 'formly', 'xeditable', 'toaster', 'ngAnimate', 'ui.bootstrap']);
      app.config([
                '$routeProvider',
                '$locationProvider',
                '$controllerProvider',
                '$compileProvider',
                '$filterProvider',
                '$provide',
                '$httpProvider',

                function ($routeProvider, $locationProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, $httpProvider) {
                    app.controller = $controllerProvider.register;
                    app.directive = $compileProvider.directive;
                    app.filter = $filterProvider.register;
                    app.factory = $provide.factory;
                    app.service = $provide.service;
                    $httpProvider.interceptors.push('middleware');
                ])
        return app;
        });

and html code is like this:

和HTML代码是这样的:

<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8"/>
    <title>title</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/font-awesome.min.css" rel="stylesheet"/>
    <link href="css/style.css" rel="stylesheet"/>
    <link href="css/style-blue1.css" rel="stylesheet" id="style_color"/>
    <link href="css/jstree-themes/default/style.min.css" rel="stylesheet">
    <link href="lib/toaster/toaster.css" rel="stylesheet">
    <script type="text/javascript" src="lib/intro.js"></script>
</head>
<body ng-app="app">
<div id="navbar">

</div>
<div id="container">
    <button class="btn" ng-click="functions()">funvtions</button>
</div>
<script type="text/javascript" src="lib/require.js"></script>
<script type="text/javascript" src="lib/angular/angular.js"></script>
<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="lib/angular/angular-route.min.js"></script>
<script type="text/javascript" src="lib/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="app/factories/MainViewFactory.js"></script>
<script type="text/javascript" src="app/controllers/MainViewController.js"></script>
<script type="text/javascript" src="lib/jstree.min.js"></script>
</body>
</html>

in the scripts segment I included app.js which is the js file above. but after running the code , it makes error : failed to instantiate app.

在脚本段我包含app.js,这是上面的js文件。但在运行代码后,它会出错:无法实例化应用程序。

help me in this

帮助我

1 个解决方案

#1

That's classic issue when dependencies aren't fulfilled

当依赖关系未得到满足时,这是一个经典问题

<script type="text/javascript" src="app/app.js"></script>
<script type="text/javascript" src="lib/angular/angular-route.min.js"></script>

you load angular route after app so the dependency injection fails

你在app之后加载了角度路由,因此依赖注入失败了

although you should load jQuery before angular, then angular.element will use jQuery selectors

虽然你应该在angular之前加载jQuery,但angular.element将使用jQuery选择器

#1