0

我正在使用 ui-router 开发 angular js 1.x 应用程序，并且由于我是 angular js 的新手而遇到了瓶颈，所以如果我听起来很傻，请原谅我。

问题：

我有一个主要的 angular js 应用程序，它有自己的 css 文件和脚本文件（控制器、指令 3rd 方库，如引导程序、angular 等和服务文件）。

现在我有一个独立设计的登录页面（它有自己的 css、脚本和图像文件）。

现在我想将上面提到的登陆页面与它自己的单独文件集成在 Angular js 应用程序的根路径上。

所以我的问题是我应该怎么做？，这样当我尝试访问登录页面和主应用程序的路由时，css和脚本文件不会相互冲突。

我已经尝试分别加载登陆页面状态和主要应用程序文件所需的文件，但它们似乎与彼此的文件发生冲突。因为我认为正在发生的事情是已经为登陆页面延迟加载的文件与当我单击登录页面上的主应用程序链接时，为主应用程序延迟加载的文件。

编辑1：

我还尝试使用 angular-ui-router-styles 它完成了这项工作，因为它在添加新文件之前卸载了所有延迟加载的文件，但发生的情况是在页面重新加载时出现无样式页面，然后在几秒钟后它获得样式，因为包加载将 css 文件附加到 head 标记后

4

2 回答 2

1

我通过将两个项目完全分开来做到这一点。当我将项目部署到我的服务器时，我将 Angular 应用程序放入登录页面项目的子目录中。

为此，您需要告诉 Angular 应用程序它在子目录中运行，而不是在站点的根目录中。在部署时，我有一个 gulp 任务修改<base href="/">Angular 应用程序的 index.html 中的标签，所以它看起来像这样：<base href="/sub-directory-name/">

我使用 gulp 任务，这样当我在本地开发时，我可以从根目录而不是子目录运行 Angular 应用程序。

修改<base>标签意味着您不必更改 Angular 应用程序中的任何 URL 以反映它在子目录中的新位置。

最后，我的 Web 服务器（在我的例子中是 nginx）被配置为在根目录提供登录页面，以及来自子目录的单页应用程序。

于 2017-02-11T19:26:58.900 回答
1

假设您有 index.html 必须在其中插入一页，那么您的正文部分应该是这样的

<body>
<div>
<ui-view></ui-view>
</div> 
</body>.

现在在你的控制器文件中假设 index.js 你的代码应该是这样的

var myApp=angular.module("myModule",["ui.router"])

.config(function($stateProvider,$urlRouterProvider){
 $urlRouterProvider.otherwise("/home");
$stateProvider
    .state("homePage",{
            url:"/home",
            templateUrl:"site/homepage.html",
            controller:"homePageController as homePageCtrl"
            })
     .state("Dashboard",{
            url:"/dashboard",
            templateUrl:"site/dashboard.html",
            controller:"DashboardController as homePageCtrl"
            })

)}

说明：您必须在配置中注入 $urlRouterProvider 服务才能默认路由到特定状态。在这个例子中，我们制作`

$urlRouterProvider.otherwise("/home");

所以它将路由到 url “/home”，这是为主页状态指定的 url。因此它将加载该状态的相应html页面，即homePage.html。如果您希望在加载项目时将其他静态页面作为默认页面，只需在 $urlRouterProvider() 中指定其 url。不要忘记注入 $urlRouterProvider 服务。同样在您的 index.html 中添加所有自定义 css 文件，如果它覆盖引导 css 文件，然后确保将您的 id 添加到您的 html 并为此指定 css。希望我已经清除了您的问题。

于 2017-02-08T07:35:23.923 回答