标签: angularjs-routing

我读了很多关于lazzy loading的内容,但是在使用$ routeProvider时我遇到了一个问题.

我的目标是加载一个包含控制器的javascript文件,并添加一个先前已加载的控制器的路由.

我要加载的javascript文件的内容

angular.module('demoApp.modules').controller('MouseTestCtrlA', ['$scope', function ($scope) {
    console.log("MouseTestCtrlA");
    $scope.name = "MouseTestCtrlA";
}]);

调用angular bootstap时不包含此文件.这意味着,我必须加载文件并创建到该控制器的路由.

首先,我开始编写一个必须加载Javascript文件的resolve函数.但是在路由声明中声明我的控制器参数给了我一个错误:

'MouseTestCtrlA'不是函数,未定义

这是我要设置的电话:

demoApp.routeProvider.when(module.action, {templateUrl: module.template, controller: module.controller, resolve : {deps: function() /*load JS file*/} });

从我读到的,控制器参数应该是一个注册的控制器

controller - {(string | function()=} - 如果作为字符串传递,则应与新创建的作用域或已注册控制器的名称相关联的控制器fn.

所以我写了一个工厂,应该能够加载我的文件,然后(承诺风格!)我试图宣布一个新的路线.

它给了我类似下面的东西,其中依赖是一个javascript文件的加载路径数组:

用法

ScriptLoader.load(module.dependencies).then(function () {
    demoApp.routeProvider.when(module.action, {templateUrl: 'my-template', controller: module.controller});
});

脚本加载器

angular.module('demoApp.services').factory('ScriptLoader', ['$q', '$rootScope', function ($q, $rootScope) {
        return {
            load: function (dependencies)
            {
                var deferred = $q.defer();
                require(dependencies, function () {
                    $rootScope.$apply(function () {
                        deferred.resolve();
                    }); …

我有两个抽象的状态parent,并parent.child和一个可激活的状态parent.child.grand.

我想parent将承诺解决之前parent.child.grand得到它做出决议执行.为什么？因为它来自于从决心Ajax请求的特定数据parent在需要parent.grand.child.

这是一个要点

是否可以在不使用控制器的情况下顺序将父级的承诺链接到子状态？

(parent解决开始 - >完成ajax请求 - >解析promise - > parent.child.grand解决启动 - >完成ajax请求 - >解析promise

我正在尝试在angularJS应用程序中创建一个简单的链接到已上载的文件.我没有问题产生链接,因为这是非常微不足道的.然而,我遇到的问题是路由系统我拦截链接并尝试在角度内加载它,当然这会失败并返回默认路由.当然,这并不是我想要的行为.我的链接是使用

<a href="{{doc.url}}">{{doc.name}}</a>

我也试过了

<a ng-href="{{doc.url}}">{{doc.name}}</a>

但显然这不会改变最终的链接.生成的HTML是

<a class="ng-binding" href="/uploads/attachment/file/13/FILENAME.pdf">FILENAME.pdf</a>

哪个是对的.但现在,当我点击链接时,我才会回到默认路线.我该怎么做才能阻止ui-router尝试处理这个链接？

我没有找到从网址中删除index.html的方法,因为这样看起来真的很难看.

mydomain.com/index.html#/myview1 
mydomain.com/index.html#/myview2

有没有办法删除该部分,就像该网址将是如此清晰的用户所在.

mydomain.com/myview1
mydomain.com/myview2

Tnx提前为您的时间.

编辑:我只是觉得它可以像以下一样工作:

mydomain.com/#/myview1
mydomain.com/#/myview2

这与index.html相比要好得多.

但是,如果有更短的解决方案让我知道.

我想检查一个http服务,看看用户是否经过身份验证,以及是否有权在AngularJS 1.2.0rc1中查看某个页面(控制器).

我有这种情况:用户A想要访问http://www.example.com/content.现在,当他或她未经过身份验证时,无法访问此内容.如果用户未经过身份验证,则应将其重定向到http://www.example.com/login.

现在我设法做到了这一点,但我简要地看到了内容页面的渲染html.我不想要这个.如何在不呈现内容页面的情况下重定向到登录页面？

我这样注册我的路线:

$routeProvider.when('/login', route.resolve('Login', false))
$routeProvider.when('/content', route.resolve('Content', true))

现在我试过这个:

$rootScope.$on('$routeChangeStart', function (event, route) {
    if (route.requiresLogin) {
        $http.get('/api/user/loggedin/').then(function (response) {
            if (response !== 'true') {
                $location.path('/login');
            }
        });
    }
});

哪个有效,但我仍然看到其他页面(内容)的html内容闪烁.

我在这里读到,您还可以尝试在解析路由时更改解析功能:

    var resolve = function (baseName, requiresLogin) {
    var routeDef = {};
    var dependencies = [routeConfig.getControllersDirectory() + baseName + 'Controller.js'];

    routeDef.templateUrl = routeConfig.getViewsDirectory() + baseName.toLowerCase() + '.html';
    routeDef.controller = baseName + 'Controller';
    routeDef.requiresLogin = requiresLogin;
    routeDef.resolve = {
        load: ['$q', …

在我的AngularJS应用程序的路由配置中,大多数路由都定义为选项reloadOnSearch设置false为在搜索参数更改时页面不应重新加载的大部分时间.

但在极少数情况下,我需要一个不同的行为,我需要重新加载URL,尽管只更改了搜索参数.

有没有办法强制AngularJS重新加载URL虽然reloadOnSearch设置为false？

我发现了角度应用的问题.我有一个位置提供程序设置使用html5Mode true:

$locationProvider.html5Mode(true);

我注意到在页面之间导航时,favicon正在消失.我正在使用IE11边缘文档模式.

有没有人碰到这个？

谢谢

我已经决定在我的routeprovider上工作,但我只是回复了承诺,所以我不知道它的成功与否.这就是我所拥有的

.when('/items', {
    templateUrl: 'views/items.html',
    controller: 'ItemsCtrl',
    resolve: {
        resolvedData: function(Restangular) {
            return Restangular.one('Items').get();
        }
    }
})

现在这确实有效,但我如何检测成功或失败...我可以在解决方法中输入这个,但是在成功和失败中我会返回什么...记住我需要在我的控制器中注入该项目.

.when('/items', {
    templateUrl: 'views/items.html',
    controller: 'ItemsCtrl',
    resolve: {
        resolvedData: function(Restangular) {
            Restangular.one('Items').get().then(function(data) {
                // success
            }, function() {
                // failure
            });
        }
    }
})

我确实在这里看到了一个例子但是我很困惑,如果这是我需要的以及如何使用它？

AngularJS - 使用$ routeProvider:resolve拒绝$ http承诺

它似乎正在回归手工承诺.

resolve: {
    response: ['Warranty'
        '$q',
        function(Warranty, $q) {
            var dfd = $q.defer();
            Warranty.sendRequest().then(function(result) {
                dfd.resolve({
                    success: true,
                    result: result
                });
            }, function(error) {
                dfd.resolve({
                    success: false,
                    reason: error
                });
            });
            return …

我在AngularJS网站上完成了教程,我注意到在第7步,它们改变了控制器如何引入应用程序.最初,他们使用指令:

<body ng-controller="PhoneListCtrl">
...
</body>

但是,它稍后会更改为使用controller属性作为一部分ng-route.

$routeProvider.
    when('/phones', {
        templateUrl: 'partials/phone-list.html',
        controller: 'PhoneListCtrl'
    }). 
    /* rest of routes here */ 

这是进行更改的git diff.这两种技术有区别吗？

对于高级角度用户来说,这可能是一个简单的问题,但我没有在某个地方找到这个问题.

所以我正在重构我的代码,当我意识到,我在视图中有两个控制器,这不是问题,当控制器'ACtrl'被$ stateProvider绑定并且控制器'BCtrl'在视图中通过ng-controller绑定.但是当我尝试在$ stateProvider中分配它们时,如下所示:

$stateProvider.state('a.view', {
    url: "/anurl",
    views: {
        'menuContent': {
            templateUrl: "anUrlToMyTemplates",
            controller: 'ACtrl', 'BCtrl'
        }
    }
}); 

或者那个:

$stateProvider.state('a.view', {
    url: "/anurl",
    views: {
        'menuContent': {
            templateUrl: "anUrlToMyTemplates",
            controller: 'ACtrl',
            controller: 'BCtrl'
        }
    }
});

它不会起作用.

我知道这将是一个解决方案,使控制器的内容达到一个,但控制器'ACtrl'也在其他地方使用,所以我不得不在其他地方重复自己.我该怎么解决这个问题......