标签: angularjs-routing

我有一个相当简单的Angular项目,它在JavaScript中路由到几个不同的URL:

function RootController($scope) {};

function PageOneController($scope) {};

angular.module('mymodule', []).config(
    ['$routeProvider', function($routeProvider) {
        $routeProvider.when('/', {
             templateUrl: "templates/root.html",
             controller: RootController
        }).when('/page1/', {
             templateUrl: "templates/page1.html",
             controller: PageOneController
        }).otherwise({redirectTo: '/'});
    }]
);

到目前为止,一切都很好,但我确实需要一种方法,在输入和退出这些路径时运行一些JavaScript函数.即:

 $routeProvider.when('/', {
     templateUrl: "templates/root.html",
     controller: RootController,
     onenter: function() { console.log("Enter!"); },
     onexit: function() { console.log("Exit!"); }
 });

有没有办法在Angular中做到这一点？在输入状态/路由时,我需要绑定事件侦听器,在退出时我需要销毁它们并拆除它们.

我无法弄清楚如何让routeProvider等到远程调用返回.我见过的最好的解决方案是这里的例子:延迟角度路线变化 .不幸的是,当我厌倦将该示例应用于我自己的代码时,绑定将在数据实际加载之前触发.有没有人知道另一个使用角度1.1.5的新资源语法的例子($ promise可以直接访问)？

这是我的代码的样子:

var productModule = angular.module('productModule', ['ngResource', 'ngLocale']).
config(['$routeProvider', function($routeProvider) {

    $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html',
        controller: 'ResourceCtrl as appController' ,
        resolve:
        {
            productData: function($resource)
            {
                console.log(["calling service"]);
               return $resource(Services.ProductServices.PATH).query(null,
                   function(data){
                       console.log(["call succeeded"]);
                   },
                   function(data){
                       console.log(["calling failed"]);
                   }).$promise;
            }
        }
    });
    $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html'});
    $routeProvider.otherwise({redirectTo: '/view1'});
}]) ;  

productModule.controller('ResourceCtrl','$scope','productData',function($scope,productData)  {

    $scope.productData = productData;
    console.log(["promise resolved"]);
}]);

如果我运行该代码,控制台将显示:

• 呼叫服务
• 承诺解决了
• 呼叫成功

我从以下链接http://passportjs.org/guide/authenticate/了解到在passport.js中使用身份验证方法

在我的项目中,我有以下代码:

app.post('/login', function(req, res, next) {
        passport.authenticate('local', function(err, user, info) {
            if (err) { console.log(err); return next(err) }
            if (!user) {
                return res.json(400, info);
            }
            req.logIn(user, function(err) {
                if (err) { return next(err); }
                return res.json(200, {user_id: user._id, url:"/user/home"});
            });
        })(req, res, next);
    });

我在另一个文件中调用了/ login url,如下所示

 $http.post('/login', $scope.user).
              success(function(data, status, headers, config) {
                $window.location.href= data.url ? data.url : '/';
                $scope.view.loading = false;
              }).error(function(data, status, headers, config) {
                console.log(data);
                $scope.view.loading = false;
                $scope.view.submitted = true;
                $scope.view.serverError=data.message ? …

我正在玩AngularJS作为学习练习.我正在尝试使用AngularJS ui-router(https://github.com/angular-ui/ui-router)并且我遇到了一个问题,我遇到了一个问题.

我把一个插在一起来说明和重现.

http://plnkr.co/edit/OvmOKPMfeFqNWc7ToCff?p=preview

以上是一个简单的向导类型组件,顶部有选项卡可以移动到特定步骤,底部有一些下一个/后退按钮可以移动到下一个相关页面.

顶部的选项卡导航工作正常,单击沿移动会相应地更改视图和URL.

然而,下一个/后退按钮的行为非常奇怪,只要它们在您第一次单击下一步时工作,而不是之后.你应该能够看到我正在谈论的内容.

看起来它试图导航到正确的视图,但随后立即恢复到其他规则.

我已经在代码中添加了钩子以在控制台中进行跟踪.本质上所有的下一个/后退按钮都称为相关状态,所以$ state.go("step1"),$ state.go("step3")等.

希望我已经提供了足够的信息,并希望任何人都可以带来任何洞察力.

谢谢.

我想保留控制器的实例而不重新加载.我设置reloadOnSearch为false,我在控制器中管理路由更改.这是代码.

这是我链接的示例<a href="products/page/2">next</a>.我已经定义了以下模块.

angular.module('app.products', ['ngRoute', 'ngResource'])
.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
            .when('/:section/:view/:number', {
                templateUrl: 'tpl/table.html',
                controller: 'ProductsCtrl',
                controllerAs: 'productsCtrl',
                reloadOnSearch: false
            });
}])
.controller('ProductsCtrl', ['$scope', '$routeParams', '$location', ProductsCtrl]);

调节器

function ProductsCtrl($scope, $routeParams, $location) {

    $scope.$on('$routeUpdate', function () {
        console.log("routeUpdate");
    });

}

但是控制器不会响应更改的路由,并且文本不会写入控制台输出.

有没有办法通过URL获取路线？

我的意思是我有一条路线/users/:id,我正在使用路线对象$route

var route_object = ($route.routes['/users/:id']);

但是有可能通过此URL获取路线 /users/5

所以,当我尝试

var route_object = ($route.routes['/users/5']);

我得到了未定义的价值.

所以我在这个新项目中使用Ionic,需要一些路由支持(angular n00b).

我有这些状态:

$stateProvider.state('map', {
    url: '/map',
    views: {
        map: {
            templateUrl: 'views/map.html',
            controller: 'mapCtrl'
        }
    }
})

.state('help', {
    url: '/help',
    views: {
        help: {
            templateUrl: 'views/help.html'
        }
    }
})

.state('setname', {
    url: '/setname',
    views: {
        setname: {
            templateUrl: 'views/setname.html',
            controller: 'setNameCtrl'
        }
    }
})

并且我希望用户在"myName"为空时尝试访问另一个页面时被重定向到"setname"(将来我会做类似的事情来检查用户是否在允许访问应用程序之前登录) .

这是当前的HTML,根本不确定这个...

<ion-tabs class="tabs-positive">
    <ion-tab icon="ion-home" ui-sref="map">
        <ion-nav-view name="map"></ion-nav-view>
    </ion-tab>
    <ion-tab icon="ion-help" ui-sref="help">
        <ion-nav-view name="help"></ion-nav-view>
    </ion-tab>
</ion-tabs>

请帮助一下,我会很感激.

第二个问题,仍然是路由和显示内容:我的应用程序的基础将是地图.我希望用户能够非常快速地到达它,所以我希望它在显示另一个页面的时候一直在后台保持可用(让我们说帮助).因此,每当用户单击给定按钮时,它只会将他带回地图,而不必再次加载它.你会怎么建议我这样做？我想过使用Ionic的"popover"属性,但我不确定它是否正确:http://ionicframework.com/docs/api/service/ $ ionicPopover /

非常感谢你 !

我正在创建一个用户可以从FaceBook或Twitter登录的应用程序.登录后,用户被定向到一些主页.在这里,调用控制器加载和我的初始函数,它加载特定于该用户的数据.

当用户单击"注销"时.清除令牌并将用户定向到SignIn Page.现在没有关闭应用程序,如果用户再次使用Twitter登录,则用户被定向到同一主页.该控制器的范围具有相同的数据.我知道Ionic使用缓存来提高性能.但我只是想要一种方法来清除缓存只有当用户点击注销按钮时.

我正在尝试为我的项目添加一些路由.我正在使用Angular 1.3.0的基本角度路线

app.js文件:

'use strict';
var routerApp = angular.module('mcw', [
  'ngRoute',
  'mcw.controllers', 
  'directives',
  'filters',
  'mcw.services']);
routerApp.config(function ($routeProvider) {
  $routeProvider
  .when('/', {templateUrl: 'index.html', controller: 'LoginController'})
  .when('/Home', {templateUrl: 'templates/home.html', controller: 'ResourcesController'})
  .otherwise({redirectTo: '/'});
});

index.html文件:

<!DOCTYPE html>
<html lang="en" ng-app="mcw">
    <head>
        <meta charset="utf-8">
        <title>title spec</title>

        <script src="js/angular1.3.0/angular.js"></script>
        <script src="js/angular1.3.0/angular-route.js"></script>
        <script src="js/angular1.3.0/angular-animate.js"></script>
        <script src="js/app.js"></script>
        <script src="js/commonFunc.js"></script>
        <script src="js/controllers.js"></script>
        <script src="js/directives.js"></script>
        <script src="js/filters.js"></script>
        <script src="js/server.js"></script>
        <script src="js/services.js"></script>
    </head>
    <body>  
    </body>
</html>
 

我使用'python -m http.server'(Python 3.4.3)作为服务器,网址为"127.0.0.1:8000/","127.0.0.1:8000/index.html","127.0.0.1: 8000/index.html#/ Home"全部转到index.html页面.

如何根据路由器提供的当前控制器更改显示在控制器范围之外的标题？基本上,我有调用特定路由时加载的mainMenu控制器.但是,在视图之外,存在部分包括的标题.我想根据当前路线更改标题内的输出.我在下面添加了代码结构:

的index.html

<div ng-include="'partials/header.html'"></div>
<div ng-view></div>

/partials/header.html

<header ng-controller="HeaderCtrl">
      <h1>{{ currentTitle }}</h1>
</header>

/partials/main-menu.html

<div ng-controller="MainMenuCtrl">

</div>

路由器

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

TaskApp.config(['$routeProvider',
  function($routeProvider){
  $routeProvider.
      when('/main-menu', {
        templateUrl: "partials/main-menu.html",
        controller: "MainMenuCtrl"
      }).
      otherwise({
        redirectTo: "/"
      });
  }]);

控制器:

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

taskAppControllers.controller('TaskAppCtrl',[function(){}]);
taskAppControllers.controller('DesktopCtrl',[function(){}]);

taskAppControllers.controller('MainMenuCtrl', ['$scope','$http',
 function($scope, $http){
  $http.get('data/main-menu.json?' + Math.random()).success(function(data){
    $scope.mainMenuOptions = data;
  });
  $scope.currentTitle = "Main menu"
}]);

taskAppControllers.controller('HeaderCtrl', ['$scope',
 function($scope){
   //
}]);