javascript - 如何使用 ui-router 将静态登陆页面与其自己的设计集成到根路由

标签 javascript html angularjs angular-ui-router oclazyload

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

问题:

我有一个主要的 Angular JS 应用程序,它有自己的 css 文件和脚本文件( Controller 、指令第 3 方库,如 Bootstrap 、Angular 等和服务文件)。

现在我有一个登陆页面,它有单独的设计(它有自己的CSS、脚本和图像文件)。

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

所以我的问题是我应该怎么做? ,这样当我尝试访问登陆页面和主应用程序的路线时,CSS 和脚本文件就不会相互冲突。

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

编辑 1:

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

最佳答案

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

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

现在在你的 Controller 文件中假设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"
            })

)}

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

$urlRouterProvider.otherwise("/home");

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

关于javascript - 如何使用 ui-router 将静态登陆页面与其自己的设计集成到根路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42106711/

相关文章:

javascript - Javascript 中的图像

html - 无法在 div(容器)中移动我的表

javascript - 修改字符串中的 "a"标签并在javascript函数中返回更新后的字符串

css - 条件 ng-class 样式适用于所有 div

JavaScript:比较字符和重音字符

javascript HTML 获取值

javascript - 即使修复了 AngularJS 指令也无法在 IE 上运行

javascript - jQuery 删除多个样式

HTML 选择,强制方向向下

angularjs - 在 Angular 中导航回时恢复事件选项卡