AngularJS - 如何加载基于URL的ng-view？

我一直在关注CodeSchool上的AngularJS教程。AngularJS - 如何加载基于URL的ng-view？

所以我有views/index.html其中包含我的所有样板代码，每个页面都是相同的。然后我的每个页面的模板都在views/templates/中，我想将其包含在index.html页面中。所以当主页加载时，它会加载views/index.html并包含views/templates/index.html。

视图/
- 的index.html
- 模板/
  - 的index.html
  - contact.html
  - about.html

目前我有

<div id="menu"> 
     <a id="menu_home" href="/#/index" ng-click="menu.set(0)" ng-class="{current:menu.isSet(0)}">Home</a> 
     <a id="menu_hire" href="/#/hire" ng-click="menu.set(1)" ng-class="{current:menu.isSet(1)}">For Hire</a> 
     <a id="menu_info" href="/#/info" ng-click="menu.set(2)" ng-class="{current:menu.isSet(2)}">Info</a> 
    </div> 
    <div id="main"> 
     <ng-view></ng-view> 
    </div>

伟大的工程。所以只需要所需的html并被插入到页面中。

但我的问题是，URL不会在浏览器中更改。因此，如果用户直接转到mysite.com/contact，它将无法工作。如果直接访问mysite.com/contact或mysite.com/about页面，如何正确加载页面？

我也使用ngRoute模块得到它的工作，但是当用户直接进入页面时仍然存在相同的问题。

谢谢。

来源

2016-03-04 BelegNeurion

u能角度UI路由器 –

是否使用使用$ stateProvider或$ urlProvider？ –

@AmitSirohiya我使用了ngRoute模块中的$ routeProvider。 – BelegNeurion

您应该使用ngRoute和$ routeProvider类似于以下内容。

var navigationRoutes = angular.module('navigationRoutes', ['ngRoute']); 

/** 
* Load routes for navigation using ngRoute 
*/ 
navigationRoutes.config(function ($routeProvider) { 
    $routeProvider 
     .when('/index', { 
      templateUrl: 'app/components/index/index.view.html', 
      controller: 'IndexCtrl' 
     }) 
     .when('/contact', { 
      templateUrl: 'app/components/contact/contact.view.html', 
      controller: 'ContactCtrl' 
     }) 
     .otherwise({ 
      redirectTo: '/dashboard' 
     }); 
});

这样您还可以根据URL指定不同的控制器。

UPDATE

如果您添加索引页 -

<div class="view"> 
    <div ng-view></div> 
</div>

到您的主index.html页面的$ routeProvider的内容选择的文件将在专区内显示。您只需确保在index.html页面中为controller.js文件添加标记。

来源

2016-03-04 11:12:59 Mutton92

但是，如果用户直接访问联系人页面，即不通过主页（例如书签页面）怎么办？他们最终只会看到组件？我在Angular路由上看到的解决方案似乎都没有解决这个问题。 – BelegNeurion

刷新页面也是一样。使用导向组件的当前URL将新请求发送到服务器。 – BelegNeurion

您需要在Web服务器，使这些设置应用到所有的URL重定向到你的索引页，你加载你的角度应用程序，它反过来将处理路线

来源

2016-09-16 10:25:36

AngularJS - 如何加载基于URL的ng-view？

回答

相关问题