Question

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

问题：

我有一个主角js app，它有自己的css文件和脚本文件（控制器，指令第三方库，如bootstrap，angular etc和services文件）。

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

现在我想将上述登录页面与angular js app的根路径上的独立文件集成。

所以我的问题是我应该怎么做？，以便当我尝试访问登录页面和主应用程序的路径时，css和脚本文件不会与每个文件发生冲突。

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

修改1：

我也尝试使用angular-ui-router-styles它可以完成这项工作，因为它在添加新文件之前卸载所有延迟加载的文件但是会发生在页面上重新加载无格式页面然后在几秒钟后它获得样式因为在将头文件附加到头标签

之后，包加载css文件

Answer 1

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

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

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

修改<base>代码意味着您无需更改Angular应用中的任何网址，以反映其在子目录中的新位置。

最后，我的网络服务器（在我的情况下是nginx）被配置为在根目录下提供登录页面，从子目录提供单页面应用程序。

Answer 2

假设您有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");

所以它会路由到网址＆＃34; / home＆＃34;这是为homePage状态指定的url。所以它将加载该状态的各个html页面，即homePage.html。如果您希望在加载项目时将其他静态页面作为默认页面，只需在$ urlRouterProvider（）中指定其URL。别忘了注入$ urlRouterProvider服务。另外在index.html中添加所有自定义css文件，如果它覆盖了boootstrap css文件，那么请确保将你的id添加到你的html并为其指定css。希望我已经解决了你的问题。

如何使用ui-router

2 个答案: