标签: angularjs-routing

我尝试使用ng-view中包含的ui-view,但它不起作用.但是当我在ng-view,ui-view工作和ng-view附近使用ui-view时.

不工作:

<div ng-view id="body-div"></div>

工作:

<div ui-view id="body-div"></div>
<div ui-view id="body-div"></div>

例.http://plnkr.co/edit/WHWw5DNHBRWjo1JIGouq

我在我的app.js文件中有以下2条路线,由于某种原因我不知道何时尝试导航到/clients/new-invoice我看到/clients/:clientID路线和模板.我可以转到正确页面的唯一方法是删除/clients/:clientID路线.

我也注意到,只有在我添加:clientID到下面的路线后才开始发生这种情况.

有人可以通过告诉我我在这里做错了什么来帮助我吗？

    $routeProvider.when('/clients/:clientID', 
            {     templateUrl: 'templates/client-profile-view.html', 
                  controller: 'ClientsController',
                  title: 'Client Profile',
                  data: {
                     auth: true,
                     plevel: [5] 
                  }                
            });    


    $routeProvider.when('/clients/new-invoice', 
            {     templateUrl: 'templates/new-invoice.html', 
                  controller: 'InvoicesController',
                  title: 'New Invoice',
                  data: {
                     auth: true,
                     plevel: [5] 
                  }                
            });

根据文档，$route.current包含controller和locals.

例如，如果这是我的路线之一：

    $routeProvider
    .when('/item1/:value', {
        templateUrl: 'item1.html',
        controller: 'Item1Controller',
        title: 'Item 1'
    });

{{$route.current}} 打印出来 {"params":{"value":"value1"},"pathParams":{"value":"value1"},"loadedTemplateUrl":"item1.html","locals":{"$template":"<p>item 1:{{params}}</p>","$scope":"$SCOPE"},"scope":"$SCOPE"}

1. 为什么没有controller？

2. {{$route.current.title}}打印出“项目 1”。但上面没有财产title？

究竟$route.current包含什么？

如果在尝试加载资源时,如果在URL中使用URL中的参数加载API,那么将客户端重定向到错误路由的最佳方法是什么？

当某人访问例如orders/1时,他们会看到订单,但如果其中一个没有访问,订单未找到或发生任何其他异常,那么最好如何处理？

我有一些像这样的代码:

$scope.$on("$locationChangeStart", function(event, newPath, oldPath) {

    // Do some sync checks
    if (!$scope.isPageAllowed($location.path()))
    {
        // Prevent default for some reason
        event.preventDefault();
    }
});

当我试图promises像这样解决:

$scope.$on("$locationChangeStart", function(event, newPath, oldPath) {

    // Do some async checks
    $scope.fooPromises().then(function (data) {

         // Prevent default for some reason when promises resolved (only if resolved)
         event.preventDefault();
    });
});

我得到了全成event(因为异步执行的),并在一段时间后阻止event时promises得到解决.

有没有办法event与我联系promises,所以在承诺得到解决之后它会被完全阻止而且在功能结束后没有直接？

我有一个应用程序在前端有四个模块,我正在尝试尽可能多地使用前端的AngularJs我正在使用一个空的网站asp.net项目来托管所有文件和REST serviceStack,我的项目有以下几种结构:

~/ (web.config, global.asax and all the out of the box structure for an asp.net website)
- App <-  AngularJs 
    - Users  <-  js controllers and views (static html files)
    - Companies
    - BackEnd
    - Public
    Index.html
    IndexCtrl.js
    App.js
- Content
- Js

我使用angularjs服务调用和后端我使用REST与servicestack.

问题是如何限制只有经过身份验证的用户访问那些静态html文件？比如公司,后端和用户内部的那些

我来自Rails世界,控制器负责执行业务逻辑,但单个控制器可以呈现多个视图,具体取决于应该执行的操作.

然而,在对AngularJS进行一些研究之后,我感觉控制器只有一个责任(与单个视图相关联).因此,例如,如果我们有一个列出餐馆的应用程序,我们将拥有以下内容:

@restauranteur.config(['$routeProvider', ($routeProvider) ->
  $routeProvider.
    when('/restaurants', {
      templateUrl: '../templates/restaurants/index.html',
      controller: 'RestaurantIndexCtrl'
    }).
    when('/restaurants/:id', {
      templateUrl: '../templates/restaurants/show.html',
      controller: 'RestaurantShowCtrl'
    }).
    otherwise({
      templateUrl: '../templates/home.html',
      controller: 'HomeCtrl'
    })
])

一个控制器将用于'索引',另一个用于'show'.这是Angular中正确的方法/建议方法吗？

我有一个实现向导的简单多视图Angular应用程序,因此每次用户单击"下一步"按钮时,应用程序将导航到下一个视图,"后退"按钮也相同.我有一个$routeProvider配置将所有视图绑定到同一个控制器.每个视图代表一个包含输入字段的巨大表单块,并$routeProvider管理它们之间的导航:

app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {
    $routeProvider.when('/salespoints', {
        templateUrl: 'salespoints',
        controller: 'main'
    })
    .when('/users', {
        templateUrl: 'users',
        controller: 'main'
    })
    .otherwise({
        templateUrl: 'partner',
        controller: 'main'
    });

    $locationProvider.hashPrefix('');
}]);

问题是,每次用户单击"下一步"或"返回"时,都会调用控制器,因此$scope以前步骤所做的所有更改都会丢失:

app.controller('main', ['$scope', function ($scope) {
    console.log('controller invoked'); // appears each time a user presses "Next" or "Back", hence re-instantiation of $scope
}]);

应用程序足够小$rootScope,以防万一其他方法失败,但我只想避免这种情况作为反模式.

保持$scope最新状态的最佳方法是什么,从应用程序实例的生命周期的一开始就进行所有更改,而不是在每次更改视图时重新实例化？

在我的Angular JS应用程序中工作的路由器.我的代码是:

脚本:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>

HTML:

<div ui-view></div>

app.js:

var myApp = angular.module('myApp', ['ui-router','mainControl','ui.bootstrap', 'ngSanitize']);
myApp.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/splash');
  //
  // Now set up the states
  $stateProvider
    .state('splash', {
      url: '/splash',
      templateUrl: 'partials/splash2.html',
      controller: 'MainControl'
    })
    .state('advice', {
      url: '/advice',
      templateUrl: 'partials/advice.html',
      controller: 'MainControl'
    })
    .state('main', {
      url: '/main',
      templateUrl: 'partials/main.html',
      controller: 'MainControl'
    })
    });

我已成功将ngRoute集成到我的项目中,但由于某种原因,路由无法在Safari和IE中运行,所以这就是为什么我现在尝试将UI路由器集成到我的项目中以便我能够成功地使用路由工作在我的申请中.

任何帮助,将不胜感激.

我正在开发一些使用角度和弹簧靴的项目,我有一些令人困惑的情况:

我有Spring Controller与我的应用程序共享视图文件名

@Controller
public class OfferViewController {

    @RequestMapping(value = "/addOffer", method = RequestMethod.GET)
    public String addView() {
        return "html/offer/addOffer";
    }

    @RequestMapping(value = "/showOffer/{offerId}")
    public String showOffer(@PathVariable("offerId") String offerId){
        return "html/offer/showOffer";
    }
}

我还有一些其他控制器来处理REST调用:

@RestController
public class OfferRestController {

    private OfferRepository offerRepository;

    @Autowired
    public OfferRestController(OfferRepository offerRepository) {
        this.offerRepository = offerRepository;
    }

    @RequestMapping(value = "/showOfferJson/{offerId}", method = GET, produces = APPLICATION_JSON_VALUE)
    public Offer showOffertest(@PathVariable("offerId") String offerId) {
        Offer offer = offerRepository.findOne(offerId);
        return offer;
    }

    @RequestMapping(value = "/saveOffer", method = …