如何优化 AngularJS 配置函数
How to optimize AngularJS config function
我的 app.js 文件中有以下配置函数和 运行 函数。优化这些功能方法的最佳方法是什么?我们可以将它们移动到一个配置函数中吗?
或者我们可以将它们移到另一个文件中并使用吗?如果可以,请在评论中更新我的代码。
.config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
cfpLoadingBarProvider.includeSpinner = false;
cfpLoadingBarProvider.includeBar = true;
}])
.run(function($state, $rootScope, $window) {
$rootScope.$state = $state;
$rootScope.$on("$locationChangeSuccess",
function(event, current, previous, rejection) {
$window.scrollTo(0, 0);
});
})
.config(function($httpProvider) {
return $httpProvider.interceptors.push("AuthInterceptor");
})
.config(['toastyConfigProvider', function(toastyConfigProvider) {
toastyConfigProvider.setConfig({
limit: 2,
sound: true,
position: 'top-center',
shake: false,
theme: 'material'
});
}])
.config(function($stateProvider, $urlRouterProvider, $locationProvider, helloProvider, toastrConfig) {
helloProvider.init({
facebook: '1234567899',
google: '12345890-wgewrgwrgwrgrgwr.apps.googleusercontent.com',
twitter: 'wgwerwrgwrgwrgwrgwrw'
}, {
redirect_uri: 'redirect.html',
oauth_proxy: 'https://auth-server.herokuapp.com/proxy',
oauth_version: '1.0a' // probably 1.0a with hello.js
});
也许您可以使用单个 .config 调用来简化您的配置函数,然后您还可以命名您的依赖项来处理 uglify 过程。
.config(["cfpLoadingBarProvider",
"$httpProvider",
"toastyConfigProvider",
"$stateProvider",
"$urlRouterProvider",
"$locationProvider",
"helloProvider",
"toastrConfig",
function (cfpLoadingBarProvider,
$httpProvider,
toastyConfigProvider,
$stateProvider,
$urlRouterProvider,
helloProvider,
toastrConfig) {
cfpLoadingBarProvider.includeSpinner = false;
cfpLoadingBarProvider.includeBar = true;
$httpProvider.interceptors.push("AuthInterceptor");
toastyConfigProvider.setConfig({
limit: 2,
sound: true,
position: 'top-center',
shake: false,
theme: 'material'
});
helloProvider.init({
facebook: '1234567899',
google: '12345890-wgewrgwrgwrgrgwr.apps.googleusercontent.com',
twitter: 'wgwerwrgwrgwrgwrgwrw'
}, {
redirect_uri: 'redirect.html',
oauth_proxy: 'https://auth-server.herokuapp.com/proxy',
oauth_version: '1.0a' // probably 1.0a with hello.js
});
}])
.run(function ($state, $rootScope, $window) {
$rootScope.$state = $state;
$rootScope.$on("$locationChangeSuccess",
function (event, current, previous, rejection) {
$window.scrollTo(0, 0);
});
});
如果你想在多个文件中组织你的配置函数,最好的选择可能是使用一个包,在这种情况下,有一些可行的选择。
例如,您可以使用 Gulp 来连接(缩小、丑化)您的文件,因此:
文件
文件 1:
angular.module('mymodule', [])
.config(["dependencyA", function (dependencyA) {
dependencyA.doSomething();
}]);
文件 1:
angular.module('mymodule', [])
.config(["dependencyB", function (dependencyB) {
dependencyB.doSomething();
}]);
文件 3:
angular.module('mymodule', ["dependecies..."])
.run(["authService", (authService) => {
authService.fillAuthData();
}]);
gulp.file
var gulp = require("gulp");
var concat = require("gulp-concat");
var sourcemaps = require("gulp-sourcemaps");
gulp.task("ts", () => {
return gulp.src("./src/js/**/*.js")
.pipe(sourcemaps.init())
.pipe(concat("dist.js"))
.pipe(sourcemaps.write())
.pipe(gulp.dest("./js/"))
})
Grunt, browserify or if your are using ASP.Net 相同。
我更喜欢从单个 app/module 定义开始,然后如果解决方案开始增长,我会打开捆绑解决方案。
祝一切顺利。
我的 app.js 文件中有以下配置函数和 运行 函数。优化这些功能方法的最佳方法是什么?我们可以将它们移动到一个配置函数中吗? 或者我们可以将它们移到另一个文件中并使用吗?如果可以,请在评论中更新我的代码。
.config(['cfpLoadingBarProvider', function(cfpLoadingBarProvider) {
cfpLoadingBarProvider.includeSpinner = false;
cfpLoadingBarProvider.includeBar = true;
}])
.run(function($state, $rootScope, $window) {
$rootScope.$state = $state;
$rootScope.$on("$locationChangeSuccess",
function(event, current, previous, rejection) {
$window.scrollTo(0, 0);
});
})
.config(function($httpProvider) {
return $httpProvider.interceptors.push("AuthInterceptor");
})
.config(['toastyConfigProvider', function(toastyConfigProvider) {
toastyConfigProvider.setConfig({
limit: 2,
sound: true,
position: 'top-center',
shake: false,
theme: 'material'
});
}])
.config(function($stateProvider, $urlRouterProvider, $locationProvider, helloProvider, toastrConfig) {
helloProvider.init({
facebook: '1234567899',
google: '12345890-wgewrgwrgwrgrgwr.apps.googleusercontent.com',
twitter: 'wgwerwrgwrgwrgwrgwrw'
}, {
redirect_uri: 'redirect.html',
oauth_proxy: 'https://auth-server.herokuapp.com/proxy',
oauth_version: '1.0a' // probably 1.0a with hello.js
});
也许您可以使用单个 .config 调用来简化您的配置函数,然后您还可以命名您的依赖项来处理 uglify 过程。
.config(["cfpLoadingBarProvider",
"$httpProvider",
"toastyConfigProvider",
"$stateProvider",
"$urlRouterProvider",
"$locationProvider",
"helloProvider",
"toastrConfig",
function (cfpLoadingBarProvider,
$httpProvider,
toastyConfigProvider,
$stateProvider,
$urlRouterProvider,
helloProvider,
toastrConfig) {
cfpLoadingBarProvider.includeSpinner = false;
cfpLoadingBarProvider.includeBar = true;
$httpProvider.interceptors.push("AuthInterceptor");
toastyConfigProvider.setConfig({
limit: 2,
sound: true,
position: 'top-center',
shake: false,
theme: 'material'
});
helloProvider.init({
facebook: '1234567899',
google: '12345890-wgewrgwrgwrgrgwr.apps.googleusercontent.com',
twitter: 'wgwerwrgwrgwrgwrgwrw'
}, {
redirect_uri: 'redirect.html',
oauth_proxy: 'https://auth-server.herokuapp.com/proxy',
oauth_version: '1.0a' // probably 1.0a with hello.js
});
}])
.run(function ($state, $rootScope, $window) {
$rootScope.$state = $state;
$rootScope.$on("$locationChangeSuccess",
function (event, current, previous, rejection) {
$window.scrollTo(0, 0);
});
});
如果你想在多个文件中组织你的配置函数,最好的选择可能是使用一个包,在这种情况下,有一些可行的选择。 例如,您可以使用 Gulp 来连接(缩小、丑化)您的文件,因此:
文件
文件 1:
angular.module('mymodule', [])
.config(["dependencyA", function (dependencyA) {
dependencyA.doSomething();
}]);
文件 1:
angular.module('mymodule', [])
.config(["dependencyB", function (dependencyB) {
dependencyB.doSomething();
}]);
文件 3:
angular.module('mymodule', ["dependecies..."])
.run(["authService", (authService) => {
authService.fillAuthData();
}]);
gulp.file
var gulp = require("gulp");
var concat = require("gulp-concat");
var sourcemaps = require("gulp-sourcemaps");
gulp.task("ts", () => {
return gulp.src("./src/js/**/*.js")
.pipe(sourcemaps.init())
.pipe(concat("dist.js"))
.pipe(sourcemaps.write())
.pipe(gulp.dest("./js/"))
})
Grunt, browserify or if your are using ASP.Net 相同。 我更喜欢从单个 app/module 定义开始,然后如果解决方案开始增长,我会打开捆绑解决方案。
祝一切顺利。