在angular js中的一个单独文件中定义应用程序

defining app in a separate file in angular js

本文关键字：单独 一个 文件 定义 应用程序 js angular      更新时间：2023-09-26

我正在尝试将现有代码分离到不同的文件中。我在一个js文件中声明了ng应用程序，如下所示：

 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;
        });

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>

在脚本部分，我包含了app.js，这就是上面的js文件。但在运行代码后，它出现了错误：未能实例化应用程序。

在这个中帮助我

当依赖项未满足时，这是典型的问题

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

你在应用程序之后加载角度路由，因此依赖项注入失败

虽然您应该在angular之前加载jQuery，但是angular元素将使用jQuery选择器

相关文章：