如何在angularjs中访问预处理

Question

I am working on web application Angularjs with gulp. 我正在用gulp开发Web应用程序Angularjs。

Using gulp I am created one environment variable like below 使用gulp，我创建了一个如下所示的环境变量

var env = process.env.NODE_ENV  || 'test';

gulp.task('preprocess', function() {
    log('Preprocess..');
    log(env)
    // Minify and copy all JavaScript (except vendor scripts)
    return gulp.src(source.scripts)
        .pipe(preprocess({context:{target:env}}))
});

And this is my gulp output 这是我的gulp输出

[11:23:02] Starting 'preprocess'...
[11:23:02] Preprocess..
[11:23:02] test
[11:23:02] Finished 'preprocess' after 370 ms

But I can't access this environment variable inside my angular code. 但是我无法在我的角度代码中访问此环境变量。 I don't know need to include any plugins are not? 我不知道需要包括任何插件吗？

This is my js code for access environment variable 这是我的访问环境变量的js代码

//@ifdef  env='test'
    alert('Environment variable test');
//@endif

//@ifdef  env='local'
alert('Environment variable local');
//@endif    

//@ifdef  env='dev'
alert('Environment variable dev');
//@endif

How can I access the environment variable created by gulp. 如何访问由gulp创建的环境变量。

Please help me. 请帮我。

Answer 1

I assume you are developing an SPA that serves up index.html. 我假设您正在开发提供index.html的SPA。

If so then use a server side HTML templating library to pre-process your HTML. 如果是这样，请使用服务器端HTML模板库对HTML进行预处理。 We personally are using jade. 我们个人正在使用玉器。

You essentially convert index.html to Jade - giving you index.jade. 您实际上是将index.html转换为Jade-给您index.jade。 Create a gulp task to write your Jade to HTML. 创建一个gulp任务，将Jade编写为HTML。 In the gulp task you can set variables that Jade will use to write the index.html. 在gulp任务中，您可以设置Jade用来编写index.html的变量。

In your index.jade do something like ... 在您的index.jade中做类似...

<html class="VARIABLE_FROM_GULP_TASK"> <!-- this would be written in Jade -->

your gulp task would do the HTML conversion 您的gulp任务将执行HTML转换

then you can check if the class exists or not inside your JavaScript or in your CSS do something like ... 然后您可以检查类是否存在于JavaScript或CSS中，执行类似...

.var_exist .body { color:red }
.var_not_exist .body { color:blue }

note that the value of the variable will be written into the HTML file at build time. 请注意，变量的值将在构建时写入HTML文件。

Hope that helps. 希望能有所帮助。

如何在angularjs中访问预处理

问题描述

1 个解决方案

解决方案1
0 2016-02-04 12:25:58

如何在angularjs中访问预处理

问题描述

1 个解决方案

解决方案1 0 2016-02-04 12:25:58

解决方案1
0 2016-02-04 12:25:58