标签: angularjs-routing

我有以下配置:

$routeProvider
.when('/cars', { templateUrl: 'app/cars/index.html', controller: 'CarsCtrl', reloadOnSearch: false })
.when('/bikes', { templateUrl: 'app/bikes/index.html', controller: 'BikesCtrl', reloadOnSearch: false });

在我的根index.html的某个地方有一个:

<a href="#/cars">Cars</a>
<a href="#/bikes">Bikes</a>
<div ng-view></div>

现在,我希望在DOM中同时加载和生成两个视图,并根据路由/ URL显示其中一个.

类似下面的内容(不是实际的工作代码,只是为了给你一个想法).

app.js:

$routeProvider
.when('/cars', { controller: 'CarsCtrl', reloadOnSearch: false })
.when('/bikes', { controller: 'BikesCtrl', reloadOnSearch: false });

root index.html:

<a href="#/cars">Cars</a>
<a href="#/bikes">Bikes</a>
<div ng-include="'app/cars/index.html'" ng-show="carsVisible"></div>
<div ng-include="'app/bikes/index.html'" ng-show="bikesVisible"></div>

更新:我知道ng-view类型可以做到这一点,但差异,如果微妙,存在.我希望每个视图的html生成一次并始终保留在DOM中.

我在url中有一个动态值params,我想在onload时得到它并在控制器中使用但是我不知道如何处理 $route.current.params

假设我有这个路由提供商

$routeProvider.when('foo/:bar', {templateUrl: 'template.html'};

然后在我的控制器中

app.controller('mapCtrl', function($scope, $route, $routeParams) {

  var param = $route.current.params.bar;
  console.log(param);

});

如果用户访问foo/abcdefg假设应该在控制台中显示abcdefg但我收到错误.'无法读取属性'params'的undefined'

使用ngRoute可以在事件中挂钩:$routeChangeStart并执行不同的操作......

 app.run(function ($rootScope, $location) {
    $rootScope.$on("$routeChangeStart", function (event, next, current) {
    ................

使用UI-Router可以实现相同的功能吗？

我有一个AngularJS应用程序,它使用新的,基于状态的ui-router.我的应用程序中有三个不同的视图,其中一个是顶级视图,另外两个是嵌套视图.

结构基本如下:

/ => Top-level view
/foo => Abstract view, loads a view that contains a ui-view placeholder
/foo/bar => View for the placeholder
/foo/baz => View for the placeholder

路由器设置如下:

app.config(['$urlRouterProvider', '$stateProvider', function ($urlRouterProvider, $stateProvider) {
  'use strict';

  $urlRouterProvider
    .when('/bar', '/foo/bar')
    .otherwise('/');

  $stateProvider
    .state('home', {
      url: '/',
      views: {
        '': {
          controller: 'homeController',
          templateUrl: '/home/homeLayout.html',
        },
        'firstHomeView@home': {
          templateUrl: '/home/firstHomeView.html'
        },
        'secondHomeView@home': {
          templateUrl: '/homme/secondHomeView.html'
        }
      }
    })
    .state('foo', {
      abstract: true,
      templateUrl: '/foo/fooLayout.html',
      controller: 'fooController'
    }) …

我的app.js样子

var app = angular.module('pennytracker', [
  '$strap.directives',
  'ngCookies',
  'categoryServices'
]);

app.config(function($routeProvider) {
  console.log('configuring routes');
  $routeProvider
    .when('/summary', { templateUrl: '../static/partials/summary.html'})
    .when('/transactions', { templateUrl: '../static/partials/transaction.html', controller: 'AddTransactionController' })
});

而我的app/js/services/categories.js样子

angular.module('categoryServices', ['ngResource']).
  factory('Category', function($resource){
    return $resource(
      '/categories/:categoryId',
      {categoryId: '@uuid'}
    );
  });

我有一条路线

  .when('/transactions', { templateUrl: '../static/partials/transaction.html', controller: 'AddTransactionController' })

我的控制器app/js/controllers/transactionController.js看起来像

function AddTransactionController($scope, $http, $cookieStore, Category) {
 // some work here
  $scope.category = Category.query();
  console.log('all categories - ', $scope.category.length);
}

当我运行我的应用程序时,我看到console.log为

all categories -  0 

我在这做错了什么？

我正在尝试创建基本验证,无论用户是否可以访问某些路由.我在这方面取得了进展,但有一点我无法弄清楚.

我正在使用$ locationChangeStart来监控路由更改.场景是:1.如果用户已登录,则允许他访问除auth路由(登录,注册)之外的所有路由.我通过从我的AuthFactory 2调用方法isAuthenticated()来检查这个.如果用户没有登录,那么他只访问登录和注册路由.应该防止任何其他路由,并且在这种情况下应该将用户重定向到登录.

$rootScope.$on('$locationChangeStart', function(event, newUrl, oldUrl){
  if(AuthFactory.isAuthenticated()){
    if(AuthFactory.isAuthRoute(newUrl)){
      event.preventDefault();
      $location.path('/');
    }
  } else {
    if(!AuthFactory.isAuthRoute(newUrl)){
      event.preventDefault();
      $location.path('/login');
    }

  }
});

让我烦恼的是那个带有preventDefault()的人.如果应用程序到达带有preventDefault()的代码,location.path()那么之后就会发生这种情况.

但是,如果我删除event.preventDefault(),location.path()工作.问题是,我需要阻止,以防非记录尝试访问某些非auth页面.

基本上,我希望能够根据请求的路线阻止或重定向.这样做的正确方法是什么？

我跟着这篇文章和另一篇文章,我试图复制维基上的内容,没有任何运气.

到目前为止,这就是我所做的文件夹结构:

• 局部
  • 指数
    • index.html //内部视图
    • index.css
    • index.js // controller
  • 页脚
    • footer.html
    • footer.js
  • 头
    • //相同的结构
• index.html //主文件

stateProvider:

angular.module('app').config(function($stateProvider, $urlRouterProvider) {
        $stateProvider.state("index",
        {
            url: "/index",
            templateUrl:'/partial/index.html',
            views: {
                'footer@index': {
                    templateUrl: "/partial/header.html",
                    controller:"FooterCtrl"
                },
                'header@index': {
                    templateUrl: "/partial/header.html",
                    controller: "HeaderCtrl"
                }
            }
    });  
 $urlRouterProvider.otherwise('/index');

编辑:

这是标记:

<div>
    <div id="content" class="container">

        <div ui-view="header"></div>
        <div ui-view></div>
        <div ui-view="footer"></div>

    </div>
  </div>

我正在浏览的网址是:localhost:9001 /#/ index

我没有任何错误只是一个空白页面

我是AngularJS的新手,需要一些帮助,我有一个"AppCtrl",从那里我有一个HTTP webservice调用 - 并且需要在我的其他控制器中访问webservice调用响应.

angular.module('starter.controllers', [])

.controller('AppCtrl', function($scope, $http) {

    $scope.webservice_url = "http://webserviceurl.com/";

    $http.get($scope.webservice_url+"?action=get_settings").success(function(data, status, headers, config) {
        $scope.stations = data.stations;
    });
})

这工作很精细 - 我可以访问我的模板中的$ scope.stations - 但现在我想访问我的"PlaylistCtrl"控制器中的$ scope.stations,但这是未定义的:(

.controller('PlaylistCtrl', function($scope, $stateParams) {
    console.log($scope.stations); // is undefined :(
})

如何在加载"PlaylistCtrl"之前确保http调用已"完成"(成功)...

当我尝试刷新页面时出现此错误:

angular.js:38 http://errors.angularjs.org/1.4.5/ $ injector/modulerr？
P0 = MyApp来&P1 =错误%3A%2 ... ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.5%2Fangular.min.js%3A19%3A381)

我有一个简单的模块,依赖于ngRoute:

var app = angular.module('myapp', ["ngRoute"]);

app.config(function ($routeProvider) {

$routeProvider
.when('/', {
    templateUrl :'pages/main.html',
    controller : 'mainController'

})

.when('/second',{
    templateUrl : 'pages/second.html',
    controller : 'secondController'
})


});

和我的HTML代码:

<html ng-app='myApp'>
<head><title>The title</title></head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5
/angular.min.js"></script>
<script src="https://code.angularjs.org/1.4.5/angular-route.js">               
<script src="app.js"></script>
</script>
<body>

<div ng-view>
</div>


</body>


</html>

我在多个视图之间使用角度路由,并尝试在每个路由更改时填充公共面包屑列表.这工作正常,但面包屑中的超链接不起作用.

基本上我有一个网站,其中包含以下视图:

意见/ main.html中

意见/ page_a.html

意见/ page_b.html

和结构:

main> page a> page b

$rootScope.$on('$routeChangeSuccess', function(scope, next, current) {  

    var thisView = next.loadedTemplateUrl;
    if (!thisView) return;
    var breadcrumb = jQuery('#breadCrumb'); //<ol> container
    breadcrumb.empty();

    if (thisView.indexOf('page_a') >= 0) {
      breadcrumb.append('<li><a href="#/main">main</a></li>');    
      breadcrumb.append('<li class="active">page a</li>'); 
    }
    else if (thisView.indexOf('page_b') > 0) {
      breadcrumb.append('<li><a href="#/main">main</a></li>');    
      breadcrumb.append('<li><a href="#/page_a">page a</a></li>');
      breadcrumb.append('<li class="active">page b</li>'); 
    }
  });

不幸的是,这些超链接没有到正确的地方.我想我已经尝试了所有组合,例如#/ page_a,#/ page_a.html,/ views/page_a.html,......但没有运气.觉得这应该不难,但是已经很晚了所以我希望得到一些帮助.谢谢!

编辑

我的路线设置如下:

app.config(function ($routeProvider) {
  $routeProvider
  .when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
  })
  .when('/page_a', {
    templateUrl: …