在Angular中为路径和链接创建常量?

时间:2017-06-09 23:47:29

标签: angularjs

我的网站到处都有链接和路径。

http://localhost:3001/controllers/getUsers
http://localhost:3001/controllers/getHouses

http://localhost:8080/assets/img/mypic.png
http://localhost:8080/assets/img/yourpic.png

当我们切换到生产服务器时,这是一个问题。

如何使用angular?中的路径创建“常量”?

const controllerPath = "http://localhost:3001/controllers/"
const imagePath = "http://localhost:8080/assets/img/"

所以我们可以在所有页面中使用它们吗?

我读到了这两个:

app.constant('controllerPath', 'http://localhost:3001/controllers/');
app.value('controllerPath', 'http://localhost:3001/controllers/');

但是你必须记住在所有页面上向所有控制器发送所有路径。

我们可以将它们放在$ rootScope中,但是你必须将它们转移到所有页面。

在Angular中是否有任何“设置”或类似内容可以设置全局常量?

2 个答案:

答案 0 :(得分:1)

您可以将常量附加到$rootScope服务,这将使它们自动可用于任何继承的范围,例如为您的控制器创建的范围。然后,您只需将其作为控制器$scope的属性进行访问,而无需单独注入$rootScope



angular
	.module('demoApp', ['ngRoute'])
	.controller('page1Controller', ['$scope', function($scope){
		console.log('Asset Prefix: ' + $scope.assetPrefix);
	}])
	.controller('page2Controller', ['$scope', function($scope){
		console.log('Controllers Prefix: ' + $scope.controllersPrefix);
	}]);

angular.module('demoApp').config(['$locationProvider', '$routeProvider', function($locationProvider, $routeProvider){
	$locationProvider.html5Mode(false);
	$routeProvider.when('/page1', {
		controller: 'page1Controller'
		, controllerAs: 'vm'
		, template: '<p>Assets are located at: {{assetPrefix}}</p><a href="#/page2">What about controllers?</a>'
	});
	$routeProvider.when('/page2', {
		controller: 'page2Controller'
		, controllerAs: 'vm'
		, template: '<p>Controllers are located at: {{controllersPrefix}}</p><a href="#/page1">What about assets?</a>'
	});
	$routeProvider.otherwise('/page1');
}]);

angular.module('demoApp').run(['$rootScope', function($rootScope){
	$rootScope.assetPrefix = 'http://localhost:8080/assets';
	$rootScope.controllersPrefix = 'http://localhost:3001/controllers';
}]);

jQuery(function($){
    angular.bootstrap(document, ['demoApp']);
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.min.js"></script>
<div>
<div ng-view></div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

你有2个解决方案:

  • 使用$rootScope获取所有常量 例如:$ rootScope.controllerPath = ... 并在每个控制器上注入$ rootScope;这是一种常见的用法。
  • 使用localStorage和那个很棒的lib https://github.com/gsklee/ngStorage

您注入$ localStorage并将其用作$ rootScope。

在我看来,这是一个更清洁的解决方案