Angular JS 缓存问题

最新推荐文章于 2025-03-30 03:26:57 发布

IT小白lp

最新推荐文章于 2025-03-30 03:26:57 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： angular2缓存

本文链接：https://blog.youkuaiyun.com/sqlpeng/article/details/78460569

前端开发专栏收录该内容

6 篇文章

订阅专栏

本文介绍了解决AngularJS应用在.NET MVC环境下因缓存导致更新不及时的问题。通过创建一个.exe文件在构建时自动更新版本号，并在HTML和JS文件中加入版本参数，确保每次加载的都是最新内容。详细步骤包括修改.cs文件，引入版本变量，以及在systemjs.config.js和HTML组件中应用该版本号。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：.net mvc ng 项目，每个component，html页面第一次加载后都会产生本地缓存，存储下来，导致新的页面改动不能及时刷新出来。
解决方案，.net项目中自带一个版本文件，需要自己发布项目时自己手动更改它，这里我把它在构建的时候自动增加这个version. 我们会写好一个.exe的file在build event中添加这个事件即可。然后就可以在项目中用这个版本号了。在js和html页面后面加这个参数？v=versionNumber即可解决。
版本文件内容

“ $(SolutionDir)Tools\AllOutput\DllVersionBuilder.exe" "$ (ProjectDir)Properties” 传入文件路径作为参数。
在build events中添加自增版本

.exe 的源代码如下：根据代码开发时间去生成唯一的版本
private static void Main(string[] args)
{
if (args.Length == 1)
{
string path = args[0];
string path2 = Path.Combine(path, “CommonAssemblyInfo.cs”);
if (File.Exists(path2))
{
string text = File.ReadAllText(path2);
Regex regex = new Regex(“\d+.\d+.\d+.\d+”, RegexOptions.IgnoreCase);
MatchCollection matchCollection = regex.Matches(text);
if (matchCollection.Count > 0)
{
string value = matchCollection[0].Value;
DateTime now = DateTime.Now;
string newValue = string.Format(“{0}.{1}.{2}.{3}”, new object[]
{
now.Year - 2014,
now.Month,
now.Day,
now.Ticks.ToString().PadLeft(4, ‘0’).Substring(now.Ticks.ToString().Length - 4, 4)
});
text = text.Replace(value, newValue);
File.WriteAllText(path2, text);
}
}
}
}

用的时候先在mvc页面中导入变量。
c#code拿到变量值。
public static class SystemInformationFactory
{
public static string AssemblyFileVersion { get; private set; }

    static SystemInformationFactory()
    {
        AssemblyFileVersion = GetAssemblyFileVersion();
    }

    private static string GetAssemblyFileVersion()
    {
        var attributes = Assembly.GetExecutingAssembly().GetCustomAttributes(typeof(AssemblyFileVersionAttribute), false);

        if (attributes.Length == 0)
        {
            return string.Empty;
        }

        var fileInformation = attributes[0] as AssemblyFileVersionAttribute;

        if (fileInformation == null)
        {
            return string.Empty;
        }

        return fileInformation.Version;
    }
}

页面引用变量
@{
string version = “?v=” + Acc.MvcApp.Helpers.SystemInformationFactory.AssemblyFileVersion;
string environment = SysParamFactory.GetSysParam(“Environment”)}
这里写图片描述

angular js systemjs.config.js配置中添加js version。

第一种方法可以在引进packages 时添加。

// packages tells the System loader how to load when no filename and/or no extension
    packages: {
        app: {
            main: './Main',
            defaultExtension: 'js' + DefaultValues.Version
        },
        rxjs: {
            defaultExtension: 'js' + DefaultValues.Version
        },
        primeng: {
            defaultExtension: 'js' + DefaultValues.Version
        }

    }

也可以在’system.locate’ 中返回这个js。

(function (global) {
SystemJS.defaultJSExtensions = true;
//var syslocate = System.locate;
//System.locate = function (local) {
//    var system = this;
//    return Promise.resolve(syslocate.call(this, local).then(function (address) {
//        return address + DefaultValues.Version;
//    }));
//};

html 页面添加版本。这里用一个静态方法，在每个component 引入页面时候，添加这个版本号。

这里写图片描述

在 service 声明这个变量，然后在静态类中添加这个静态方法返回即可。

declare var DefaultValues: any;
public static getURLVersion(url: string): string {
    return url + DefaultValues.Version;
}

运行项目可以在dubug环境中看到结果。

这里写图片描述